Skip to main content

Framework FAQs

I use a framework (like Vue) that requires custom file extensions​

In order to use extra file types you'll need to provide parserOptions.extraFileExtensions to specify an array of non-TypeScript extensions to allow.

note

See Changes to extraFileExtensions with projectService to avoid performance issues.

eslint.config.mjs
export default defineConfig({
  // If you're using a files/extends setup, be sure to include your extra file
  // type here, too:
  files: ['**/*.{js,ts}'],
  files: ['**/*.{js,ts,vue}'],
  // ... the rest of your config ...
  languageOptions: {
    parserOptions: {
      extraFileExtensions: ['.vue'],
      projectService: true,
    },
  },
});

If you forget to include extraFileExtensions: ['.vue'], you'll likely see error messages like "You should add parserOptions.extraFileExtensions to your config" appearing when ESLint attempts to run on the extra file type.

I am running into errors when parsing TypeScript in my .vue files​

If you are running into issues parsing .vue files, it might be because parsers like vue-eslint-parser are required to parse .vue files. In this case you can move @typescript-eslint/parser inside parserOptions and use vue-eslint-parser as the top level parser.

eslint.config.mjs
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';
import vueParser from 'vue-eslint-parser';

export default defineConfig(
  // ... the rest of your config ...
  {
    languageOptions: {
      parser: tseslint.parser,
      parser: vueParser,
      parserOptions: {
        parser: tseslint.parser,
        sourceType: 'module',
      },
    },
  },
);

The parserOptions.parser option can also specify an object to specify multiple parsers. See the vue-eslint-parser usage guide for more details.