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.
npm add --dev @vue/eslint-config-typescriptPlease also make sure that you have typescript and eslint installed.
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.
// eslint.config.mjs
import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";
export default [
...pluginVue.configs["flat/essential"],
...vueTsEslintConfig(),
]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">).
// eslint.config.mjs
import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";
export default [
...pluginVue.configs["flat/essential"],
...vueTsEslintConfig({
// Optional: extend additional configurations from `typescript-eslint`.
// Supports all the configurations in
// https://typescript-eslint.io/users/configs#recommended-configurations
extends: [
// By default, only the recommended rules are enabled.
"recommended",
// You can also manually enable the stylistic rules.
// "stylistic",
// Other utility configurations, such as `eslintRecommended`, (note that it's in camelCase)
// are also extendable here. But we don't recommend using them directly.
],
// Optional: specify the script langs in `.vue` files
// Defaults to `{ ts: true, js: false, tsx: false, jsx: false }`
supportedScriptLangs: {
ts: true,
// [!DISCOURAGED]
// Set to `true` to allow plain `<script>` or `<script setup>` blocks.
// This might result-in false positive or negatives in some rules for `.vue` files.
// Note you also need to configure `allowJs: true` and `checkJs: true`
// in corresponding `tsconfig.json` files.
js: false,
// [!STRONGLY DISCOURAGED]
// Set to `true` to allow `<script lang="tsx">` blocks.
// This would be in conflict with all type-aware rules.
tsx: false,
// [!STRONGLY DISCOURAGED]
// Set to `true` to allow `<script lang="jsx">` blocks.
// This would be in conflict with all type-aware rules and may result in false positives.
jsx: false,
},
// <https://github.com/vuejs/eslint-plugin-vue/issues/1910#issuecomment-1819993961>
// Optional: the root directory to resolve the `.vue` files, defaults to `process.cwd()`.
// You may need to set this to the root directory of your project if you have a monorepo.
// This is useful when you allow any other languages than `ts` in `.vue` files.
// Our config helper would resolve and parse all the `.vue` files under `rootDir`,
// and only apply the loosened rules to the files that do need them.
rootDir: import.meta.dirname,
})
]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.
// eslint.config.mjs
import pluginVue from "eslint-plugin-vue";
import vueTsEslintConfig from "@vue/eslint-config-typescript";
export default [
...pluginVue.configs["flat/essential"],
{
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
rules: {
// Turn on other rules that you need.
'@typescript-eslint/require-array-sort-compare': 'error'
}
},
...vueTsEslintConfig({ extends: ['recommendedTypeChecked'] }),
{
files: ['**/*.ts', '**/*.tsx', '**/*.mts', '**/*.vue'],
rules: {
// Turn off the recommended rules that you don't need.
'@typescript-eslint/no-redundant-type-constituents': 'off',
}
}
]- All the extendable configurations from
typescript-eslint. - All the available rules from
typescript-eslint.
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.