阅读 106

如何在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配置可参看我之前的一篇文章:

juejin.cn/post/700169…

使用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👍👍👍

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

文章分类
前端
文章标签