CODEWITHSUNDEEP
typescriptvisual-studio-code
mcclosa
mcclosa

Reputation: 1455

Typescript file imports being appended with .js extensions intermittently

I have setup a Create T3 App and in certain .ts files in my project, when I go to import another .ts file the auto import/intellisense option for the import adds a .js file extension.

The same import made in another .ts file in the same directory or another directory, most of the time will not append the .js file extension.

Sometimes, in the .ts file(s) that appends the .js file extension on the auto import, when I remove all of the code and then try the import again, it does not append the .js extension. But if I close the file and re-open it again, it will once again. But this is intermittent.

I've Commented out all of my settings.json file, so uses the default settings

I've already restarted VSCode with Extensions Disabled

See Videos below for issue

https://user-images.githubusercontent.com/20436343/210012132-a6682005-5d22-485b-9e1b-cf617f3ffd1f.mov

https://user-images.githubusercontent.com/20436343/210012161-49604216-5ff5-4ee9-b0f8-de3b83458857.mov

Not sure how much the tsconfig.json file can affect this but this is my ts config.

{
  "compilerOptions": {
    "target": "es2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "noUncheckedIndexedAccess": true,
    "noUnusedLocals": true /* Report errors on unused locals. */,
    "noUnusedParameters": true /* Report errors on unused parameters. */,
    "allowSyntheticDefaultImports": true /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noImplicitThis": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["next-env.d.ts", "types/**/*.ts", "next-auth.d.ts", "**/*.ts", "**/*.tsx", "**/*.js", "**/*.cjs", "**/*.mjs"],
  "exclude": ["node_modules"]
}

Upvotes: 3

Views: 3222

Answers (2)

hossein sedighian
hossein sedighian

Reputation: 2055

thanks I set setting to "js /ts" and it shown all imports with extension at the end as I want

like inside file : index.ts

import { class} from "./filename.js";

Upvotes: -1

Felix Eklöf
Felix Eklöf

Reputation: 3740

I'm not sure what's causing this problem, but you can try the following to see if that will force VS Code to use minimal path endings:

  1. Open the command palette, CTRL + shift + P
  2. Select > Preferences: Open User Settings.
  3. Search for Typescript Import Module Specifier Ending in settings.
  4. The default in my VS Code was Auto, Change this to minimal.

And if you want this setting to always apply to your project, add it in .vscode/settings.json

{
  "typescript.preferences.importModuleSpecifierEnding": "minimal"
}

Upvotes: 6

Related Questions