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!
I was missing a small piece of config, which is mentioned on the eslint-plugin-vue documentation:
languageOptions: {
parserOptions: {
parser: '@typescript-eslint/parser'
}
}