typescript.preferences.preferTypeOnlyAutoImports not working with TypeScript 5.3? #56832

🔎 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 typescript@5.3.3 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