@vue/eslint-config-typescript

What is @vue/eslint-config-typescript?

@vue/eslint-config-typescript is an ESLint configuration package specifically designed for Vue.js projects that use TypeScript. It provides a set of rules and configurations to ensure code quality and consistency in Vue.js applications written in TypeScript.

What are @vue/eslint-config-typescript's main functionalities?

TypeScript Support

This configuration extends the recommended rules from both Vue and TypeScript ESLint plugins, ensuring that your TypeScript code in Vue components is linted according to best practices.

{"extends":["plugin:vue/vue3-essential","plugin:@typescript-eslint/recommended","@vue/typescript/recommended"],"parserOptions":{"ecmaVersion":2020,"sourceType":"module"}}

Vue Specific Rules

Includes Vue-specific linting rules to catch common issues in Vue components, such as unused variables in script setup and unused components.

{"rules":{"vue/script-setup-uses-vars":"error","vue/no-unused-components":"warn"}}

TypeScript Specific Rules

Provides TypeScript-specific linting rules to catch issues like unused variables and to enforce or relax certain TypeScript practices.

{"rules":{"@typescript-eslint/no-unused-vars":["error",{"argsIgnorePattern":"^_"}],"@typescript-eslint/explicit-function-return-type":"off"}}

Other packages similar to @vue/eslint-config-typescript

@typescript-eslint/eslint-plugin

This package provides a set of TypeScript-specific linting rules for ESLint. It is more general-purpose compared to @vue/eslint-config-typescript, which is tailored specifically for Vue.js projects.

eslint-plugin-vue

This plugin provides Vue.js specific linting rules for ESLint. While it supports Vue.js, it does not include TypeScript-specific configurations, making it less comprehensive for projects that use both Vue.js and TypeScript.

eslint-config-airbnb-typescript

This package extends Airbnb's ESLint configuration to support TypeScript. It is a good choice for projects that follow Airbnb's style guide but does not include Vue.js specific rules.

README

@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

npm 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

// 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">).

Advanced Setup

// 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,
  })
]

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.

// 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',
    }
  }
]

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.