Framework FAQs

I use a framework (like Vue) that requires custom file extensions, and I get errors like "You should add parserOptions.extraFileExtensions to your config"

You can use parserOptions.extraFileExtensions to specify an array of non-TypeScript extensions to allow, for example:

note

See Changes to extraFileExtensions with projectService to avoid performance issues.

Flat Config

eslint.config.mjs

export default tseslint.config(
  // ... the rest of your config ...
  {
    languageOptions: {
      parserOptions: {
        extraFileExtensions: ['.vue'],
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
);

Legacy Config

.eslintrc.js

module.exports = {
  // ... the rest of your config ...
  parserOptions: {
    extraFileExtensions: ['.vue'],
    projectService: true,
    tsconfigRootDir: __dirname,
  },
};

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.

Flat Config

eslint.config.mjs

import tseslint from 'typescript-eslint';
import vueParser from 'vue-eslint-parser';

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

Legacy Config

.eslintrc.js

module.exports = {
  // ... the rest of your config ...
  parser: '@typescript-eslint/parser',
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    extraFileExtensions: ['.vue'],
  },
};

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