typescriptvuejs3eslinttypescript-eslint

How to make ESLint recognize type imports


I'm working on a large Vue3 app that has recently had ESLint + lint-staged added to it.

ESLint is giving me a parser error for any type imports.

So imports like this are fine:

import { Something } from 'whatever';

But imports like this elicit ESLint parser errors:

import type { Something } from 'whatever';

I'm using ESLint 9.12.0 with the new flat config, typescript-eslint 8.15.0, and TypeScript 5.6.3

Type imports are not particularly new so I'm surprised that this doesn't just work.

Here's my ESLint config:

export default tseslint.config(
    eslint.configs.recommended,
    tseslint.configs.recommended,
    ...pluginVue.configs['flat/recommended'],
);

I tried using the tsParser from @typescript-eslint/parser and adding this to my config, as recommended by the answer to another SO question with a similar (but not identical) parser-related ESLint question:

languageOptions: { 
    parser: tsParser,  
    parserOptions: {  
        ecmaFeatures: { 
            modules: true
        },
        ecmaVersion: 'latest',
        project: './tsconfig.json',
        extraFileExtensions: ['.vue']
    },
},

But I reverted that because it also just didn't seem to work - every single .vue file stopped being linted at all.

The config I've used is pretty much the default config suggested by the official TypeScript-ESLint documentation. Nothing there suggests that type-only imports won't work.

Additionally, if I remove the type part from the import with the standard config shown above, it then tells me that it has to be a type import!

So I can't use type imports for type-only imports, and I can't not use type imports for type-only imports!


Solution

  • I was missing a small piece of config, which is mentioned on the eslint-plugin-vue documentation:

    languageOptions: {
        parserOptions: {
            parser: '@typescript-eslint/parser'
        }
    }