为 ESLint 和 Airbnb 打字稿设置配置 parserOptions 或解析器包答案

【问题标题】：Configure parserOptions or parser package for ESLint and Airbnb typescript setup为 ESLint 和 Airbnb 打字稿设置配置 parserOptions 或解析器包
【发布时间】：2021-04-04 13:29:01
【问题描述】：

在我的Gatsby (React) 项目中，我使用的是typescript。我需要设置 ESLint 并且必须使用 eslint-config-airbnb-typescript

我也在使用 Prettier： prettier（盖茨比自带），我安装了以下包：

npm install eslint-config-prettier eslint-plugin-prettier --save-dev

如果我查看eslint-config-airbnb-typescript 的文档，我没有看到任何关于@typescript-eslint/parser 包的信息？

他们展示了一个类似的例子：

module.exports = {
  extends: ['airbnb-typescript'],
  parserOptions: {
    project: './tsconfig.json',
  }
};

正确的方法是什么？在他们的示例中，您不必使用@typescript-eslint/parser 包吗？

我的 ESLint 配置 .eslintrc.js:

module.exports = {
  globals: {
    __PATH_PREFIX__: true,
  },
  env: {
    browser: true,
    es6: true,
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  extends: [
    'airbnb-typescript',
    'airbnb/hooks',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'prettier/react',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
    project: './tsconfig.json',
  },
  rules: {
    'prettier/prettier': [
      'error',
      {
        endOfLine: 'auto',
      },
    ],
  },
};

我的tsconfig.js：

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "esnext",
    "jsx": "preserve",
    "lib": ["dom", "es2015", "es2017"],
    "strict": true,
    "noEmit": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "removeComments": false,
    "preserveConstEnums": true,
    "baseUrl": "src"
  },
  "include": ["src/**/*"]
}

【问题讨论】：

标签： typescript visual-studio-code prettier eslint-config-airbnb prettier-eslint

【解决方案1】：

这是我在eslint-config-auto 中设置的方式，它会根据你的 package.json 配置自动配置 eslint。

overrides: [
  {
    files: ['**.ts', '**.tsx'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
      project: './tsconfig.json',
    },
  },
],

【讨论】：