使用ESLint检查JavaScript或TypeScript代码

淡淡的烟草味﹌ 2022-12-26 00:56 512阅读 0赞

## 一、简介 ##

`ESLint`是一个`JavaScript`语法检查器，它可以根据预置或自定义的编码规范，自动检查代码语法，并输出检查结果，同时也支持`TypeScript`代码。

## 二、安装 ##

> 先确保你电脑已经安装了 node 和 npm。

#### 2.1 安装ESLint ####

假设要检验的项目目录是 d:\\test，命令行进入目录，输入：

$ npm init
    
    $ npm install eslint --save-dev

上面命令中的 `--save-dev` 会把 eslint 安装到 package.json 文件的 devDependencies 属性中，意思是开发阶段会用到这个包，上线时不需要。

#### 2.2 设置 package.json 文件 ####

打开 d:\\test\\package.json 文件，修改 scripts 属性。

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

“lint:create”: “eslint --init” 是创建 .eslintrc.js 文件，编码规范就保存在这个文件；  
“lint”: “eslint assets/src” 是让 Lint 自动检查 `assets/src` 目录下所有的 .js/.ts 文件。

> 如果只想检查 TypeScript 代码，则改为 `"lint": "eslint assets/src --ext .ts"`

#### 2.3 创建 .eslintrc.js 文件。 ####

$ npm run lint:create；

按照问答提示，一步一步生成配置文件 .eslintrc.json（或 .eslintrc.js）。  
在 .eslintrc.json 中，“extends”: “eslint:recommended” 意思是使用 ESLint 官方默认的编码规范，也可以换成别的。如果不够，则增加自定义规则在 rules 参数。例如：

"rules": {
        "no-use-before-define": "error", // 禁止在变量定义之前使用它们
        "block-scoped-var": "error", // 强制把变量的使用限制在其定义的作用域范围内
        "no-shadow": "error" // 禁止变量声明与外层作用域的变量同名
        "@typescript-eslint/explicit-module-boundary-types": "off", // ts每个函数都要显式声明返回值
    }

规则设置的值含义如下：

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

`rules`支持的每项规则具体描述，参见 [ESLint官方文档][ESLint]

## 三、使用 ##

进入项目目录 d:\\test，输入：

$ npm run lint

上面命令的意思是对整个代码进行检查（参见 package.json 中 scripts 参数），并输出结果，之后自己就可以根据检查结果改善代码了。

## 四、VSCode集成ESLint ##

VSCode插件栏搜索 eslint 安装；  
开启eslint：在首选项的用户设置里搜索 formatOnSave，勾选上；  
用VSCode打开项目文件夹 d:\\test，之后如果代码中不符合规范，就自动会有标红的提示了。

> 注意：VSCode安装ESLint插件后，会先在当前被打开的工作目录下寻找ESLint包，其次查找全局的ESLint，如果都没找到，就会输出报错提示“Failed to load the ESLint library…”。例如，VSCode工作目录是 D:\\test，则ESLint安装目录也应该是 D:\\test。

## 五、Git集成ESLint ##

安装 husky 模块，可以在每次提交代码时自动运行ESLint检查，如果检查不通过，则无法提交代码，直到检查通过为止。

$ npm install eslint --save-dev

然后在 package.json 中配置

"husky": {
            "hooks": {
                "pre-commit": "npm run lint"
            }
        },

之后Git Commit代码时就会先自动运行ESLint了。

## 六、忽略ESLint检测 ##

有时候，某个文件或若干行代码无需ESLint检查。

/* eslint-disable */
    // 代码开始

像上面这样，可以使整个文件忽略。

/* eslint-disable */
    console.log('hello');
    /* eslint-enable */

像这样，可以临时禁止一行。