eslint规则只是限制我们在写代码时候的标准化，尤其是在团队开发中成员的代码一致性，如果大家都是自己的标准，那么写出的项目将没有办法进行阅读，不利于后期的二次开发
vscode自动格式化
而vscode写项目时候保存文件自动eslint格式化是在 文件 --> 首选项 -- > 设置中找到settings.json中进行设置，下面是代码块
添加这两句代码，就可以了
// 新版支持
// 语言标识符的数组，为此ESLint扩展应被激活，并应尝试验证文件。
"eslint.probe": [
"javascript",
"javascriptreact",
"vue-html",
"vue",
"html"
],
// 保存时对运行的代码进行eslint规则自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
下面是我平常开发中使用到的vscode配置
{
// 项目颜色主题
"workbench.colorTheme": "Dracula",
// 项目文件图标主题
"workbench.iconTheme": "material-icon-theme",
// 每次保存的时候自动格式化
"editor.formatOnSave": true,
// 可视区域内是否自动换行
"editor.wordWrap": "on",
// 老版支持
// "eslint.autoFixOnSave": true, // 启用保存时自动修复,默认只支持.js文件
// "eslint.validate": [
// "javascript", // 用eslint的规则检测js文件
// "vue", // 用eslint规则检测vue文件
// "html", // 用eslint规则检测html文件
// ],
// 新版支持
// 语言标识符的数组，为此ESLint扩展应被激活，并应尝试验证文件。
"eslint.probe": [
"javascript",
"javascriptreact",
"vue-html",
"vue",
"html"
],
// 保存时对运行的代码进行eslint规则自动修复
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
// 字体大小
"editor.fontSize": 16,
// 设置字体
"editor.fontFamily": "'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
// tab 一个制表符等于的空格数
"editor.tabSize": 4,
// 控制编辑器是否显示内联颜色修饰器和颜色选取器
"editor.colorDecorators": true,
// 控制编辑器是否启用了代码折叠
"editor.folding": true,
// 代码行高，0自动计算，8作为倍数
"editor.lineHeight": 24,
// 是否显示行号
"editor.lineNumbers": "on",
// 控制编辑器是否自动格式化粘贴的内容，格式化程序要可用，并且针对文档中的某一范围进行格式化
"editor.formatOnPaste": true,
// 控制是否在编辑器中显示CodeLens
"diffEditor.codeLens": true,
// 控制是否显示缩略图
"editor.minimap.enabled": true,
// 控制自动保存未保存的编辑器文件，onFocusChange切换文件时保存，afterDelay操作代码之后保存，onWindowChange切换编辑器之后保存
"files.autoSave": "onFocusChange"
}
vue项目中.eslintrc.js文件配置（仅个人使用）---这里的配置，是上面vscode配置执行的标准
module.exports = {
root: true,
env: {
node: true,
browser: true,
commonjs: true,
es6: true,
amd: true,
jquery: true
},
extends: [
'plugin:vue/vue3-essential',
'plugin:vue/base',
'@vue/standard',
"eslint:recommended"
],
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module'
},
rules: {
// console判断
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// debugger是否使用
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// 禁用 alert、confirm 和 prompt
'no-alert': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
// 这条验证目前只知道可以去除pubilc里面的index.html的规则报错，具体意思不清楚
// 貌似关闭在模版中使用 eslint-disable-next-line 等注释
'vue/comment-directive': 'off',
// eslint规则子组件不能修改props值得问题
'vue/no-mutating-props': 'off',
// notab--忽略用于缩进的tab
'no-tabs': ['error', { allowIndentationTabs: true }],
// 方法名小括号之后没有空格
'space-before-function-paren': 'off',
// 禁止在条件表达式中使用赋值运算符
'no-cond-assign': 'error',
// 禁止与-0去比较
'no-compare-neg-zero': 'error',
// 禁止在循环中出现 await
'no-await-in-loop': 'error',
// 强制 getter 函数中出现 return 语句
'getter-return': 'error',
// 强制 “for” 循环中更新子句的计数器朝着正确的方向移动
'for-direction': 'error',
// 禁止 function 定义中出现重名参数
'no-dupe-args': 'error',
// 禁止对象字面量中出现重复的 key
'no-dupe-keys': 'error',
// 禁止出现重复的 case 标签
'no-duplicate-case': 'error',
// 禁止出现空语句块
'no-empty': 'error',
// 禁止对 catch 子句的参数重新赋值
'no-ex-assign': 'error',
// 禁止不必要的布尔转换
'no-extra-boolean-cast': 'error',
// 禁止不必要的括号
'no-extra-parens': 'error',
// 禁止不必要的分号
'no-extra-semi': 'error',
// 禁止对 function 声明重新赋值
'no-func-assign': 'error',
// 要求使用 === 和 !==
'eqeqeq': 'error',
// 强制 typeof 表达式与有效的字符串进行比较
'valid-typeof': 'error',
// 要求使用 isNaN() 检查 NaN
'use-isnan': 'error',
// 禁止出现空函数
'no-empty-function': 'error',
// 禁止使用空解构模式
'no-empty-pattern': 'error',
// 禁止在没有类型检查操作符的情况下与 null 进行比较
'no-eq-null': 'error',
// 禁止使用多个空格
'no-multi-spaces': 'error',
// 禁止使用多行字符串
'no-multi-str': 'error',
// 禁止多次声明同一变量
'no-redeclare': 'error',
// 禁止自我赋值
'no-self-assign': 'error',
// 禁止自身比较
'no-self-compare': 'error',
// 要求或禁止 var 声明中的初始化
"init-declarations": ["error", "always"],
// 禁用未声明的变量，除非它们在 /*global */ 注释中被提到
'no-undef': 'error',
// 禁止将变量初始化为 undefined
'no-undef-init': 'error',
// 禁止出现未使用过的变量
'no-unused-vars': 'error',
// 禁止在变量定义之前使用它们
'no-use-before-define': 'error',
// 禁止出现未使用过的变量
'no-unused-vars': 'error',
// 是否允许非空数组里面有多余的空格
'array-bracket-spacing': ['error', 'never'],
// 要求箭头函数的参数使用圆括号
'arrow-parens': 'error',
// 强制驼峰法命名
'camelcase': 'error',
// this别名that
'consistent-this': ['error', 'that'],
// 必须使用 if(){} 中的{}
'curly': ['error', 'all'],
// 缩进风格
'indent': ['error', 2],
// 要求在注释周围有空行
'lines-around-comment': 'off',
// 函数最多只能有3个参数
'max-params': ['off', 4],
// 函数内最多有几个声明
'max-statements': ['off', 10],
// 禁止在代码后使用内联注释
'no-inline-comments': 'off',
// 换行风格-强制使用一致的换行符风格
'linebreak-style': ['off', 'windows'],
// 禁止将全局对象当作函数进行调用
'no-obj-calls': 'error',
// 禁止对函数参数再赋值
'no-param-reassign': 'error',
// 不允许使用undefined变量
'no-undefined': 'error',
// 禁止使用令人困惑的多行表达式
'no-unexpected-multiline': 'error',
// 要求将变量声明放在它们作用域的顶部
'vars-on-top': 'error'
}
}
然后就是和prettier搭配使用
1.vscode搜索扩展工具prettier并安装
2.在项目中新建".prettierrc文件"，并添加规则，格式如下
{
"semi": false,
"singleQuote": true,
"trailingComma": "none"
}
3.在文件->首选项->设置中 搜索save找到Editor:Format On Save并勾选
完成这3步基本上就配置完成了，但是prettier和eslint本身会有冲突的地方，需要修改一些地方
1).prettier和eslint冲突问题解决：打开.eslintrc.js, 在rules规则下，添加代码
rules: {
'space-before-function-paren': 'off'
}
2).如果安装了多个代码格式化工具，那么在页面保存的时候，右键->使用...格式化文档，然后配置默认prettier格式化文件就行了
3).在打开项目->public->index.html或者.html的文件时，会在代码结构的末尾报错 'vue/comment-directive': 'off', 解决办法：在.eslintrc.js文件中添加规则：
rules: {
// 这条验证目前只知道可以去除pubilc里面的index.html的规则报错，具体意思不清楚
// 貌似关闭在模版中使用 eslint-disable-next-line 等注释
'vue/comment-directive': 'off',
}
4).在项目中，会遇到一个问题，子组件通过props获取到父组件的值，子组件通过v-modal修改，eslint报错的问题，解决办法：
rules: {
// eslint规则子组件不能修改props值得问题
'vue/no-mutating-props': 'off',
}
网友评论