前言
使用vscode，并且使用@/vue-cli初始化vue项目后，vue项目自带eslint，但若想自定义或从package.json中分离eslint配置，可以遵循如下做法。此做法适用于用webpack初始化的项目，自定义eslint用。
步骤
vscode
先配置vscode，使得vscode支持自行检查eslint规范，进行错误警或自动纠正，这里建议开启错误警告和自动纠正，强制性便于代码风格一致。
在 设置 中打开 settings.json 文件，并在其中添加如下配置：
{
......
// eslint
"eslint.options": {
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"vue-html",
"vue",
"html",
],
"eslint.run": "onSave",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
}
eslint
在项目中配置自己的eslint
npm install -g eslint：全局安装eslint（可选）- 在项目根目录使用
eslint --init命令，初始化.eslintrc.*文件，
这里我在初始化时选择了vue项目，使用.eslintrc.json - 在项目根目录创建
commlitlint.config.js：
module.exports = {
extends: ['@commitlint/config-conventional']};
- 补充
.eslintrc.json中的内容，可以按照eslint官网自定义，这里给出自己本人使用的.eslintrc.json：
{
// root 表示根 eslint，找到后不会再去父目录找了
"root": true,
// env 表示当前 eslint 使用环境
"env": {
"browser": true,
"node": true,
"es6": true
},
// extends 表示扩展的 eslint
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"vue"
],
"rules": {
// warn: 1, error: 2
// for 的走向
"for-direction": 1,
// 行末尾分号
"semi": [2, "always"],
// 强制数组方法的回调函数中有 return 语句
"array-callback-return": 2,
// 强制类方法使用 this
"class-methods-use-this": 2,
// 要求 Switch 语句中有 Default 分支
"default-case": 2,
// 若换行，强制在点号之后换行
"dot-location": [2, "object"],
// 强制使用全等
"eqeqeq": [2, "always"],
// 强制 for-in 加属性判断
"guard-for-in": 2,
// 禁止多个空格
"no-multi-spaces": 2,
// 禁止用斜线创建多行字符串
"no-multi-str": 2,
// 禁用__proto__
"no-proto": 2,
// 禁止自身比较
"no-self-compare": 2,
// 限制尽量抛出异常 error
"no-throw-literal": 2,
// 禁止不必要的 catch
"no-useless-catch": 2,
// 禁止使用不带 await 的 async
"require-await": 2,
// 禁止使用 yoda
"yoda": 2,
// 禁止变量声明覆盖外层作用域的变量
"no-shadow": [2, {
"builtinGlobals": true,
"hoist": "all"
}],
// 以下为风格约束
// 禁止或强制在括号内使用空格
"array-bracket-spacing": [2, "never"],
// 大括号风格要求
"brace-style": [2, "1tbs"],
// 强制驼峰命名
"camelcase": [2, {
"properties": "always"
}],
// 要求或禁止使用拖尾逗号
"comma-dangle": [
2,
"always-multiline"
],
// 强制在逗号周围使用空格
"comma-spacing": 2,
// 使用同样的逗号风格
"comma-style": 2,
// 禁止或强制在计算属性中使用空格
"computed-property-spacing": 2,
// 强制一致的 this 别名 that
"consistent-this": 2,
// 强制文件末尾有换行
"eol-last": 2,
// 要求或禁止在函数标识符和其调用之间有空格
"func-call-spacing": 2,
// 强制一致的缩进，默认 4 个空格
"indent": [2, 2],
// 强制在对象字面量的键和值之间使用一致的空格
"key-spacing": 2,
// 强制关键字周围空格的一致性
"keyword-spacing": [2, {
"overrides": {
"if": {
"after": false },
"for": {
"after": false },
"while": {
"after": false }
}
}],
// 要求构造函数首字母大写
"new-cap": 2,
// 不允许多个空行
"no-multiple-empty-lines": 2,
// 禁用嵌套的三元表达式
"no-nested-ternary": 2,
// 禁用行尾空白
"no-trailing-spaces": 2,
// 禁止属性前有空白
"no-whitespace-before-property": 2,
// 强制使用一致的反勾号、双引号或单引号
"quotes": [2, "single"],
// 强制分号前后的空格
"semi-spacing": 2,
// 要求或禁止语句块之前的空格
"space-before-blocks": 2,
// 要求或禁止函数圆括号之前有一个空格
"space-before-function-paren": [2, "never"],
// 禁止或强制圆括号内的空格
"space-in-parens": 2,
// 操作符周围有空格
"space-infix-ops": [2, {
"int32Hint": false
}],
// 要求注释前有空白
"spaced-comment": 2,
// 强制在 switch 的冒号左右有空格
"switch-colon-spacing": 2,
// 要求箭头函数体使用大括号
"arrow-body-style": [2, "as-needed"],
// 要求箭头函数的参数使用圆括号
"arrow-parens": [2, "as-needed"],
// 要求箭头函数的箭头之前或之后有空格
"arrow-spacing": 2,
// 禁止重复导入
"no-duplicate-imports": 2,
// 禁止var
"no-var": 2,
// 优先使用解构
"prefer-destructuring": 2
}
}