关于eslint

ESLint 是什么

ESLint 是一个用来识别 ECMAScript/JavaScript 并且按照规则给出报告的代码检测工具，是一个用来检查代码的工具。

代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。

ESLint 这样的工具可以让程序员在编码的过程中发现问题，而不是在执行的过程中发现问题。

ESLint 的校验

第一种：会在代码保存的时候校验，但是只会在控制台进行提示。是vue-cli 自带的

第二种：使用vscode 插件，可以在编写代码时校验，提示错误，并自动保存修复错误。需要通过vscode进行配置

安装Eslint插件

在vscode插件中 查找 Eslint插件 安装并启用

配置 settins.json文件

打开 vscode 配置文件 settins.json，写入 json 配置

禁用其他代码格式插件

此时，eslint 的vscode 配置好了，同时也要注意，如果你的 vscode 安装了自动辅助代码格式的插件，请在项目的工作区禁用。

取消 Format on Save

另外，需要将 Format on Save 这个选项的勾选状态去掉，否则会影响 eslint 的自动保存

ESLint 的特点

• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则
• 内置规则和自定义规则共用一套规则 API。
• 内置的格式化方法和自定义的格式化方法共用一套格式化 API。
• 额外的规则和格式化方法能够在运行时指定。
• 规则和对应的格式化方法并不强制捆绑使用。
• 每条规则都是各自独立的，可以根据项目情况选择开启或关闭。
• 用户可以将结果设置成警告或者错误。
• ESLint 并不推荐任何编码风格，规则是自由的。
• 所有内置规则都是泛化的。

ESLint 支持几种格式的配置文件：

• JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
• JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
• (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
• package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。 如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：
  • .eslintrc.js
  • .eslintrc.yaml
  • .eslintrc.yml
  • .eslintrc.json
  • .eslintrc
  • package.json

.eslintrc.js配置文件

代码语言：javascript复制

// .eslintrc.js
module.exports = {
    // 指定解析器
    'parse': '',
    // 指定解析器选项
    'parserOptions': {
        // 默认设置为3，5（默认），可使用 6、7、8 或 9 来指定想要使用的 ECMAScript 版本。
        //也可使用年份命名的版本号指定为 2015（同 6），2016（同7），或 2017（同8）或 2018（同9）
        "ecmaVersion": 6,
        // 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
        "sourceType": "module",
        // 对象，表示想使用的额外的语言特性
        "ecmaFeatures": {
            "jsx": true  // 启用 JSX
            "globalReturn": true  // 允许在全局作用域下使用 return 语句
            "impliedStrict": true  // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)
        }
    },
    // 指定脚本的运行环境
    'env': {},
    // 别人可以直接使用你配置好的ESLint, ESLint 一旦发现配置文件中有 "root": true，
    // 它就会停止在父级目录中寻找。
    'root': true,
    // 脚本在执行期间访问的额外的全局变量
    'globals': {},
    // 使用 "extends": "eslint:recommended" 可启用推荐的规则
    "extends": "eslint:recommended",
    // 启用的规则及其各自的错误级别
    'rules': {
        "semi": 2
    }
};

ESLint规则

Possible Errors （JavaScript 代码中可能的错误或逻辑错误）

规则	解释
no-console	禁用 console
no-await-in-loop	禁止在循环中出现 await
no-cond-assign	禁止条件表达式中出现赋值操作符
no-constant-condition	禁止在条件中使用常量表达式
no-debugger	禁用 debugger
no-dupe-args	禁止 function 定义中出现重名参数
no-dupe-keys	禁止对象字面量中出现重复的 key
no-duplicate-case	禁止出现重复的 case 标签
no-empty	禁止出现空语句块
no-empty-character-class	禁止在正则表达式中使用空字符集
no-extra-boolean-cast	禁止不必要的布尔转换
no-extra-parens	禁止不必要的括号
no-extra-semi	禁止不必要的分号
no-func-assign	禁止对 function 声明重新赋值
no-inner-declarations	禁止在嵌套的块中出现变量声明或 function 声明
no-irregular-whitespace	禁止在字符串和注释之外不规则的空白
no-obj-calls	禁止把全局对象作为函数调用
no-regex-spaces	禁止正则表达式字面量中出现多个空格
no-unreachable	禁止在return、throw、continue 和 break 语句之后出现不可达代码
valid-typeof	强制 typeof 表达式与有效的字符串进行比较

Stylistic Issues (关于风格指南)

规则 解释 array-bracket-newline 在数组开括号后和闭括号前强制换行 array-bracket-spacing 强制数组方括号中使用一致的空格 array-element-newline 强制数组元素间出现换行 block-spacing 禁止或强制在代码块中开括号前和闭括号后有空格 brace-style 强制在代码块中使用一致的大括号风格 camelcase 强制使用骆驼拼写法命名约定 comma-dangle 要求或禁止末尾逗号 comma-style 强制使用一致的逗号风格 computed-property-spacing 强制在计算的属性的方括号中使用一致的空格 eol-last 要求或禁止文件末尾存在空行 func-call-spacing 要求或禁止在函数标识符和其调用之间有空格 function-paren-newline 强制在函数括号内使用一致的换行 implicit-arrow-linebreak 强制隐式返回的箭头函数体的位置 indent 强制使用一致的缩进 jsx-quotes 强制在 JSX 属性中一致地使用双引号或单引号 multiline-ternary 要求或禁止在三元操作数中间换行 new-cap 要求构造函数首字母大写 new-parens 要求调用无参构造函数时有圆括号 eqeqeq 要求使用 === 和 !== no-trailing-spaces 禁用行尾空格

ECMAScript 6

规则 解释 no-const-assign 禁止修改 const 声明的变量 no-dupe-class-members 禁止类成员中出现重复的名称 no-duplicate-imports 禁止重复模块导入 no-restricted-imports 禁止使用指定的 import 加载的模块 no-this-before-super 禁止在构造函数中，在调用 super() 之前使用 this 或 super no-useless-computed-key 禁止在对象中使用不必要的计算属性 no-useless-constructor 禁用不必要的构造函数 no-useless-ren 要求使用 let 或 const 而不是 var object-shorthand 要求或禁止对象字面量中方法和属性使用简写语法 prefer-arrow-callback 要求回调函数使用箭头函数 prefer-const 要求使用 const 声明那些声明后不再被修改的变量

参考自：https://blog.csdn.net/weixin_34246551/article/details/91422835

eslint

0 人点赞