使用ESLint检查JavaScript或TypeScript代码

一、简介

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官方文档

三、使用

进入项目目录 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 husky --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 */

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

欢迎关注微信公众号“楚游香”，获取更多文章和交流。