使用方法
pnpm i eslint -D 安装 eslint
pnpm eslint --init 初始化配置文件，会创建 .eslintrc.js 文件，它是对 eslint 进行配置的
执行上面命令可能会显示需要下载 @eslint/create-config@0.4.2 输入 y 进行下载
之后就可以根据项目需求做一些具体的配置
rules对象
rules是以键值对的格式来约定规则：
键名是规则名（可在报错信息和eslint官网查看）
值是这条规则的具体说明， 最常见的有
"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)
安装eslint插件, 让vscode实时告诉咱们哪里错了
安装eslint插件
找到vscode配置文件，将以下代码复制进去,就能ctrl+s自动保存
{
"eslint.enable": true,
"eslint.run": "onType", // onType是输入时运行eslint检验。onSave是保存时检验
"eslint.options": {
"extensions": [
".js",
".vue",
".jsx",
".tsx"
]
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}eslint注释
单行注释不需要校验
const str1 = "aaa" // eslint-disable-line 会忽略这一行
const str1 = "aaa" // eslint-disable-lineno-template-curly-in-string 会根据规则忽略某个要校验的整个文件注释,eslint-disable放在文件的最顶部就会跳过eslint检测
/* eslint-disable */注释代码块
/* eslint-disable */alert('foo');/* eslint-enable */eslint报错改正错误的四种方式
手动修正
命令修正：pnpm run lint
修改规则：让代码符合修改之后的规则
配合 vscode 中的 eslint 插件
vue中使用eslint
安装依赖 eslint，之后执行 pnpm eslint --init
让 eslint 支持 vue 单文件组件 由于 ESLint 默认只支持 js 文件的脚本检测，如果我们需要支持类 html 文件（如 vue）的内联脚本检测，还需要安装 eslint-plugin-html 插件
如果我们使用全局安装了 ESLint，eslint-plugin-html 插件也必须进行全局安装 pnpm install -g eslint-plugin-html
package.json 文件的 script 中配置命令（也可在vscode中配置保存时自动修复）
// --fix会自动修复语法错误，--ext就是指定检测的文件，src/ 意思是检测哪些文件夹下面的文件"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"eslint和webpack配合使用
pnpm i eslint-loader -D
在webpack配置文件中写入校验js的规则
rules: [{test: /\.js$/,exclude: /node_modules/,use: 'eslint-loader',
enforce: 'pre'}]想要webpack拥有eslint能力需要安装eslint pnpm install --save-dev eslint
配置eslint规则，生成.eslintrc.js文件，配置可参考配置集合
package.json文件的script中配置命令修复命令（也可在vscode中配置保存时会自动修复）
.eslintignore 忽略文件
创建一个.eslintignore文件,写入要跳过eslint检测的文件
/build//config//dist/.eslintrc.js配置集合
vue2中eslint配置
如果是vue脚手架搭建的项目，创建.eslintrc.js文件，安装依赖npm i eslint eslint-config-airbnb-base eslint-import-resolver-alias eslint-plugin-import eslint-plugin-vue --save-dev
将如下配置复制进去
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/essential',
'airbnb-base'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
'import/no-unresolved': 'off', // 解析别名'import/no-absolute-path': 'off', // 使用绝对路径（no-absolute-path）导入模块'import/no-extraneous-dependencies': 'error', // 禁止使用无关软件包'vue/attribute-hyphenation': 'warn', // 强制在Vue模板的自定义组件上使用 连字符 列如：v-on 属性名称。'vue/component-definition-name-casing': 'error', // 为组件定义名称大小写定义样式，以保持一致性'vue/attributes-order': 'off', // 关闭强制属性的顺序'max-len': ['warn', { code: 160, tabWidth: 2 }], // 限制一行的最大长度'import/extensions': 'off', // 关闭未使用扩展名报错'comma-dangle': [2, 'never'], // 是否允许对象中出现结尾逗号'no-console': process.env.NODE_ENV === 'production' ? 1 : 'off', // 不允许出现console语句'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', // 不允许出现debugger语句'no-dupe-args': 'error', // 函数定义的时候不允许出现重复的参数'no-dupe-keys': 'error', // 对象中不允许出现重复的键'no-duplicate-case': 'error', // switch语句中不允许出现重复的case标签'no-empty': 'error', // 不允许出现空的代码块'no-extra-boolean-cast': 'off', // 不允许出现不必要的布尔值转换'no-extra-parens': 'off', // 不允许出现不必要的圆括号'no-extra-semi': 'error', // 不允许出现不必要的分号'no-func-assign': 'error', // 不允许重新分配函数声明'no-irregular-whitespace': 'error', // 不允许出现不规则的空格'no-regex-spaces': 'error', // 正则表达式中不允许出现多个连续空格'quote-props': 'error', // 对象中的属性名是否需要用引号引起来'no-sparse-arrays': 'off', // 数组中不允许出现空位置'no-unreachable': 'error', // 在return，throw，continue，break语句后不允许出现不可能到达的语句'use-isnan': 'error', // 要求检查NaN的时候使用isNaN()'block-scoped-var': 'error', // 将变量声明放在合适的代码块里'default-case': 'off', // 在switch语句中需要有default语句
eqeqeq: 'off', // 比较的时候使用严格等于'no-alert': 1, // 不允许使用alert，confirm，prompt语句'no-caller': 'error', // 不允许使用arguments.callee和arguments.caller属性'guard-for-in': 'off', // 监视for in循环，防止出现不可预料的情况'no-div-regex': 'error', // 不能使用看起来像除法的正则表达式'no-else-return': 'off', // 如果if语句有return，else里的return不用放在else里'no-eq-null': 'off', // 不允许对null用==或者!='no-eval': 'error', // 不允许使用eval()'no-floating-decimal': 'error', // 不允许浮点数缺失数字'no-lone-blocks': 'error', // 不允许不必要的嵌套代码块'no-multi-str': 'off', // 不允许用\来让字符串换行'no-new': 'error', // 不允许new一个实例后不赋值或者不比较'no-new-func': 'error', // 不允许使用new Function'no-param-reassign': 'off', // 不允许重新分配函数参数'no-redeclare': 'error', // 不允许变量重复声明'no-return-assign': 'error', // 不允许在return语句中使用分配语句'no-script-url': 'error', // 不允许使用javascript:void(0)'no-self-compare': 'error', // 不允许自己和自己比较'no-sequences': 'error', // 不允许使用逗号表达式'no-throw-literal': 'off', // 不允许抛出字面量错误 throw "error"'no-unused-expressions': 'error', // 不允许无用的表达式'wrap-iife': 'off', // 立即执行表达式的括号风格'no-label-var': 'error', // 不允许标签和变量同名'no-shadow': 'error', // 外部作用域中的变量不能与它所包含的作用域中的变量或参数同名'no-shadow-restricted-names': 'error', // js关键字和保留字不能作为函数名或者变量名'no-undef': 'error', // 不允许未声明的变量'no-undef-init': 'off', // 不允许初始化变量时给变量赋值undefined'no-undefined': 'error', // 不允许把undefined当做标识符使用'no-unused-vars': ['error',
{ vars: 'all', args: 'after-used' }
], // 不允许有声明后未使用的变量或者参数'no-use-before-define': ['error', 'nofunc'
], // 不允许在未定义之前就使用变量
indent: 'error', // 强制一致的缩进风格'brace-style': ['error', '1tbs',
{ allowSingleLine: false }
], // 大括号风格
camelcase: ['error',
{ properties: 'never' }
], // 强制驼峰命名规则'comma-style': ['error', 'last'], // 逗号风格'consistent-this': 'off', // 当获取当前环境的this是用一样的风格'eol-last': 'error', // 文件以换行符结束'func-names': 'off', // 函数表达式必须有名字'func-style': 'off', // 函数风格，规定只能使用函数声明或者函数表达式'key-spacing': ['error',
{ beforeColon: false, afterColon: true }
], // 对象字面量中冒号的前后空格'max-nested-callbacks': 'off', // 回调嵌套深度'new-cap': ['error',
{ newIsCap: true, capIsNew: false }
], // 构造函数名字首字母要大写'new-parens': 'error', // new时构造函数必须有小括号'newline-after-var': 'off', // 变量声明后必须空一行'no-array-constructor': 'error', // 不允许使用数组构造器'no-inline-comments': 'off', // 不允许行内注释'no-lonely-if': 'off', // 不允许else语句内只有if语句'no-mixed-spaces-and-tabs': ['error', 'smart-tabs'
], // 不允许混用tab和空格'no-multiple-empty-lines': ['error',
{ max: 2 }
], // 空行最多不能超过两行'fun-call-spacing': 'off', // 函数调用时，函数名与()之间不能有空格'no-trailing-spaces': 'error', // 一行最后不允许有空格'no-underscore-dangle': 'error', // 不允许标识符以下划线开头'padded-blocks': ['error', 'never'
], // 块内行首行尾是否空行
quotes: ['warn', 'single', 'avoid-escape'
], // 引号风格
semi: ['error', 'never'
], // 禁止使用分号'sort-vars': 'off', // 变量声明时排序'space-before-blocks': ['error', 'always'
], // 块前的空格'space-before-function-paren': ['error',
{ anonymous: 'always', named: 'never' }
], // 函数定义时括号前的空格'space-infix-ops': ['error',
{ int32Hint: true }
], // 操作符周围的空格'keyword-spacing': 'error', // 关键字前后的空格'space-unary-ops': ['error',
{ words: true, nonwords: false }
], // 一元运算符前后不要加空格'wrap-regex': 'error', // 正则表达式字面量用括号括起来'no-var': 'off', // 使用let和const代替var'no-plusplus': 'off', // 不允许使用++ --运算符'accessor-pairs': 'error' // 强制 getter 和 setter 在对象中成对出现
}
}可能遇到的问题
ctrl+s保存不自动格式化 https://img-blog.csdnimg.cn/img_convert/129113edc210a3dadbe371ab5ae3fb91.png
打开一个代码文件, 右下角有个ESLint, 如果是图示这样, 点击一下然后弹出来的对话框选择AnyWhere 在任意处生效(启动vscode中的eslint)
变成v就代表启动着呢
自动缩进 如果安装了Beautify插件，可以试着把Beautify插件卸载 ，eslint也能美化代码
如果你的vscode中用其它扩展 启用了自动格式化功能，则有可能与eslint的规则冲突！
关闭自动格式化功能：设置里找到save，Format On Save去掉勾选
https://img-blog.csdnimg.cn/img_convert/82db2e571c9ff0036cb4efac633d6a0f.png
如果上面的不行，就修改vscode的配置。找到文件>设置，搜索tabsize，找到Detect Indentation勾选上
保存时，单引号变双引号 原因是vetur插件和eslint冲突，修改eslint插件
{
"eslint.run": "onType",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"vetur.validation.template": false, // 把 vetur 扩展的 template 格式化去掉
"editor.formatOnSave": false, // 去掉 vscode 自带的自动保存 ，vscode 默认也是 false的，如果要用 eslint 格式化，默认的格式化就不能开启
"eslint.enable": true, // eslint 格式化的配置
"eslint.autoFixOnSave": true, // eslint保存时候自动解决语法错误
"eslint.options": { // eslint选项-格式化js和vue文件
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
{
"language": "vue",
"autoFix": true,
},
"html",
"vue"
],
}
6029
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
