如何在 TypeScript 中使用 ESLint

ESLint 是一种 JavaScript linter，您可以使用它来对 TypeScript 或 JavaScript 代码进行 lint。在这篇文章中，我们将介绍如何在您的项目中设置 linting。

ESLint 和 TSLint

ESLint是一个JavaScript棉短绒，使您可以强制执行一组风格，格式和编码标准的代码库。它会查看您的代码，并在您没有​​遵循您制定的标准时告诉您。

您可能还听说过TSLint，它是 TypeScript 的等价物。2019 年，TSLint 背后的团队决定不再支持它。原因主要是因为ESLint 存在，并且在具有相同预期目的的项目之间存在大量重复代码。

话虽如此，那里有一些非常棒的 TSLint 包，如果你想使用，你可以——但要明白它们不再受支持。

因此，在 2020 年及以后，我们将继续使用 ESLint 来满足我们所有的 TypeScript（和 JavaScript）linting 需求！

先决条件

以下是您需要遵循的内容：

• 安装了代码编辑器（psst-VS Code 是理想的）
• 一个现有的代码库（如果你需要设置，你可以先看“如何设置一个 TypeScript + Node.js 项目，然后再回到这篇文章”）

安装和设置

运行以下命令以在您的 TypeScript 项目中设置 ESLint。

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

创建一个.eslintrc文件。

touch .eslintrc

在其中，使用以下启动配置。

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

忽略我们不想 lint 的文件

创建一个.eslintignore以防止 ESLint 对我们不想要的东西进行 linting。

touch .eslintignore

然后添加我们想要忽略的东西。在以下代码示例中，我们将忽略dist/包含已编译 TypeScript 代码的文件夹。如果您要将 TypeScript 代码编译到不同的文件夹，请确保使用它而不是dist. 您应该能够在您的.tsconfig（请参阅之前的指南）中找到它。

node_modules
dist

添加 lint 脚本

在您的项目中package.json，让我们添加一个lint脚本以对所有 TypeScript 代码进行 lint。

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

准备好尝试了吗？让我们运行以下命令。

npm run lint

对我来说，由于我正在继续上一个教程，并且由于我的src文件夹中只有一个index.ts用 打印出一些文本console.log()，因此我在运行该命令后看不到任何内容。

console.log('Hello world!')

如果我们想禁止 console.log代码中的语句怎么办？

规则

有三种模式在eslint规则：off，warn，和error。

• "off" 表示 0（完全关闭规则）
• “警告”表示 1（打开规则但不会使 linter 失败）
• “错误”表示 2（打开规则并使 linter 失败）

添加规则

在 中.eslintrc，向名为“规则”的 json 对象添加一个新属性。

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

规则被添加为该rules属性的键，您通常可以通过规则文档在其网站上找到eslint基本规则。

我们想添加no-console规则，所以这里有一个示例，说明如果遇到规则设置为的console.log语句，我们如何使 linter 失败（抛出平均错误代码）。no-consoleerror

我们更新 .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 // Remember, this means error!  }
}

然后再次运行 linter。

npm run lint

我们应该得到一个愤怒的 linting 结果。

/simple-typescript-starter/src/index.ts

  2:1  error  Unexpected console statement  no-console
    ✖ 1 problem (1 error, 0 warnings)

如果我们愿意，我们可以通过将其设置为 来关闭规则0 - off。

{
  "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 
  }
}

运行 linter。

npm run lint

……和沉默。

在实际项目中使用规则

所有这三种模式都存在是有原因的。当您将 linter 设置off为规则时，这是因为您和您的团队可能不关心您正在使用的特定基本配置中的该规则（我们目前正在使用 ESLint 推荐的配置，但您也可以去使用Shopify 的、Facebook 的或其他几家公司的配置作为起点）。

当您将规则设置为 时error - 2，这意味着您根本不希望破坏您的编码约定的代码甚至将其放入存储库。我认为这是对代码库、你的队友和未来的维护者的专业精神和同理心的伟大行为。使用此工具实际强制执行代码约定的一种流行方法是使用Husky之类的工具设置您的项目，以便当团队成员尝试提交代码或推送代码时，您可以告诉您的 linter 在操作执行之前先检查代码。这是一个很好的习惯，但有时，如果规则过于严格，它会放慢速度并惹恼你的队友。

为了纠正过于严格的规则，warn - 1设置意味着是的，您希望您和您的团队遵守该规则，但您不希望它阻止您前进。

添加插件（功能）

ESLint 还允许您向配置中添加一次性功能。这些被称为插件。

这是一个有趣的。它被称为无循环。

查看其他awesome-eslint插件和配置的列表。

no-loops是一个插件，它使您能够强制执行约定，指定forandwhile循环是非法的，您应该使用mapand 之类的函数forEach。

像这样安装它。

npm install --save-dev eslint-plugin-no-loops

然后更新您.eslintrc用no-loops的“插件”数组中，并添加规则的“规则”属性，像这样。

{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
    "no-loops"  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "no-console": 1,
    "no-loops/no-loops": 2  }
}

现在，如果我们更新我们的代码以包含一个for循环......

console.log('Hello world!');

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

并再次运行 lint 命令...

npm run lint

我们将看到限制循环的错误出现。

/simple-typescript-starter/src/index.ts
  2:1   warning  Unexpected console statement                   no-console
  2:1   error    'console' is not defined                       no-undef
  4:1   error    loops are not allowed                          no-loops/no-loops  5:3   warning  Unexpected console statement                   no-console
  5:3   error    'console' is not defined                       no-undef
  5:17  error    Missing semicolon                              babel/semi
  5:17  error    Missing semicolon                              semi
  6:2   error    Newline required at end of file but not found  eol-last

✖ 8 problems (6 errors, 2 warnings)
  3 errors and 0 warnings potentially fixable with the `--fix` option.

扩展不同的基本配置

假设您想从不同的基本配置开始 -例如Shopify。

这是如何做到这一点。

查看自述文件，我们需要通过运行来安装它：

npm install eslint-plugin-shopify --save-dev

更新我们的 .eslintrc

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

您可以将多个基本配置添加到您的项目中，方法是将它们包含在数组中，尽管您最终可能会看到相同的 linting 规则两次或更多次。

现在，当我们再次运行 lint 命令时npm run lint，我们可以看到一些基于 Shopify 基本配置和我们的no-console规则报告的错误。

/simple-typescript-starter/src/index.ts
  2:1   warning  Unexpected console statement  no-console
  2:1   error    'console' is not defined      no-undef
  2:28  error    Missing semicolon             babel/semi
  2:28  error    Missing semicolon             semi

✖ 4 problems (3 errors, 1 warning)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

使用 ESLint 修复 linted 代码

您可能已经注意到，在错误消息的末尾，它显示“2 个错误和 0 个警告可能可以通过该--fix选项修复”。

您可以运行 ESLint 并告诉它修复它能够同时修复的问题。

使用该--fix选项，让我们将一个新脚本添加到我们package.json调用的lint-and-fix.

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

对我们的代码运行这个命令，我希望它会在console.log我们拥有的语句上加上一个分号。

让我们运行它。

npm run lint-and-fix

结果是报告的错误更少。我们再也看不到关于分号的错误了。

/simple-typescript-starter/src/index.ts
  2:1  warning  Unexpected console statement  no-console
  2:1  error    'console' is not defined      no-undef

因为果然，linter 加了分号。

console.log('Hello world!');

这真是太棒了。但是如果我们不想一直运行 linter 来修复我们的代码怎么办？如果有一种方法可以让我们在编码时根据我们的约定自动格式化事物呢？