typescript.preferences.preferTypeOnlyAutoImports not working with TypeScript 5.3?

[johnnyreilly]

🔎 Search Terms

preferTypeOnlyAutoImports

🕗 Version & Regression Information

I was very excited about:

With a recent change, TypeScript now enables this to be an editor-specific option. In Visual Studio Code, you can enable it in the UI under "TypeScript › Preferences: Prefer Type Only Auto Imports", or as the JSON configuration option typescript.preferences.preferTypeOnlyAutoImports

But when I came to take it for a spin with [email protected] the original import behaviour (i.e. importing without a type specifier) occurred.

⏯ Playground Link

No response

💻 Code

Before auto imports kicked in:

import { useAssistants } from "../data";

🙁 Actual behavior

import { QueryOrView, useAssistants } from "../data";

The QueryOrView type import above was added by the auto-imports behaviour of VS Code despite having typescript.preferences.preferTypeOnlyAutoImports: true

🙂 Expected behavior

import { type QueryOrView, useAssistants } from "../data";

I would expect the above as the the auto-imports behaviour of VS Code due to having typescript.preferences.preferTypeOnlyAutoImports: true

Additional information about the issue

My tsconfig.json in case it is relevant:

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": ["DOM", "DOM.Iterable", "ESNext"],
        "allowJs": false,
        "skipLibCheck": true,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "module": "ESNext",
        "moduleResolution": "Node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx",
        "noErrorTruncation": true
    },
    "include": ["src"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

where tsconfig.node.json is

{
    "compilerOptions": {
        "composite": true,
        "module": "esnext",
        "moduleResolution": "node"
    },
    "include": ["vite.config.ts"]
}

(A basic Vite generated tsconfig.json)

My .eslintrc.cjs (not sure this is actually relevant)

// eslint-disable-next-line no-undef
module.exports = {
    root: true,
    parser: "@typescript-eslint/parser",
    plugins: ["@typescript-eslint"],
    extends: [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "prettier",
        "plugin:storybook/recommended",
    ],
    rules: {
        "react/jsx-uses-react": "off",
        "react/react-in-jsx-scope": "off",
        "@typescript-eslint/consistent-type-imports": "error", // THIS SHOUTS AT ME AND I LOVE IT
    },
    settings: {
        react: {
            version: "detect",
        },
    },
    ignorePatterns: ["dist/"],
};

I'm wondering if I'm making a silly mistake, or if I should be modifying the advice in my blog post in some way. Not sure.

https://johnnyreilly.com/typescript-5-importsnotusedasvalues-error-eslint-consistent-type-imports#make-vs-code-prefer-type-imports

[weyert]

Wouldn't you expect the result to be:

import {useAssistants } from "../data";
import { type QueryOrView } from "../data";

[ethanresnick]

I had a similar issue earlier. When I investigated, it seemed like there were changes needed in VS Code itself to make this feature work, and those changes hadn't been released yet. But I'm not sure if that still explains it (and it's possible that that was never the explanation).

[andrewbranch]

Workaround until microsoft/vscode#201376 is merged/released: you can set this in your .vscode/settings.json:

{
  "typescript.preferTypeOnlyAutoImports": true,
}

VS Code is accidentally pulling from that instead of typescript.preferences.preferTypeOnlyAutoImports.