如何在TypeScript项目中使用ESLint

ESLint是一个十分优秀的JavaScript代码检查工具，我们可以用ESLint来检查TypeScript和JavaScript代码。这篇文章我将一步一步展示如何在项目中使用ESLint来检查代码。

介绍

ESLint和TSLint

ESLint是JavaScript代码检查工具，使用ESLint能让我们的代码遵循特定的样式格式。并且检查代码是否符合格式规范。

可能有人听过TSLint，它是为TypeScript为生的。但在2019年，TSLint的团队决定不再继续维护，推荐使用ESLint来替代。主要不维护的原因就是TSLint和ESLint功能一致，有这大量重复的代码。所以不搞了。

以后TypeScript的项目我们去使用ESLint就好了。

创建项目并安装依赖

创建Node.js项目

mkdir typescript-eslint-project
cd typescript-eslint-project
npm init -y

安装依赖

npm install typescript eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

创建ESLint配置文件.eslintrc

touch .eslintrc

写入下面的配置

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

创建ESLint忽略文件配置.eslintignore，来指定我们不需要进行检查的目录或文件

touch .eslintignore

这里我忽略掉node_modules文件夹，和TypeScript编译输出的文件夹dist。

node_modules
dist

在package.json中添加lint命令

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
  }
}

接下来，创建一个ts文件，根目录创建src文件夹，在src下创建index.ts文件

src/
	index.ts

写入一段测试代码

console.log('my typescript eslint project')

解析来，我们测试一下lint

npm run lint

终端内没有任何输出，说明代码正确，没有任何错误。

ESLint规则

ESLint中的规则有3种设置：off、warn和error。

"off"可以替换成0，代表关闭该规则

"warn"可以替换成1，代表打开规则，提示警告，但不会报错

"error"可以替换成2，代表打开规则，直接报错

在.eslintrc文件中，新增一个rules属性，为JSON对象类型。

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { } // 新增属性
}

那么要添加的规则，我们可以在ESLint的官网（eslint.org/docs/rules/…

下面我们添加一个no-console规则，意思就是如果代码中存在console代码，ESLint就会抛出错误。具体的规则使用和更细的配置可以看官网的详细解释（eslint.org/docs/rules/…

修改.eslintrc文件

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { 
    "no-console": 2 // 如果有console，会抛出错误
  }
}

运行ESLint

npm run lint

然后我们就会得到ESLint的一个报错

/typescript-eslint-project/src/index.ts
  1:1  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)	

然后我们把no-console关掉

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": { 
    "no-console": 0 // 使用0或者"off",都是同样的
  }
}

再次运行ESLint

npm run lint

一切变得正常

在真实项目中使用ESLint

如果您的团队对代码要求宽松，不想花费时间去每条的去看ESLint规则，可以使用eslint:recommended，ESLint推荐的配置。

如果团队对代码要求严格，也不想花费时间去每条的去看ESLint规则，可以使用大公司开源的ESLint规则，比如Airbnb、Facebook的规则，拿过来进行简单的修改即可。我团队目前在用的就是Airbnb的规则。

如果团队对代码要求严格，并且有时间，可以自己按照ESLint规则一条一条的制定属于自己团队的规则。

在现实项目中，我们一般会使用Husky和ESLint来搭配使用，在团队成员用Git提交代码的时候，进行lint检查，防止错误的代码被提交到版本库。

Husky和ESLint配置可参看我之前的一篇文章：

使用ESLint插件

当官方所提供的规则无法满足我们的需求时，我们可以寻找一些三方插件，或者自行编写插件。

下面装一个比较有意思的插件no-loops，它的功能就是禁止在代码中使用for, for-in, while, do-while, for-of循环，可以使用map、forEach等方法替代。

这里会有关于ESLint所有的插件和配置列表： awesome-eslint

下面我们来安装它

npm install eslint-plugin-no-loops -D

然后修改.eslintrc文件，在plugins中引入no-loops插件，在rules中添加no-loops/no-loops，no-loops的新规则。

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "no-loops" // 增加no-loops插件
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "no-console": 0,
    "no-loops/no-loops": 2 // 增加no-loops规则
  }
}

然后我们在src/index.ts增加一个for循环代码

console.log('my typescript eslint project')

for (let i = 0; i < 10; i++) {
  console.log(i)
}

接着再运行lint

npm run lint

然后就会得到下面的错误

/typescript-eslint-project/src/index.ts
  3:1  error  loops are not allowed  no-loops/no-loops

引入ESLint第三方的配置

因为ESLint有成百上千条规则，假设你不想一条一条去配置，我们可以引入别人配置好的配置。下面我们来引入 Shopify's的配置。

首先安装它

npm install eslint-plugin-shopify -D

接着修改.eslintrc文件

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "extends": [
    "plugin:shopify/esnext"
  ],
  "rules": {
    "no-console": 0
  }
}

我们可以引入多个规则，写入到extends的数组中

我们在运行lint

npm run lint

可以看到下面的错误

/typescript-eslint-project/src/index.ts
  1:1   error  'console' is not defined                       no-undef
  1:44  error  Missing semicolon                              babel/semi
  1:44  error  Missing semicolon                              semi
  4:3   error  'console' is not defined                       no-undef
  4:17  error  Missing semicolon                              babel/semi
  4:17  error  Missing semicolon                              semi
  5:2   error  Newline required at end of file but not found  eol-last

✖ 7 problems (7 errors, 0 warnings)
  5 errors and 0 warnings potentially fixable with the `--fix` option.

使用ESLint自动修复代码错误

从上面的错误可以看到，它告诉我们共有7个问题，有5个问题可以通过--fix自动修复。

✖ 7 problems (7 errors, 0 warnings) 5 errors and 0 warnings potentially fixable with the --fix option.

我们再修改package.json增加lint:fix命令

{
  "scripts": {
    ...
    "lint": "eslint . --ext .ts",
    "lint:fix": "eslint . --ext .ts --fix"
  },
}

然后运行lint:fix

npm run lint:fix

可以看到错误变少了5个，因为它被ESLint自动修复掉了

/typescript-eslint-project/src/index.ts
  1:1  error  'console' is not defined  no-undef
  4:3  error  'console' is not defined  no-undef

✖ 2 problems (2 errors, 0 warnings)

ESLint帮我们修改了代码，在代码的结尾加了分号

console.log('my typescript eslint project');

for (let i = 0; i < 10; i++) {
  console.log(i);
}

项目源码

github.com/cmdfas/type…

唠叨

如果本文对你有点作用，您的点赞、评论、关注是对我最大的鼓励 O(∩_∩)O👍👍👍

我是傲夫靠斯，关注我，每天进步一点点，早日实现财务自由。