依赖安装
"eslint": "^8.13.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-promise": "^6.0.0",
"eslint-plugin-vue": "^8.6.0",
"eslint-webpack-plugin": "^3.1.1",
"@typescript-eslint/eslint-plugin": "^5.19.0",
"@typescript-eslint/parser": "^5.19.0",
"prettier": "^2.6.2",
eslint配置
新增
.eslintrc.js
module.exports = {
root: true,
env: {
browser: true,
node: true,
es6: true,
'vue/setup-compiler-macros': true // vue3写法的校验,会导致一些vue一些预设的方法提示报错,不需要重新import, 例如'defineProps' is not defined
},
parser: 'vue-eslint-parser',
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2020,
sourceType: 'module',
jsxPragma: 'React',
ecmaFeatures: {
jsx: true
}
},
extends: [
'plugin:vue/vue3-recommended',
'plugin:@typescript-eslint/recommended',
'prettier',
'plugin:prettier/recommended'
],
rules: {
'@typescript-eslint/no-empty-function': 'off', // 允许空函数
'@typescript-eslint/no-var-requires': 'off',
'@typescript-eslint/no-unused-vars': [
'error',
{
argsIgnorePattern: '^_',
varsIgnorePattern: '^_'
}
],
'prefer-const': [
// 不允许let定义常量
'error',
{
destructuring: 'any',
ignoreReadBeforeAssign: false
}
],
'space-before-function-paren': 'off', // 去掉函数前面的空格
'vue/multi-word-component-names': 'off',
'vue/custom-event-name-casing': 'off', // 自定义事件名称驼峰关闭
'vue/name-property-casing': ['error', 'PascalCase'], // 组件名称需要为驼峰
'vue/html-self-closing': [
'error',
{
html: {
void: 'never',
normal: 'always',
component: 'always'
},
svg: 'always',
math: 'always'
}
]
}
}
prettierr配置
新增
.prettierrc.js
module.exports = {
endOfLine: 'auto', // 允许代码结尾是回车或者换行,\n\r
printWidth: 120, // 换行字符串阈值
tabWidth: 2, // 水平缩进的空格数
useTabs: false,
semi: false, // 句末是否加分号
vueIndentScriptAndStyle: true,
singleQuote: true, // 用单引号
trailingComma: 'none', // 最后一个对象元素加逗号
bracketSpacing: true, // 对象,数组加空格
jsxBracketSameLine: true, // jsx > 是否另起一行
arrowParens: 'always' // (x) => {} 是否要有小括号
}
vscode配置,自动保存格式化
{
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // 需要的话请手动打开
// "source.fixAll": true
},
"eslint.validate": ["javascript", "html", "vue", "ts"],
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.configPath": ".prettierrc.js" // 这里直接读取项目的 prettier 配置文件
}