@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-config-typescript for Vue

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

This config is specifically designed to be used by @vue/cli & 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 @vue/cli/create-vue setups, such as eslint-plugin-vue being extended in the same resulting config.

Installation

In order to work around a known limitation in ESLint, we recommend you to use this package alongside @rushstack/eslint-patch, so that you don't have to install too many dependencies:

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

Usage

This package comes with 2 rulesets.

@vue/eslint-config-typescript

This ruleset is the base configuration for Vue-TypeScript projects. Besides setting the parser and plugin options, it also turns off several conflicting rules in the eslint:recommended ruleset. So when used alongside other sharable configs, this config should be placed at the end of the extends array.

An example .eslintrc.cjs:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript'
  ]
}

@vue/eslint-config-typescript/recommended

This is extended from the @typescript-eslint/recommended ruleset, which is an opinionated ruleset. See the original documentation for more information.

Some of its rules, however, might conflict with prettier. So when used alongside other sharable configs, this config should be placed after all other configs except for the one from @vue/eslint-config-prettier or eslint-plugin-prettier in the extends array.

An example .eslintrc.cjs:

/* eslint-env node */
require("@rushstack/eslint-patch/modern-module-resolution")

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier'
  ]
}

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.