如何在 VSCode 中为 TypeScript 配置 ESLint

介绍

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

介绍

如果你曾经参与过开发团队，你可能知道我们每个人都有不同的代码格式和语义标准（这完全没问题😅）。但是，当大家都在开发同一个项目时，遵循一个严格的模式会非常方便，这样代码库就不会显得杂乱无章。

然而，要让所有开发人员都习惯一种模式是非常困难且效率低下的（因为我们有一些副项目，在这些项目中我们使用不同的样式指南等等）。

埃斯林特来帮忙了！

ESLint 是一款工具，它强制开发人员按照选定的规则格式化代码。

例如：代码中不要使用分号。

// The semicolon below would be underlined and showing error on hover
console.log("I shouldn't be using semicolons there");

这样一来，如果开发者的代码中包含分号，他们的 IDE/文本编辑器就会报错，但出于某种原因，他们可能会忽略这些错误/警告，仍然提交更改。幸运的是，eslint 可以处理这种情况，并在保存文件时自动修复错误！

遗憾的是，开发者可能没有配置好他们的 IDE/文本编辑器来兼容 ESLint，因此看不到这些错误。不过，我们仍然可以创建一个 ESLint 脚本，在我们的持续集成 (CI) 系统中运行。这样就能确保只有格式正确的代码才能被合并。🙌

为什么选择 TypeScript？

你可能听说过 TypeScript，它本质上是带有类型定义的 JavaScript（但它的功能远不止于此！）。它能为你的代码增加一层额外的安全保障。然而，要让它与 ESLint 配合使用有点棘手，所以让我们深入了解一下吧！

Visual Studio Code 安装

首先，我们需要“教”我们的编辑器理解 eslint 😄
所以我们将安装这个扩展。

安装完成后，我们需要明确地告诉 eslint 扩展程序监视 TypeScript 文件是否存在代码检查错误（默认情况下，它只检查 JavaScript 和 JSX 文件）。请按照以下说明操作：

• 在 VS Code 中使用：Ctrl+Shift+P或Shift+Cmd+P
• 类型：Preferences: Open Settings (JSON)
• 选择该选项
• 将此代码粘贴到打开的 JSON 文件中

{
    "eslint.validate": [
        "typescript",
        "typescriptreact"
    ]
}

请注意，如果您在 VS Code 中按下快捷键Ctrl+Shift+P或Shift+Cmd+P输入 eslint，它会显示此扩展的所有可用命令！但是，这些命令无法运行，因为我们还没有安装 eslint 依赖项，现在就来安装吧！

将 eslint 安装到你的项目或全局安装到你的计算机上

我们现在有两个选择：

1）我们将全局安装 eslint 依赖项（这意味着它将适用于您机器上的所有项目，太棒了！）

# using npm
npm install -g eslint
# using yarn
yarn global add eslint

2) 我们将按项目安装依赖项，这可以明确地告诉开发人员使用这些依赖项。

# Go to the root of the project (where package.json lives)
cd my-project
# using npm
npm install -D eslint
# using yarn
yarn add -D eslint

你可以选择使用其中哪一个。

让 ESLint 能够与 TypeScript 协同工作

默认情况下，Eslint 无法理解 TypeScript 语法。这就是为什么你可能会听说过tslint，它曾经（现在仍然）用于 TypeScript 项目，而不是使用 Eslint。但是，该软件包的开发者在今年早些时候宣布弃用 ，tslint转而使用typescript-eslint（这是一个 monorepo，所以我们将从中安装一些软件包）。

# using npm
npm i -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin
# using yarn
yarn add -D typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

我们将为 eslint 创建配置文件。它可以是以下三种类型之一：

• Javascript 文件
• JSON 文件——我们将使用这个文件。
• YAML 文件
• eslintConfig领域package.json

.eslintrc在项目根目录下创建一个文件，并将以下代码粘贴到该文件中：

{
    "parser": "@typescript-eslint/parser",
    "plugins": ["@typescript-eslint"],
    "rules": {
        "semi": ["error", "never"],
        "quotes": [2, "single"]
    }
}

我们添加了 `<script>` 标签@typescript-eslint/parser（用于解析 TypeScript 文件，以便 ESLint 能正确识别它们）。然后在 `<script>` 标签下plugins，我们添加了一个@typescript-eslint插件，该插件允许我们添加特定于 TypeScript 代码的规则。在 `<script>` 标签下rules，我们添加了一些示例规则（不允许使用分号，并且使用单引号而不是双引号）。

这样，如果你在 Anywhere 上创建一个带有.ts or .tsx扩展名的文件，并编写如下代码：

console.log("This shows errors");

你应该能看到字符串和分号都被划了线。这说明这段代码违反了哪些规则。

新增自动修复 lint 错误功能！

太好了，现在编辑器会在我们输入违反 eslint 规则的内容时显示错误，我们可以手动修复它们，但这很费时，我们可以用自动修复做得更好！

我们只需要告诉 VS Code eslint 扩展程序eslint --fix在文件保存时运行命令即可。

• 在 VS Code 中使用：Ctrl+Shift+P或Shift+Cmd+P
• 类型：Preferences: Open Settings (JSON)
• 选择该选项
• 更新已打开的 JSON 文件中与 eslint 相关的代码

{
    "eslint.validate": [
        {
            "language": "typescript",
            "autoFix": true
        },
        {
            "language": "typescriptreact",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
}

现在，每当您保存带有 ESLint 错误的 TypeScript 文件时，错误都会自动修复。太棒了！

在命令行执行 eslint！

我们快要完成了，最后需要做的就是设置一个运行 eslint 检查的脚本。

该脚本可能会在您的持续集成 (CI) 环境中执行，以确保推送的代码格式正确。

使用 eslint 在命令行检查代码非常简单，请看这里：

# Scans from the root of the project
eslint .
# Scans only src directory of the project
eslint src/*

但是，这些命令里藏着一个小陷阱。你知道为什么吗？🤔

它默认只扫描 JavaScript 文件，因此 TypeScript 文件会被忽略。所以，如果你的项目中没有任何 JavaScript 文件，只有 TypeScript 文件，你会看到类似这样的结果：

Oops! Something went wrong! :(

ESLint: 6.6.0.

No files matching the pattern "." were found.
Please check for typing mistakes in the pattern.

因此，要检查 TypeScript 文件，我们需要添加一个参数`--ext <逗号分隔的文件扩展名列表>`。考虑到这一点，命令应该如下所示：

# Scans from the root of the project
eslint --ext ts,tsx .
# Scans only src directory of the project
eslint --ext ts,tsx src/*

好了，你已经成功配置了 TypeScript 的 ESLint！😎

这篇文章已发布在我的博客上，你可以点击这里查看！