Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 265 Commits
.github		.github
examples		examples
src		src
test		test
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
renovate.json		renovate.json
tsconfig.json		tsconfig.json

Repository files navigation

@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 bycreate-vue setupsand is not meant for outside use (it can be used but some adaptationson the user side might be needed - for details see the config file).

A part of its design is that this config may implicitly depend onother parts ofcreate-vue setups, such aseslint-plugin-vue beingextended 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 thecorresponding README for more usage instructions.

Installation

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

Please also make sure that you havetypescript andeslint installed.

Usage

Because of the complexity of the configurations, this package exports several utilities:

defineConfigWithVueTs, a utility function whose type signature is the same as theconfig function fromtypescript-eslint, but will modify the given ESLint config to work with Vue.js + TypeScript.
vueTsConfigs, contains all theshared configurations fromtypescript-eslint (in camelCase, e.g.vueTsConfigs.recommendedTypeChecked), and applies to.vue files in addition to TypeScript files.
a Vue-specific config factory:configureVueProject({ scriptLangs, rootDir }). More info below.

Minimal Setup

// eslint.config.mjsimportpluginVuefrom'eslint-plugin-vue'import{defineConfigWithVueTs,vueTsConfigs,}from'@vue/eslint-config-typescript'exportdefaultdefineConfigWithVueTs(pluginVue.configs['flat/essential'],vueTsConfigs.recommended,)

The above configuration enablesthe essential rules for Vue 3 andthe recommended rules for TypeScript.

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

Advanced Setup

// eslint.config.mjsimportpluginVuefrom'eslint-plugin-vue'import{defineConfigWithVueTs,vueTsConfigs,configureVueProject,}from'@vue/eslint-config-typescript'configureVueProject({// Whether to parse TypeScript syntax in Vue templates.// Defaults to `true`.// Setting it to `false` could improve performance.// But TypeScript syntax in Vue templates will then lead to syntax errors.// Also, type-aware rules won't be applied to expressions in templates in that case.tsSyntaxInTemplates:true,// Optional: specify the script langs in `.vue` files// Defaults to `['ts']`.scriptLangs:['ts',// [!DISCOURAGED]// Include 'js' 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',// [!STRONGLY DISCOURAGED]// Include 'tsx' to allow `<script lang="tsx">` blocks.// This would be in conflict with all type-aware rules.'tsx',// [!STRONGLY DISCOURAGED]// Include 'jsx' to allow `<script lang="jsx">` blocks.// This would be in conflict with all type-aware rules and may result in false positives.'jsx',],// <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,})exportdefaultdefineConfigWithVueTs(pluginVue.configs["flat/essential"],// We STRONGLY RECOMMEND you to start with `recommended` or `recommendedTypeChecked`.// But if you are determined to configure all rules by yourself,// you can start with `base`, and then turn on/off the rules you need.vueTsConfigs.base,)

Linting with Type Information

Sometypescript-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 therecommendedTypeChecked configuration and then turn on/off the rules you need.

// eslint.config.mjsimportpluginVuefrom'eslint-plugin-vue'import{defineConfigWithVueTs,vueTsConfigs,}from'@vue/eslint-config-typescript'exportdefaultdefineConfigWithVueTs(pluginVue.configs['flat/essential'],vueTsConfigs.recommendedTypeChecked)

Use As a Normal Shared ESLint Config (Not Recommended)

You can use this package as a normal ESLint config, without thedefineConfigWithVueTs helper. But in this case, overriding the rules for.vue files would be more difficult and comes with many nuances. Please be cautious.

You can checkthe documentation for 14.1 and earlier versions for more information.