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

问题描述

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

我也在使用 Prettier： prettier（随 Gatsby 一起提供），并且我安装了以下软件包：

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/**/*"]
}

解决方法

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

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