---
id: frameworks
sidebar_label: Frameworks
title: Framework FAQs
---

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## 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`](../typed-linting/Performance.mdx#changes-to-extrafileextensions-with-projectservice) to avoid performance issues.
:::

<Tabs groupId="eslint-config">
<TabItem value="Flat Config">

```js title="eslint.config.mjs"
export default defineConfig(
  // ... the rest of your config ...
  {
    languageOptions: {
      parserOptions: {
        // Add this line
        extraFileExtensions: ['.vue'],
        projectService: true,
      },
    },
  },
);
```

</TabItem>
<TabItem value="Legacy Config">

```js title=".eslintrc.js"
module.exports = {
  // ... the rest of your config ...
  parserOptions: {
    // Add this line
    extraFileExtensions: ['.vue'],
    projectService: true,
    tsconfigRootDir: __dirname,
  },
};
```

</TabItem>
</Tabs>

## 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`](https://www.npmjs.com/package/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.

<Tabs groupId="eslint-config">
<TabItem value="Flat Config">

```js title="eslint.config.mjs"
import tseslint from 'typescript-eslint';
import { defineConfig } from 'eslint/config';
// Add this line
import vueParser from 'vue-eslint-parser';

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

</TabItem>
<TabItem value="Legacy Config">

```js title=".eslintrc.js"
module.exports = {
  // ... the rest of your config ...
  // Remove this line
  parser: '@typescript-eslint/parser',
  // Add this line
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    // Add this line
    extraFileExtensions: ['.vue'],
  },
};
```

</TabItem>
</Tabs>

The `parserOptions.parser` option can also specify an object to specify multiple parsers. See the [`vue-eslint-parser` usage guide](https://eslint.vuejs.org/user-guide/#usage) for more details.
