如何让 ESLint 同时检测 js 和 ts

一、让 ESLint 能够检测 ts 代码

ESLint 可以作用于 TypeScript。但是 ESLint 默认使用 Espree 作为其解析器，在某些情况下 不支持 TypeScript 语法。另外，TypeScript 是 JavaScript 超集，有更多的语法，ESLint 本身提供的规则无法满足。为了解决这些问题，我们需要用到 typescript-eslint。首先使用 npm 安装 @typescript-eslint/parser 和 @typescript-eslint/eslint-plugin（注意这两个插件的版本要保持一致）：

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

在 ESLint 配置文件中，将 parser 设置为 @typescript-eslint/parser，把 @typescript-eslint 添加到 plugins 中，然后在 rules 中配置你要使用的规则：

{
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
      '@typescript-eslint/rule-name': 'error',
  },
}

如果你想启用所有推荐的规则，把 plugin:@typescript-eslint/recommended 添加到 extends 中：

{
  extends: ['plugin:@typescript-eslint/recommended'],
}

二、为不同文件指定不同配置

使用了 typescript-eslint 之后，我们已经可以正常检测 ts 代码了。但是同时项目中的 js 文件也使用了同样的规则，怎么可以让 ts 规则只作用于 ts 文件呢？ESLint 有一项 overrides 的配置，可以为某个文件或者某组文件进行覆盖配置。因此，我们可以设置 ts 文件使用 @typescript-eslint/parser 作为解析器，使用 @typescript-eslint 插件以及相关规则而不影响 js 文件。

{
  overrides: [
    {
      files: ['*.ts'],
      parser: '@typescript-eslint/parser',
      plugins: ['@typescript-eslint'],
      extends: ['plugin:@typescript-eslint/recommended'],
    },
  ],
}

文中使用的工具或者包的版本：
typescript 4.0.5、eslint 7.17.0、@typescript-eslint/parser 4.11.1、@typescript-eslint/eslint-plugin 4.11.1