Typescript eslint - 缺少文件扩展名“ts”导入/扩展

Question

我有一个使用 Typescript 制作的简单 Node/Express 应用程序。 并且 eslint 给我错误

Missing file extension "ts" for "./lib/env" import/extensions

这是我的 .eslintrc 文件

    {
  "extends": [
    "airbnb",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/react",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier", "import"],
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "typescript": {
        "directory": "./tsconfig.json"
      },
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "@typescript-eslint/indent": [2, 2],
    "no-console": "off",
    "import/no-unresolved": [2, { "commonjs": true, "amd": true }],
    "import/named": 2,
    "import/namespace": 2,
    "import/default": 2,
    "import/export": 2
  }
}

我已经安装了 eslint-plugin-import 和 eslint-import-resolver-typescript。 我不知道为什么，我得到了那个错误。

Answer 1

将以下代码添加到rules：

"rules": {
   "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
}

airbnb ESLint config 导致问题。

Answer 2

我知道这已经晚了，但如果您要扩展 Airbnb 规则，您可以使用eslint-config-airbnb-typescript。请参阅项目页面以获取最新说明。以下是截至 2021 年 10 月的要点：

安装

npm install -D eslint-config-airbnb-typescript

ESLint 配置文件

使用 React - 在“airbnb”之后添加“airbnb-typescript”

extends: [
  'airbnb',
+ 'airbnb-typescript'
]

没有 React - 在“airbnb-base”之后添加“airbnb-typescript/base”

extends: [
  'airbnb-base',
+ 'airbnb-typescript/base'
]

将 parserOptions.project 设置为tsconfig.json的路径

{
  extends: ['airbnb', 'airbnb-typescript'],
+ parserOptions: {
+   project: './tsconfig.json'
+ }
}

---

注意：在 2021 年 8 月之前，您还需要完成以下任务。 这些说明保留在这里仅供历史参考。您应该不再需要这样做了。

先卸载旧的，再添加新的：

# uninstall whichever one you're using
npm uninstall eslint-config-airbnb
npm uninstall eslint-config-airbnb-base

# install the typescript one
npm install -D eslint-config-airbnb-typescript

然后更新您的 ESlint 配置，从“扩展”部分删除旧的 Airbnb 并添加新的：

extends: ["airbnb-typescript"]

Answer 3

通过捆绑我在互联网上找到的所有答案来解决这个问题：

这是我的最终结果：

{
  "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },

  "env": {
    "browser": true,
    "es2021": true
  },

  "extends": ["plugin:react/recommended", "airbnb"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["import", "react", "@typescript-eslint"],
  "rules": {
    "no-console": 1,
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never",
        "mjs": "never"
      }
    ]
  }
}

我正在使用 react native 顺便说一句。如果您使用不同的东西，只需删除与反应相关的东西就足够了

Answer 4

如果您像我一样尝试配置 babel、旧版 Javascript 和新的打字稿文件并尝试在 *.ts 上启用无扩展名导入，那么我遇到了 this ESLint issue（我还找到了以下解决方案）：

除了rules 配置：

"rules": {
   "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "mjs": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
   ]
}

您还需要在.eslintrc.js 中添加额外的设置条目：

  "settings": {
    "import/extensions": [".js", ".mjs", ".jsx", ".ts", ".tsx"]
  },

祝你好运！

Answer 5

向.eslintrc

添加导入扩展和解析器很重要

    "settings": {
    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"]
    },
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  }
},

进一步添加规则：

 "import/extensions": [
  "error",
  "ignorePackages",
  {
    "js": "never",
    "jsx": "never",
    "ts": "never",
    "tsx": "never"
  }
]



enter code here