使用 TypeScript 和自定义 ESLint 实现更好的代码检查

什么是 ESLint？

建筑学

项目设置

先决条件

创建我们自己的 .eslintrc 文件

结论

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

使用编辑器编写 JavaScript 时，有很多方法可以确保代码语法正确并符合当前的最佳实践。检查代码完整性的最佳方法之一是设置代码检查工具，例如ESLint。

什么是 ESLint？

ESLint是一个开源项目，旨在帮助开发者查找并修复 JavaScript 代码中的问题。它是 npm 上下载量排名第一的 JavaScript 代码检查工具（每周下载量超过 650 万次），并被微软、Airbnb、Netflix 和 Facebook 等公司广泛使用。由于 ESLint 的灵活性，它还能帮助查找并修复 JavaScript 衍生语言（例如Flow和TypeScript）以及React Native等移动开发项目中的问题。

ESLint 中的规则是可配置的，并且可以定义和加载自定义规则。ESLint 同时涵盖代码质量和编码风格问题。

建筑学

我们将从宏观角度审视 ESLint，并讨论一些重要的关键部分，这些部分对于理解 ESLint 的内部核心组件非常有用，这些组件可以进行配置以使用 ESLint 实现更多功能。

eslint.js是一个简单的组件，它的功能仅限于引导 ESLint 并将命令行参数传递给 CLI（cli.js）。它不需要进行太多复杂的操作，因此体积很小。

api.js是命令的主要入口点require。它向 Linter、CLIEngine、RuleTester 和源代码公开一个包含公共类的对象。

init模块包含--init为最终用户设置配置的功能。

cli.js接受一个参数数组，然后使用该数组eslint来执行命令。

cli-engine模块包含一个CLIEngine类，该类负责找出配置文件，然后使用Linter.

代码检查工具会根据提供的配置进行代码验证，它完全不会与控制台交互。

更多信息请参阅官方文档。

命令行引擎

它读取配置文件和源文件（包括eslintrc和package.json），并管理传递给 Linter 对象的环境。

CLIEngine 的主要方法是executeOnFiles()，它接受一个文件和目录名称数组来运行 linter。

它不使用格式化程序，也不向控制台输出信息。此外，该操作也不是异步的。

行内检查器

Linter 对象的主要方法是 ` verify()main`，它接受两个参数：要验证的源文本和一个配置对象。首先，它会使用解析器（您可以自行选择，一些常用的解析器包括espree、typescript-eslint-parser等）解析给定的文本，并生成一个抽象语法树 (AST)。

抽象语法树（AST）的生成同时包含行/列位置和范围位置信息，分别用于报告问题位置和检索与AST节点相关的源文本。然后，从上到下遍历AST。

在每个节点，Linter 对象都会发出一个与节点类型同名的事件（例如，“Identifier”、“WithStatement”等）。在返回子树的过程中，会发出一个带有 AST 类型名称并附加“:exit”后缀的事件，例如“Identifier:exit”——这使得规则能够在遍历过程中的上下行进中都执行相应的操作。

在这篇博客中，我将讨论我们在 Litmus 中使用的 eslint 配置。

Litmus 是一个用于在云原生环境中实践混沌工程的框架。Litmus 提供了一个混沌算子、在其中心平台上提供了大量混沌实验、详细的文档以及一个友好的社区。Litmus 非常易于使用；您还可以快速搭建一个演示环境来安装和运行 Litmus 实验。

如果您还没有创建 TypeScript 项目，可以通过生成一个样板基本配置来创建。例如，您可以按照以下步骤快速搭建一个基本的 React-TypeScript 配置，类似于我们在 Litmus 中使用的配置。

npx create-react-app your-app --template typescript

项目设置

首先需要做的是在项目目录中安装 eslint 和 eslint-plugin-import，以便能够使用 eslint 配置初始化我们的项目，并且以后还可以添加其他配置。

npm install eslint eslint-plugin-import --save-dev

安装好软件包后，我们可以运行以下命令来初始化 ESLint 配置：

eslint --init

很快，交互式 CLI 会提示您选择样式指南、框架等，之后 eslint 将使用.eslintrc这些配置为您创建一个文件，但我们不会遵循此步骤。

我们将创建自己的eslintrc文件，并添加自定义配置。

先决条件

为了创建一套出色的自定义代码检查规则，我们需要一些软件包来帮助我们更快地完成工作。

首先，你需要确保你已经typescript在项目中安装了 TypeScript，并且你的项目遵循基于 TypeScript 模板的设置，并包含 tsconfig 文件。

注意：您也可以在不使用 TypeScript 的情况下使用这些 ESLint 规则和配置，但所需的包/解析器可能略有不同。

此特定配置需要以下一些开发依赖项/对等依赖项：

• eslint-config-airbnb
• eslint-config-prettier
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-prettier
• eslint-plugin-react
• eslint-plugin-react-hooks
• 更漂亮
• @typescript-eslint/eslint-plugin
• @typescript-eslint/parser

由于编写高效代码和遵循最佳实践是实现高质量代码的关键，我们更倾向于遵循Airbnb 风格指南来编写更简洁的代码。

为了能够在我们的项目中使用它们，我们需要安装一些对等依赖项，这些依赖项需要具有确切的版本号才能正常工作，让我们先完成这一步，然后再进行下一步。

npx install-peerdeps --dev eslint-config-airbnb

注意：要使用此功能，install-peerdeps我们需要eslint-plugin-import事先安装好相关软件。

