@vue/eslint-config-typescript

ESLint configuration for Vue 3 + TypeScript projects.

See @typescript-eslint/eslint-plugin for available rules.

This config is specifically designed to be used by create-vue setups and is not meant for outside use (it can be used but some adaptations on the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend on other parts of create-vue setups, such as eslint-plugin-vue being extended in the same resulting config.

[!NOTE] The current version doesn't support the legacy .eslintrc* configuration format. For that you need to use version 13 or earlier. See the corresponding README for more usage instructions.

Installation

1npm add --dev @vue/eslint-config-typescript

Please also make sure that you have typescript and eslint installed.

Usage

Because of the complexity of this config, it is exported as a factory function that takes an options object and returns an ESLint configuration object.

Minimal Setup

1// eslint.config.mjs
2import pluginVue from "eslint-plugin-vue";
3import vueTsEslintConfig from "@vue/eslint-config-typescript";
4
5export default [
6  ...pluginVue.configs["flat/essential"],
7  ...vueTsEslintConfig(),
8]

The above configuration enables the essential rules for Vue 3 and the recommended rules for TypeScript.

All the <script> blocks in .vue files MUST be written in TypeScript (should be either <script setup lang="ts"> or <script lang="ts">).

Advanced Setup

1// eslint.config.mjs
2import pluginVue from "eslint-plugin-vue";
3import vueTsEslintConfig from "@vue/eslint-config-typescript";
4
5export default [
6  ...pluginVue.configs["flat/essential"],
7
8  ...vueTsEslintConfig({
9    // Optional: extend additional configurations from `typescript-eslint`.
10    // Supports all the configurations in
11    // https://typescript-eslint.io/users/configs#recommended-configurations
12    extends: [
13      // By default, only the recommended rules are enabled.
14      "recommended",
15      // You can also manually enable the stylistic rules.
16      // "stylistic",
17
18      // Other utility configurations, such as `eslintRecommended`, (note that it's in camelCase)
19      // are also extendable here. But we don't recommend using them directly.
20    ],
21
22    // Optional: specify the script langs in `.vue` files
23    // Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
24    supportedScriptLangs: {
25      ts: true,
26
27      // [!DISCOURAGED]
28      // Set to `true` to allow plain `<script>` or `<script setup>` blocks.
29      // This might result-in false positive or negatives in some rules for `.vue` files.
30      // Note you also need to configure `allowJs: true` and `checkJs: true`
31      // in corresponding `tsconfig.json` files.
32      js: false,
33
34      // [!STRONGLY DISCOURAGED]
35      // Set to `true` to allow `<script lang="tsx">` blocks.
36      // This would be in conflict with all type-aware rules.
37      tsx: false,
38
39      // [!STRONGLY DISCOURAGED]
40      // Set to `true` to allow `<script lang="jsx">` blocks.
41      // This would be in conflict with all type-aware rules and may result in false positives.
42      jsx: false,
43    },
44
45    // <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
46    // Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
47    // You may need to set this to the root directory of your project if you have a monorepo.
48    // This is useful when you allow any other languages than `ts` in `.vue` files.
49    // Our config helper would resolve and parse all the `.vue` files under `rootDir`,
50    // and only apply the loosened rules to the files that do need them.
51    rootDir: import.meta.dirname,
52  })
53]

Linting with Type Information

Some typescript-eslint rules utilizes type information to provide deeper insights into your code. But type-checking is a much slower process than linting with only syntax information. It is not always easy to set up the type-checking environment for ESLint without severe performance penalties.

So we don't recommend you to configure individual type-aware rules and the corresponding language options all by yourself. Instead, you can start by extending from the recommendedTypeChecked configuration and then turn on/off the rules you need.

As of now, all the rules you need to turn on must appear before calling ...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }), and all the rules you need to turn off must appear after calling it.

1// eslint.config.mjs
2import pluginVue from "eslint-plugin-vue";
3import vueTsEslintConfig from "@vue/eslint-config-typescript";
4
5export default [
6  ...pluginVue.configs["flat/essential"],
7
8  {
9    files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
10    rules: {
11      // Turn on other rules that you need.
12      '@typescript-eslint/require-array-sort-compare': 'error'
13    }
14  },
15  ...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),
16  {
17    files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
18    rules: {
19      // Turn off the recommended rules that you don't need.
20      '@typescript-eslint/no-redundant-type-constituents': 'off',
21    }
22  }
23]

Further Reading

• All the extendable configurations from typescript-eslint.
• All the available rules from typescript-eslint.

With Other Community Configs

Work-In-Progress.

If you are following the standard or airbnb style guides, don't manually extend from this package. Please use @vue/eslint-config-standard-with-typescript or @vue/eslint-config-airbnb-with-typescript instead.