Eslint import extensions typescript

Typescript eslint – Missing file extension «ts» import/extensions

Typescript eslint – Missing file extension «ts» import/extensions

I have a simple Node/Express app made with Typescript.
And eslint give me the error

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

 < "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 > > 

I have installed eslint-plugin-import & eslint-import-resolver-typescript.
And I cannot figure out why, I got that error.

Solution – 1

Add the following code to rules :

airbnb ESLint config leads the problem.

Solution – 2

I know this is late, but if you’re extending the Airbnb rules you can use eslint-config-airbnb-typescript. Please refer to the project page for the latest instructions. Here’s the gist of it as of March 2022:

npm install -D eslint-config-airbnb-typescript 

using React – add ‘airbnb-typescript’ after ‘airbnb’

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

without React – add ‘airbnb-typescript/base’ after ‘airbnb-base’

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

set parserOptions.project to path of your tsconfig.json

NOTE: Prior to August 2021, you would need to also do the following tasks.
These instructions are remaining here for historical reference only. You should not need to do this any more.

First uninstall the old one and add the new one:

# 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 

Then update your ESlint config, remove the old Airbnb from the «extends» section and add the new one:

Solution – 3

If you’re like me trying to configure babel, legacy Javascript, and new typescript files and attempting to enable extension free imports on *.ts then I was running into this ESLint issue (where I also found below solution):

In addition to the rules config:

You also need an additional settings entry in your .eslintrc.js :

Solution – 4

got this working by bundling all answers I found on internet:

this is the end result for me:

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

im using react native btw. if u’re using something different just removing react related should be enough

Solution – 5

Important to add import extension and parser to .eslintrc

 "import/extensions": [ "error", "ignorePackages", < "js": "never", "jsx": "never", "ts": "never", "tsx": "never" >] enter code here 

Solution – 6

Following is a similar error that can be thrown due to ‘~’ in imports:

Missing file extension for «~/path/»
eslintimport/extensions

Solution 1:

This issue can be resolved by configuring tsconfig.json and .eslintrc.js as follows.

tsconfig.json

Solution 2:

If the error still persists, then probably you must have opened the project in another directory other than the root directory (the directory where tsconfig.json and .eslintrc.js are located). Therefore opening the directory other than the root directory can confuse the eslint in identifying the path correctly, and throw the above error.

Solution – 7

This is a strange solution, but I’ve added «»: «never» and it worked for me (https://github.com/import-js/eslint-plugin-import/issues/1573).

Solution – 8

In my case, I was extending monorepo ESLint configs, and had airbnb-base loading after the package in which I was disabling that rule. So I just had to load it last.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

This plugin adds `TypeScript` support to `eslint-plugin-import`

License

import-js/eslint-import-resolver-typescript

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

This plugin adds TypeScript support to eslint-plugin-import (Or maybe you want to try eslint-plugin-i for faster speed)

• import / require files with extension .cts / .mts / .ts / .tsx / .d.cts / .d.mts / .d.ts
• Use paths defined in tsconfig.json
• Prefer resolving @types/* definitions over plain .js / .jsx
• Multiple tsconfigs support just like normal
• imports/exports fields support in package.json

After version 2.0.0, .d.ts will take higher priority then normal .js / .jsx files on resolving node_modules packages in favor of @types/* definitions or its own definition.

If you’re facing some problems on rules import/default or import/named from eslint-plugin-import , do not post any issue here, because they are just working exactly as expected on our sides, take import-js/eslint-plugin-import#1525 as reference or post a new issue to eslint-plugin-import instead.

# npm npm i -D eslint-plugin-import eslint-import-resolver-typescript # pnpm pnpm i -D eslint-plugin-import eslint-import-resolver-typescript # yarn yarn add -D eslint-plugin-import eslint-import-resolver-typescript

Add the following to your .eslintrc config:

 "plugins": ["import"], "rules":  // turn on errors for missing imports "import/no-unresolved": "error" >, "settings":  "import/parsers":  "@typescript-eslint/parser": [".ts", ".tsx"] >, "import/resolver":  "typescript":  "alwaysTryTypes": true, // always try to resolve types under `@types` directory even it doesn't contain any source code, like `@types/unist` // Choose from one of the "project" configs below or omit to use /tsconfig.json by default // use /path/to/folder/tsconfig.json "project": "path/to/folder", // Multiple tsconfigs (Useful for monorepos) // use a glob pattern "project": "packages/*/tsconfig.json", // use an array "project": [ "packages/module-a/tsconfig.json", "packages/module-b/tsconfig.json" ], // use an array of glob patterns "project": [ "packages/*/tsconfig.json", "other-packages/*/tsconfig.json" ] > > > >

[ "types", "import", // APF: https://angular.io/guide/angular-package-format "esm2020", "es2020", "es2015", "require", "node", "node-addons", "browser", "default" ]

[ // `.mts`, `.cts`, `.d.mts`, `.d.cts`, `.mjs`, `.cjs` are not included because `.cjs` and `.mjs` must be used explicitly ".ts", ".tsx", ".d.ts", ".js", ".jsx", ".json", ".node" ]

 ".js": [ ".ts", // `.tsx` can also be compiled as `.js` ".tsx", ".d.ts", ".js" ], ".jsx": [".tsx", ".d.ts", ".jsx"], ".cjs": [".cts", ".d.cts", ".cjs"], ".mjs": [".mts", ".d.mts", ".mjs"] >

[ "types", "typings", // APF: https://angular.io/guide/angular-package-format "fesm2020", "fesm2015", "esm2020", "es2020", "module", "jsnext:main", "main" ]

You can pass through other options of enhanced-resolve directly

You can reuse defaultConditionNames , defaultExtensions , defaultExtensionAlias and defaultMainFields by require/import them directly

• Make sure your change is covered by a test import.
• Make sure that yarn test passes without a failure.
• Make sure that yarn lint passes without conflicts.
• Make sure your code changes match our type-coverage settings: yarn type-coverage .

We have GitHub Actions which will run the above commands on your PRs.

If either fails, we won’t be able to merge your PR until it’s fixed.

Detailed changes for each release are documented in CHANGELOG.md.

Источник