vue3 门户网站搭建7-eslint
为了方便阅读和维护,代码规范还是有必要的
1、安装:npm i eslint --save-dev
2、配置 .eslintrc.cjs 文件,增加 rules:
rules: {
'semi': ['warn', 'always'], // 分号结尾
'no-console': 'warn', // 禁止 console
'no-use-before-define': 0, // 禁止在变量定义之前使用
'no-unused-vars': 0, // 禁止出现使用未使用变量
'indent': ['warn', 4], // 使用一致的缩进
'eqeqeq': [1], // 要求使用 === 和 !==
'object-curly-spacing': ['warn', 'always'], // 对象 {} 两侧空格
'vue/multi-word-component-names': 'off', // 命名规范
"space-infix-ops": ["warn", { "int32Hint": false }], // 操作符空格 a + b
"comma-spacing": ["warn", { "before": false, "after": true }], // 逗号后空格
"arrow-spacing": ["warn", { "before": true, "after": true }], // 箭头函数两侧空格
"key-spacing": ["warn", { "beforeColon": false, "afterColon": true }], // key value中间的空格
'no-empty-function': 'warn', // 禁止出现空的函数块
'no-multi-spaces': 'warn', // 禁止使用多个空格
'no-multiple-empty-lines': 'warn', // 禁止出现多行空行
'no-trailing-spaces': 'warn', // 禁止一行结束后面不要有空格
'no-var': 'warn', // 禁止出现var用let和const代替
'quotes': ['warn', 'single', 'avoid-escape'], // 要求统一使用单引号符号
}
3、因为我这里还额外增加了 prettier(@vue/eslint-config-prettier),为了防止规则冲突,还需要配置一下 .prettierrc.json:
{
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"useTabs": false,
"bracketSpacing": true,
"arrowParens": "avoid",
"htmlWhitespaceSensitivity": "ignore"
}
4、配置不需要校验的文件,.eslintignore:
.idea
.vscode
dist
mock
node_modules
public
注: 如果有 ESLint: Delete `␍`(prettier/prettier) 的问题,则需要 .prettierrc.json 增加配置(系统平台不一致,对换行处理有区别):
"endOfLine": "auto"