eslint代码检查工具

what？什么是eslint？

Eslint是一个 ECMAScript/JavaScript代码检查工具，使用node.js编写。可以使用eslint默认规则，也可以创建自己的检测规则。

why？为什么要进行代码质量检查？

1. 避免低级bug：一些常见的代码问题，如果在编译或运行前不能及时发现，代码中的语法问题会直接导致编译或运行失败，影响开发效率和代码质量。
2. 统一代码习惯：每个人都有一些代码规范或习惯，为了便于后期的维护和阅读。
3. 保证线上代码的质量：在版本管理中，我们需要在提交或发布之前自动执行一些代码检查工作，确保我们的代码符合最终的版本要求。

how？怎样使用eslint？

怎么安装

1、在项目中使用

在项目中去使用：

//npm init 指令会在项目根目录下生成 package.json文件
npm init

//--save-dev 会把eslint安装到 package.json 文件中的 DevDependencies 属性中，意思是开发阶段用到这个包，上线的时候就不需要这个包了
npm install eslint --save-dev

• 使用 npm run （常用）

新增 package.json 脚本：

"scripts":{
    
    
    "lint": "eslint src",
    "lint:create":"eslint --init"
}

然后使用 npm命令：

npm run lint

• 直接使用 npx命令：

npx eslint --init
//或者
./node_modules/.bin/eslint --init

2、在全局使用

npm install -g eslint
eslint --init   //设置一个配置文件
eslint yourfile.js  //可以在任何文件或目录运行eslint

全局安装可以直接执行指令，但对于项目的维护性来说不强。

配置文件

.eslintrc，.eslintrc.js，eslintrc.yml

.eslintrc.js

废弃用法：.eslintrc，

eslint使用配置的顺序：源代码注释 > .eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

.eslintrc.yml

module.exports = {
    
    
    "env": {
    
    
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
    
    
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "rules": {
    
    
    }
}

该文件导出一个对象，对象包括属性 env、extends、parserOptions、plugins、rules五个属性：

• env：指定脚本的运行环境，每种环境都有一种特定的预定义全局变量，针对不同的环境会做不同的语法检查。
• extends：代码规则的继承，如果是一个数组，递归的依次合并。
• parserOptions：用于指定想要支持的JavaScript语言选项
  • ecmaVersion：指定想使用的ECMAScript版本。
  • sourceType：设置为“script”（默认）或“module”（如果代码是ECMAScript模块）。
• rules：开启某些规则，也可以设置规则的等级。
• Plugins：插件。

.eslintignore

在项目根目录创建，告诉eslint忽略某些文件或目录。相当于.gitgnore都是纯文本文件。

例如：

node_modules**/.jsbuild

Rules配置规则

• “off” 或 0 ,关闭规则
• “warn”或 1 ，开启规则，使用警告级别的错误：warn（不会导致程序退出）
• “error”或 2 ，开启规则，使用错误级别的错误：error（当被触发的时候，程序会退出）

例子：

{
    
    
    "rules":{
    
    
        "semi":{
    
    2,"never"},   //不能在代码末尾使用分号
        "quotes":{
    
    2,"single"}  //使用单引号
    }
}

Extends

使用别人提供的包，如google

{
    
    
    "extends":"google",
}

通过使用上述说明，用户可以轻松使用google JavaScript样式指南中的编码约定，而无需从头开始编写设置。

Plugins插件

Eslint提供的默认规则涵盖了基本规则，但是如果希望的规则不在默认规则中，那么可以开发自己的独立规则。为了让第三方开发自己的规则，eslint允许使用插件。在npm中搜索eslint-plugin-*，就可以找到第三方提供的大量插件。

ESlint是一个完全插件化的插件，可以将各各不同的功能实现交给ESlint对应的插件去处理，比如React的JSX识别，Vue的template识别。

如果说eslint本身是对JS的语法分析和风格要求，那么eslint的插件就是为了解析其它的文件类型（JSX文件，VueTemplate文件）。

global字段配置

其实就是一个no-undef的语法解析的排除选项配置，你可以选择直接在rules中关闭

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量

globals 配置属性设置为一个对象，该对象包含以你希望使用的每个全局变量。对于每个全局变量键，将对应的值设置为 “writable” 以允许重写变量，或 “readonly” 不允许重写变量

{
    
    
    "globals": {
    
    
        "var1": "writable",
        "var2": "readonly"
    }
}

glob模式

如果同一个目录下的文件需要有不同的配置。因此，你可以在配置中使用 overrides 键，它只适用于匹配特定的 glob 模式的文件，使用你在命令行上传递的格式 (e.g., app/**/*.test.js)

{
    
    
    "overrides": [
    {
    
    
        //*表示所有的 /**/*.js表示任意层级的目录下
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
    
    
        "quotes": ["error", "single"]
      }
    }
  ]
}

常用eslint配置

eslint的规范：https://github/com/standard/eslint-config-standard

1. comma逗号
2. quotes引号
3. semi分号
4. 空行
5. 驼峰命名
6. 日志输出console
7. 强等判断
8. 冗余的变量
9. 空格
   1. 关键字后的空格
   2. 函数名后的空格
   3. 缩进