如何在 VSCode 中使用 Typescript 配置 ESLint 平面配置？ （不含 FlatCompat）

Question

我该怎么办：

• 过渡到 ESLint 平面配置
• 以新格式为 Typescript 设置 linting 配置
• 让 ESLint 扩展在 VSCode 中再次工作

Answer 1

在找到一个非常干净的解决方案之前，我为此苦苦挣扎了几个小时。它不依赖于 FlatCompat（这将使旧配置保持活动状态），因此我想将其记录在这里，以便其他面临同样挑战的人受益：

ESLint 平面配置与以前的格式有很大不同。一开始它让我抓狂，但一旦点击，它实际上会变得更简单，为了帮助理解“平面配置”，以下指针帮助了我：

• Config 并不比对象数组更复杂。这比以前的格式更简单，但一开始可能并不明显。
• 数组中的每个对象都可以定义它想要的任何 ESLint 配置
• 每个对象都可以通过包含或忽略一组文件来定位某些文件（很有用，因为

  .eslintignore

  不再可用）
• 每个被检查的文件都会应用所有匹配的配置 - 我相信它们在数组中出现的顺序

VSCode 设置 - 在撰写本文时，您需要：

插件安装页面中的
• ESlint插件

  v3.0.5

  或更高版本（目前需要“切换到预发布版本”）
• 将

  "eslint.useFlatConfig": true

  添加到您的

  settings.json

  （这是以前的

  eslint.experimental.useFlatConfig

  ）

安装以下依赖项：

    yarn add --dev \
      eslint \
      @eslint/js \
      typescript-eslint \
      --

使用以下

eslint.config.js

文件开始使用（将其放在

package.json

旁边）。这提供了来自 https://typescript-eslint.io/getting-started/ 的默认值。此配置还允许您添加忽略的文件，这很有用，因为

.eslintignore

不再可用。请注意，配置“只是 Javascript”，因此您可以进行其他更改。这使用

module.exports

避免了将

type: "module"

添加到

package.json

:

    const eslint = require('@eslint/js');
    const tseslint = require('typescript-eslint');

    const ignores = [
      '**/*.js',
    ];

    module.exports = tseslint.config(
      {
        ...eslint.configs.recommended,
        ignores,
      },
      ...tseslint.configs.recommended.map((config) => ({
        ...config,
        ignores,
      })),
    );

专业人士：

• 一旦我停止咒骂，我意识到它实际上很干净，即使它确实占用了我生命中的两个小时，我也不准备预算来进行过渡
• 上面的配置比我在旧配置下积累的粘性东西小很多

缺点：

• 我之前使用过 AirBnB 配置，但决定转储它，因为它（尚未）以平面配置格式提供
• 应用一组不同的 linting 规则意味着在我的代码库中进行大量（大部分是简单的）更改

我希望这可以为您节省一些时间来了解如何进行转换。