一、介绍
ESLint是一个主流的JavaScript Lint工具，用于监测JavaScript代码质量，可以帮助开发者提升编码能力。它可以很容易地统一开发者的编程风格，同时也可以通过配置文件来自定义规则。在前端开发中，ESLint可以帮助我们检查代码中的潜在问题，提高代码的可读性和可维护性。
二、作用
ESlint作为代码检查工具，其作用主要有以下几点：
- 代码规范检查：ESLint可以根据预设的规范对代码进行静态分析，检查代码中的潜在问题，如未使用的变量、未定义的变量、不符合规范的代码风格等。
- 代码质量评估：ESLint可以根据预设的规则对代码进行质量评估，如代码复杂度、代码重复度等，帮助开发者提高代码质量。
- 提供自定义规则：ESLint允许开发者根据自己的需求编写自定义规则，以适应特定的项目需求和编码风格。
- 语法检查：ESLint可以检查代码中的语法错误，帮助开发者避免常见的语法错误。
- 代码风格统一：ESLint可以根据预设的代码风格规则，对代码进行风格统一，确保整个项目的代码风格一致。
- 代码自动修复：ESLint可以根据预设的规则自动修复代码中的一些问题，如自动添加缺失的分号、自动调整缩进等。
三、安装
安装依赖
npm install -g eslint
安装完成 ESLint 插件后，我们就会发现 鼠标指向代码时就能看到了警告与错误提示 ，那么我们怎么做到保存时自动修正代码呢，我们需要 把下面的配置项复制到 settings.json 中
// 复制到 settings.json 中"editor.formatOnType": true, // 控制编辑器在键入一行后是否自动格式化该行"editor.formatOnSave": true, // 在保存时格式化文档"eslint.codeAction.showDocumentation": {"enable": true},"editor.codeActionsOnSave": {"source.fixAll.eslint": true,},"eslint.validate": [ // 检测语言"javascript","javascriptreact","html","vue","typescript","typescriptreact","markdown"],
四、配置
要配置ESLint 主要有一下两种方法：
-
在注释中直接配置
-
在配置文件中配置， JavaScript、JSON 或者 YAML 格式的.eslintrc.* 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们，再者，你可以在命令行运行时指定一个任意的配置文件。
1、在.eslintrc的文件进行配置:
- env: 指定代码的运行环境
- globals：额外的全局变量
- parserOptions: 指定 JavaScript 相关的选项。ecmaVersion 指定用哪个ECMAScript 的版本，默认是 3 和 5。
- rules: 具体检查的规则，不设置则不会检查
2、配置规则
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
- "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
{"env": {"browser": true,"commonjs": true,"es6": true},"parserOptions": {"ecmaVersion": 6},// ESLint 规则配置"rules": {"indent": ["error", 2],"no-mixed-spaces-and-tabs": "error""camelcase": "error","eqeqeq": "warn","curly": "error","no-undef": "error","no-unused-vars": "warn","max-params": "warn",// 0是忽略，1是警告，2是报错"quotes": 2, // 非双引号报错"semi": 1, // 无分号就警告"no-console": 1, // 有console.log就警告"space-before-function-paren": 0 // 函数前空格忽略}
}
3、优先级
3.1、行内配置
- /eslint-disable/ 和 /eslint-enable/
- /global/
- /eslint/
- /eslint-env/
3.2、命令行选项（或 CLIEngine 等价物）：
- --global
- --rule
- --env
- -c, --config
3.3、项目级配置：
如果同一个目录下有多个配置，ESLint 只会使用一个（并不会进行合并配置）。优先级顺序如下：
- .eslintrc.js
- .eslintrc.yaml
- .eslintrc.yml
- .eslintrc.json
- .eslintrc
- package.json
对于临时忽略，可以使用注释方式；对于永久忽略，可以在配置文件中禁用规则。
4、Inline 注释
在代码行前添加 // eslint-disable-line 或 // eslint-disable-next-line 注释:
alert('foo'); // eslint-disable-line no-alert
alert('foo'); // eslint-disable-next-line no-alert
alert('bar');
这将忽略那一行的规则检查。
5、块注释
/* eslint-disable no-alert */
alert('foo');
alert('bar');
/* eslint-enable no-alert */
这会在块的开始和结束处启用和禁用指定的规则。
6、在文件顶部添加规则注释
在文件顶部添加:
/* eslint-disable no-alert */
这将忽略整个文件中指定的规则。
7、在 .eslintignore 文件中添加忽略规则
在 .eslintignore 文件中添加:
example.js
这将忽略 example.js 文件中的所有规则检查。
8、在 package.json 中添加忽略规则
在 package.json 中添加:
"eslintIgnore": ["example.js"
]
这也会忽略 example.js 中的所有规则检查。
9、在规则中添加 “off” 或 0 选项
在 .eslintrc.js 配置文件中将指定规则设置为 “off” 或 0:
"rules": {"no-alert": "off"
}
这将关闭 no-alert 规则的检查。
五、示例
module.exports = {//此项是用来告诉eslint找当前配置文件不能往父级查找root: true,//指定eslint继承的模板extends: ["plugin:vue/essential", "@vue/standard"],//此项指定环境的全局变量，下面的配置指定为浏览器环境env: {browser: true},// 此项是用来提供插件的，插件名称省略了eslint-plugin-，下面这个配置是用来规范html的plugins: ["vue"],//指定javaScript语言类型和风格parserOptions: {parser: "babel-eslint"},//规则https://www.wenjiangs.com/docs/eslint，vue规则：https://eslint.vuejs.org/rules/// 主要有如下的设置规则，可以设置字符串也可以设置数字，两者效果一致// "off" -> 0 关闭规则// "warn" -> 1 开启警告规则// "error" -> 2 开启错误规则rules: {// 使用 === 替代 == allow-null允许null和undefined== [2, "allow-null"]eqeqeq: 0,// 双峰驼命名格式camelcase: 0,//要求或者禁止Yoda条件yoda: 2,// 行尾不使用分号semi: 0,//强制一致地使用反引号、双引号或单引号。quotes: 2,//强制函数中的变量在一起声明或分开声明"one-var": 2,// 禁用 console"no-console": process.env.NODE_ENV === "production" ? "error" : "off",// 强制 generator 函数中 * 号周围使用一致的空格"generator-star-spacing": "off",// 禁用 debugger"no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",// 禁止对象字面量中出现重复的 key"no-dupe-keys": 2,// 函数参数不能重复"no-dupe-args": 2,// 禁止重复的函数声明"no-func-assign": 2,// 禁止重复的 case 标签"no-duplicate-case": 2,// 禁用未声明的变量"no-undef": 1,//禁止出现多个空格"no-multi-spaces": 2,// 不允许标签与变量同名"no-label-var": 2,//禁止tab"no-tabs": 1,// 禁止 var 声明 与外层作用域的变量同名"no-shadow": 0,// 禁止 if 语句中有 return 之后有 else"no-else-return": 0,// 禁止出现空函数.如果一个函数包含了一条注释，它将不会被认为有问题。"no-empty-function": 1,// 禁止出现未使用过的变量"no-unused-vars": 1,//禁止在返回语句中赋值"no-return-assign": 0,// 禁用行尾空格"no-trailing-spaces": 2,// 禁止修改 const 声明的变量"no-const-assign": 2,// 禁止类成员中出现重复的名称"no-dupe-class-members": 2,//禁止使用alert confirm promp"no-alert": process.env.NODE_ENV === "production" ? "error" : "off",//禁止多余的冒号"no-extra-semi": 2,//禁止在条件中使用常量表达式"no-constant-condition": 2,//空行最多不能超过2行"no-multiple-empty-lines": [1, { max: 2 }],//禁止无用的表达式"no-unused-expressions": 1,//禁用不必要的嵌套块"no-lone-blocks": 2,//不允许使用逗号操作符"no-sequences": 2,//禁止不规则的空白"no-irregular-whitespace": 2,//函数括号前的空格"space-before-function-paren": 0,//处理回调错误"handle-callback-err": 1,//首选承诺拒绝错误"prefer-promise-reject-errors": 0,//要求或禁止在注释前有空白 (space 或 tab)"spaced-comment": 1,//强制关键字周围空格的一致性"keyword-spacing": 1,//强制在花括号中使用一致的空格"object-curly-spacing": 1,// 控制逗号前后的空格"comma-spacing": [2,{before: false,after: true}],// 要求或禁止 var 声明语句后有一行空行"newline-after-var": 0,//强制使用一致的缩进indent: 0,// html 内 缩进"vue/html-indent": 0,// 插值两端必须留一个空格"vue/mustache-interpolation-spacing": 0,//强制每行的最大属性数"vue/max-attributes-per-line": 0,//vue/属性顺序"vue/attributes-order": 0,// 强制要求在对象字面量的属性中键和值之间使用一致的间距 "var obj = { "foo": 42 };""key-spacing": 0,// 禁止末尾逗号"comma-dangle": 0,// 强制在块之前使用一致的空格 "function a() {}""space-before-blocks": 0,// 要求操作符周围有空格 "a ? b : c""space-infix-ops": 2,// "() => {};" // 强制箭头函数前后使用一致的空格"arrow-spacing": 2,//插值中强制统一间距//强制组件中的属性顺序"vue/order-in-components": 0,//不允许字段名称重复"vue/no-dupe-keys": 2,//多次引用同个包"import/no-duplicates": 2,//执行有效v-for指令"vue/valid-v-for": 2,//V-bind:key使用v-for指令要求"vue/require-v-for-key": 2,//不允许解析错误<template>"vue/no-parsing-error": [2, { "x-invalid-end-tag": false }],//强制执行自闭式"vue/html-self-closing": "off",//不允许计算属性中的副作用"vue/no-side-effects-in-computed-properties": 0,//禁止 v-for 指令或范围属性的未使用变量定义"vue/no-unused-vars": 1,//执行有效v-model指令"vue/valid-v-model": 2,//强制执行有效的模板根"vue/valid-template-root": 2}
};
光纤模式计算器)