一旦设置好样式指南及其对等依赖项，我们还需要添加解析器，例如 TypeScript 的 eslint-plugin 和 ESLint 的 prettier，以便让我们的代码检查是否符合正确的代码格式。

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

创建我们自己的 .eslintrc 文件

.eslintrc.json在项目根目录创建一个文件，我们将在这里编写我们自己的项目配置。

解析器

让我们启用之前安装的软件包，并为 eslint 分配一个解析器。

"parser": "@typescript-eslint/parser"

该解析器将利用 TypeScript ESTree，使 ESLint 能够检查 TypeScript 源代码。

扩展配置

由于我们遵循 Airbnb 风格指南以实现最佳实践和更简洁的代码，因此我们需要告知代码检查工具这一点。我们可以扩展代码检查工具的配置以增强其功能。

 "extends": ["airbnb"]

虽然 ESLint 可以格式化我们的代码，但它做得还不够。代码看起来并不美观。这正是区分优劣的关键所在。ESLint 的主要目的是提高代码质量。顾名思义，Prettier 的作用是让你的代码更美观。Prettier 的可扩展性使得我们的代码检查工具能够根据 Airbnb 风格指南以及自定义规则，在代码格式不正确时发出警告。

  "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"]

ESLint 插件

接下来，我们将添加 eslint 插件。

"plugins": ["@typescript-eslint"]

这款 ESLint 插件提供了一套预配置好的代码检查规则，您可以直接使用。点击此处查看规则列表。他们提供了一系列推荐规则，包括 `<script>`、`<script>` naming-convention、no-this-alias`<script>` 等，这些规则非常实用。

为了在我们的项目中使用它们，我们需要将它们添加到配置文件中"rules"。Litmus 中广泛使用的一些 TypeScript-ESLint 规则如下：

"rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/no-useless-constructor": "error"
}

修改规则

仅仅这两条规则不足以应对像我们这样的代码库，我们需要快速进行大量检查才能确保代码的高质量和完整性。所以，让我们再添加一些规则。

"rules": {
    "jsx-a11y/href-no-hash": ["off"],
    "react/jsx-props-no-spreading": ["off"],
    "react/jsx-filename-extension": [
      "warn",
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "no-console": [
      "error",
      {
        "allow": ["warn", "error"]
      }
    ],
    "multiline-ternary": 0,
    "no-unused-vars": "off",
    "no-shadow": 0,
    "@typescript-eslint/no-unused-vars": "error",
    "no-useless-constructor": "off",
    "@typescript-eslint/no-useless-constructor": "error",
    "react/prop-types": 0,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "tabWidth": 2,
        "comments": 80,
        "ignoreComments": false,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ]
}

您可以通过修改规则部分来自定义配置。您需要输入key -> value规则对，其中 ` key<rule>` 是规则的名称。

在配置规则时，Error、Off、Warn这三个值具有特定的含义。

“错误”会严格要求您更改不符合指定规则的代码部分，“警告”只会向您发出警告，但您仍然可以继续编写代码，“关闭”则根本不会检查您的代码库中是否存在该特定规则。

环境

要在配置文件中指定环境，我们使用env键，并通过将每个键设置为 true 来指定要启用的环境。

"env": {
    "browser": true,
    "es6": true
}

这里我们启用浏览器和 ES6 环境。

注意：env全局变量需要此项。ESLint 会为我们选择的环境变量启用全局变量。

设置

根据我们的需求修改默认的 eslint 设置

"settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }

增加import/extensions对 ES2015+ (ES6+) 导入/导出语法的 linting 支持，防止文件路径和导入名称拼写错误的问题。

我们还需要导入/引入带有扩展名的文件.ts/.tsx，使用已定义的路径tsconfig.json，并解析@types/*定义而不是普通路径。.js, .ts

以下是 .eslintrc 文件的完整概览

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["airbnb", "plugin:prettier/recommended", "prettier/react"],
  "env": {
    "browser": true,
    "es6": true
  },
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "jsx-a11y/href-no-hash": ["off"],
    "react/jsx-props-no-spreading": ["off"],
    "react/jsx-filename-extension": [
      "warn",
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "no-console": [
      "error",
      {
        "allow": ["warn", "error"]
      }
    ],
    "multiline-ternary": 0,
    "no-unused-vars": "off",
    "no-shadow": 0,
    "@typescript-eslint/no-unused-vars": "error",
    "no-useless-constructor": "off",
    "@typescript-eslint/no-useless-constructor": "error",
    "react/prop-types": 0,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ],
    "max-len": [
      "warn",
      {
        "code": 80,
        "tabWidth": 2,
        "comments": 80,
        "ignoreComments": false,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ]
  }
}

结论

瞧，您已经成功创建了一个 ESLint 配置文件，它可以检查未使用的变量、未使用的导入语句、过长的注释等等。当然，您可以扩展这些配置，并进行一些尝试，创建属于您自己的功能。我们欢迎大家留言评论，告诉我们如何改进这些代码检查配置，使其发挥更大的作用！我们非常感谢您的每一条建议。

您是SRE或Kubernetes爱好者吗？混沌工程是否令您兴奋？
加入我们的 Slack 社区，参与关于 Kubernetes 混沌工程的深入讨论、获取反馈并定期接收最新资讯：https://kubernetes.slack.com/messages/CNXNB0ZTN
（Kubernetes 工作区的 #litmus 频道）

请查看Litmus Chaos GitHub 代码库并分享您的反馈：https://github.com/litmuschaos/litmus如果您发现任何必要的更改，
请提交pull request 。

别忘了把这些资源分享给可能从中受益的人。祝好！✌🏼