跳至正文

使用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 */

像上面这样,可以临时禁止一行。

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

标签:

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注