一、简介
好的编码规范有助于我们写出清晰、明确、更容易维护的代码。
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 */
像上面这样，可以临时禁止一行。
欢迎关注微信公众号“楚游香”，获取更多文章和交流。
