Typescript eslint - 缺少文件擴展名“ts”導入/擴展

Question

我有一個用 Typescript 制作的簡單 Node/Express 應用程序。 和 eslint 給我錯誤

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

這是 my.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 配置導致問題。

Answer 2

我知道這已經很晚了，但是如果您要擴展 Airbnb 規則，您可以使用eslint-config-airbnb-typescript 。 請參閱項目頁面以獲取最新說明。 以下是截至 2022 年 3 月的要點：

安裝

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'
]

將tsconfig.json設置為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

我有一個用Typescript制作的簡單Node / Express應用程序。 護送給我錯誤

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 4

將導入擴展和解析器添加到.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

Answer 5

如果您像我一樣嘗試配置 babel、舊版 Javascript 和新的打字稿文件並嘗試在*.ts上啟用無擴展名導入，那么我遇到了這個 ESLint 問題（我也在下面找到了解決方案）：

除了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 6

通過捆綁我在互聯網上找到的所有答案來完成這項工作：

這是我的最終結果：

{
  "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"
      }
    ]
  }
}

順便說一句，我正在使用本機反應。 如果您使用不同的東西，只需刪除與反應相關的東西就足夠了

Answer 7

以下是由於導入中的“~”而可能引發的類似錯誤：

“~/path/” eslintimport/extensions\ 缺少文件擴展名

解決方案1：

這個問題可以通過如下配置 tsconfig.json 和 .eslintrc.js 來解決。

tsconfig.json

...
“paths”: {
 “~*”: [“./src/*”],
},
...

.eslintrc.js

...
settings: {
  'import/resolver': {
     alias: {
       map: [['~', './src/']],
       extensions: ['.ts', '.js', '.tsx'],
     },
   },
},
...

解決方案2：

如果錯誤仍然存​​在，那么可能您必須在根目錄（tsconfig.json 和 .eslintrc.js 所在的目錄）之外的另一個目錄中打開項目。 因此打開根目錄以外的目錄會導致 eslint 無法正確識別路徑，並拋出上述錯誤。

Answer 8

這是一個奇怪的解決方案，但我添加了"": "never"並且它對我有用（ https://github.com/import-js/eslint-plugin-import/issues/1573 ）。

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

Answer 9

就我而言，我正在擴展 monorepo ESLint 配置，並在我禁用該規則的 package 之后加載了airbnb-base 。 所以我只需要最后加載它。