目录
- 使用
- eslint的使用
- 添加配置文件
- prettier的使用
- 使用husky和lint-staged构建代码
- 增加setting.json配置
- 参考资料
本文主要介绍在vue3中使用typescript做开发时，如何安装与配置eslint和prettier，以提高编码规范。
（1）eslint 提供编码规范；
（2）prettier 是一个 opinionated 的代码格式化工具。
使用
eslint的使用
安装依赖
npm i -d eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin
这四个依赖分别是：
- – `eslint`: eslint的核心代码
- – `eslint-plugin-vue`：[为vue使用eslint的插件](https://eslint.vuejs.org/)
- – `@typescript-eslint/parser`：eslint的解析器，用于解析typescript，从而检查和规范typescript代码
- – `@typescript-eslint/eslint-plugin`：这是一个eslint插件，包含了各类定义好的检测typescript代码的规范
添加配置文件
npx eslint --init
根目录下增加.eslintrc.js文件。（建议选择js文件，json不可以写注释） 修改配置文件
主要是修改rules中的相关配置，具体可查看官方配置
/*!
* https://eslint.bootcss.com/docs/rules/
* https://eslint.vuejs.org/rules/
*
* - 0: off
* - 1: warn
* - 2: error
*/
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true
},
parser: 'vue-eslint-parser',
parseroptions: {
parser: '@typescript-eslint/parser',
ecmaversion: 2020,
sourcetype: 'module',
jsxpragma: 'react',
ecmafeatures: {
jsx: true
}
},
globals: {
amap: false,
amapui: false
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/ban-ts-ignore': 'off',
'@typescript-eslint/explicit-function-return-type': 'off',
'@typescript-eslint/no-explicit-any': 'off',
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-empty-function': 'off',
'vue/custom-event-name-casing': 'off',
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': 'off',
'@typescript-eslint/ban-ts-comment': 'off',
'@typescript-eslint/ban-types': 'off',
'@typescript-eslint/no-non-null-assertion': 'off',
'@typescript-eslint/explicit-module-boundary-types': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsignorepattern: '^_',
varsignorepattern: '^_'
}
],
'no-unused-vars': [
'error',
{
argsignorepattern: '^_',
varsignorepattern: '^_'
}
],
'space-before-function-paren': 'off',
'vue/name-property-casing': ['error', 'pascalcase'], // vue/component-definition-name-casing 对组件定义名称强制使用特定的大小
'vue/attributes-order': 'off',
'vue/one-component-per-file': 'off',
'vue/html-closing-bracket-newline': 'off',
'vue/max-attributes-per-line': 'off',
'vue/multiline-html-element-content-newline': 'off',
'vue/singleline-html-element-content-newline': 'off',
'vue/attribute-hyphenation': 'off',
'vue/require-default-prop': 'off',
'vue/script-setup-uses-vars': 'off',
'vue/html-self-closing': [
'error',
{
html: {
void: 'always',
normal: 'never',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
}
}
prettier的使用
安装依赖
npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier
这三个依赖分别是：
- – `prettier`：prettier插件的核心代码
- – `eslint-config-prettier`：解决eslint中的样式规范和prettier中样式规范的冲突，以prettier的样式规范为准，使eslint中的样式规范自动失效
- – `eslint-plugin-prettier`：将prettier作为eslint规范来使用
添加配置文件
在项目的根目录下创建`.prettierrc.js`文件，并添加如下配置
module.exports = {
printwidth: 120, // 换行字符串阈值
tabwidth: 2, // 设置工具每一个水平缩进的空格数
usetabs: false,
semi: false, // 句末是否加分号
vueindentscriptandstyle: true,
singlequote: true, // 用单引号
trailingcomma: 'none', // 最后一个对象元素加逗号
bracketspacing: true, // 对象，数组加空格
jsxbracketsameline: true, // jsx > 是否另起一行
arrowparens: 'always', // (x) => {} 是否要有小括号
requirepragma: false, // 不需要写文件开头的 @prettier
insertpragma: false // 不需要自动在文件开头插入 @prettier
}
将prettier添加到eslint中
修改`.eslintrc.js`文件，在extends中增加
'prettier',
'plugin:prettier/recommended'
其中：
- – `prettier/@typescript-eslint`：使得@typescript-eslint中的样式规范失效，遵循prettier中的样式规范
- – `plugin:prettier/recommended`：使用prettier中的样式规范，且如果使得eslint会检测prettier的格式问题，同样将格式问题以error的形式抛出
使用husky和lint-staged构建代码
安装依赖
npm i --save-dev husky lint-staged
修改package.json
添加以下代码
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"src*/**/*.ts": [
"prettier --config .prettierrc.js --write",
"eslint",
"git add"
],
"src*/**/*.json": [
"prettier --config .prettierrc.js --write",
"eslint",
"git add"
]
}
这样，在执行git commit时，eslint会检查提交的代码。
增加setting.json配置
在.vscode文件夹中增加`setting.json`配置文件，用于自动保存时，自动修复及检验代码。
{
"typescript.tsdk": "./node_modules/typescript/lib",
"typescript.enablepromptuseworkspacetsdk": true,
"volar.tsplugin": true,
"volar.tspluginstatus": false,
//===========================================
//============= editor ======================
//===========================================
"explorer.openeditors.visible": 0,
"editor.tabsize": 2,
"editor.defaultformatter": "esbenp.prettier-vscode",
"diffeditor.ignoretrimwhitespace": false,
//===========================================
//============= other =======================
//===========================================
"breadcrumbs.enabled": true,
"open-in-browser.default": "chrome",
//===========================================
//============= files =======================
//===========================================
"files.eol": "\n",
"search.exclude": {
"**/node_modules": true,
"**/*.log": true,
"**/*.log*": true,
"**/bower_components": true,
"**/dist": true,
"**/elehukouben": true,
"**/.git": true,
"**/.gitignore": true,
"**/.svn": true,
"**/.ds_store": true,
"**/.idea": true,
"**/.vscode": false,
"**/yarn.lock": true,
"**/tmp": true,
"out": true,
"dist": true,
"node_modules": true,
"changelog.md": true,
"examples": true,
"res": true,
"screenshots": true,
"yarn-error.log": true,
"**/.yarn": true
},
"files.exclude": {
"**/.cache": true,
"**/.editorconfig": true,
"**/.eslintcache": true,
"**/bower_components": true,
"**/.idea": true,
"**/tmp": true,
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/cvs": true,
"**/.ds_store": true
},
"files.watcherexclude": {
"**/.git/objects/**": true,
"**/.git/subtree-cache/**": true,
"**/.vscode/**": true,
"**/node_modules/**": true,
"**/tmp/**": true,
"**/bower_components/**": true,
"**/dist/**": true,
"**/yarn.lock": true
},
"stylelint.enable": true,
"stylelint.packagemanager": "yarn",
"liveserver.settings.donotshowinfomsg": true,
"telemetry.enablecrashreporter": false,
"workbench.settings.enablenaturallanguagesearch": false,
"path-intellisense.mappings": {
"/@/": "${workspaceroot}/src"
},
"prettier.requireconfig": true,
"typescript.updateimportsonfilemove.enabled": "always",
"workbench.sidebar.location": "left",
"[javascriptreact]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[html]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"[markdown]": {
"editor.defaultformatter": "esbenp.prettier-vscode"
},
"editor.codeactionsonsave": {
"source.fixall.eslint": true
},
"[vue]": {
"editor.codeactionsonsave": {
"source.fixall.eslint": false
}
},
"cspell.words": [
"vben",
"windi",
"browserslist",
"tailwindcss",
"esnext",
"antv",
"tinymce",
"qrcode",
"sider",
"pinia",
"sider",
"nprogress"
]
}
参考资料
prettier官网
eslint官网
eslint rules
prettier看这一篇就行了
使用eslint+prettier规范typescript代码
到此这篇关于vue3+ts+eslint+prettier规范代码的方法实现的文章就介绍到这了,更多相关vue3 ts 规范代码内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！
黄山市民网：https://www.huangshanshimin.com/
