Vue 3 ESLint

In modern frontend development, code quality serves as the cornerstone of any project. Vue 3, being one of the most popular progressive frameworks today, relies heavily on robust coding standard enforcement tools—specifically ESLint (JavaScript Standard Style)—to maintain ecosystem integrity. This article delves into how to correctly integrate ESLint into Vue 3 projects, resolve common configuration conflicts, and establish an efficient, maintainable code review process.
While the native eslint-plugin-vue provides foundational support, standard configurations often fall short when handling complex Vue 3 features such as the Composition API, TypeScript type inference, or new syntax sugars. The official Vue recommendation is to combine @vue/eslint-config-prettier with a custom .eslintrc.js file. This approach eliminates potential conflicts between Prettier and ESLint while introducing enhanced rules tailored specifically for Vue 3 features.

Core Configuration Steps

To enable and optimize ESLint within a project, you must first install the necessary dependencies:

  • eslint: The core engine for JavaScript code checking.
  • @vue/eslint-config-prettier: Ensures the Prettier formatter takes precedence over formatting rules to avoid conflicts with ESLint checks.
  • eslint-plugin-vue: Provides parsing and validation capabilities for Vue Single File Components (.vue).

The installation commands are as follows:

npm install --save-dev eslint @typescript-eslint/parser @vue/eslint-config-prettier prettier eslint-plugin-vue

Next, you need to create or modify the .eslintrc.js (or eslint.config.js) file. For Vue 3 projects, the flattened configuration format (ESLint v9+) is recommended, though the traditional object structure remains widely supported and easy to understand:

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true, // Vue 3 is based on the ES2021 standard
  },
  extends: [
    'plugin:@vue/essential', // Core rules covering syntax, security, etc.
    'plugin:@vue/vue3-recommended', // Recommended rule set for Vue 3
    '@typescript-eslint/recommended-type-checked' // If you are using TypeScript
  ],
  parserOptions: {
    ecmaVersion: 12, // Supports the latest ES features
    sourceType: 'module',
  },
};

Resolving Common Conflicts: Prettier vs ESLint

In Vue 3 development, maintaining consistent code style is crucial. Many developers encounter the dilemma of "formatting errors," where code passes formatting checks but triggers linting errors. This occurs because Prettier (the auto-formatter) and ESLint (the rule checker) may have different standards for the same line of code. To resolve this, @vue/eslint-config-prettier must be added to the end of the extends list.

This plugin applies Prettier's formatting rules before the linter runs, ensuring that ESLint does not throw warnings or errors based on formatting issues (such as quote types or whitespace counts). This not only enhances the developer experience but also guarantees consistency in team code style.

Integration Challenges in TypeScript Environments

As the integration between Vue 3 and TypeScript (TS) becomes increasingly tight, type checking has become a major highlight of the project. However, ESLint does not include a complete set of TS type-checking rules by default. To fully leverage the strengths of TypeScript, we need to introduce plugin configurations related to @typescript-eslint.

In .eslintrc.js, in addition to the Vue recommended extensions mentioned above, you should also add:

  • 'plugin:@typescript-eslint/recommended-type-checked': Provides strict type-checking suggestions.
  • 'plugin:@typescript-eslint/strict-type-checked': Enables a more aggressive strict mode (e.g., prohibiting any types).

Furthermore, ensure that the corresponding parser @typescript-eslint/parser is installed; otherwise, ESLint will be unable to correctly identify the syntax structure within .ts files. An example configuration is provided below:

// .eslintrc.js
{
  // ... other configurations ...
  extends: [/* Vue rules */, 'plugin:@typescript-eslint/recommended-type-checked'],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    project: './tsconfig.json' // Reference the TS config file to retrieve type information
  }
}

Automated Integration and CI/CD Pipeline Configuration

Running ESLint locally is insufficient; true code quality assurance comes from Continuous Integration (CI) pipelines. On platforms like GitHub Actions, GitLab CI, or Jenkins, you can automate checks by writing .github/workflows/eslint.yml (or the corresponding file for your platform).

A typical automated workflow should include the following steps:

  1. Install Dependencies: Checkout the code and install all Node modules.
  2. Execute Lint: Call npm run lint. This script is usually encapsulated by husky or a custom npm script to automatically intercept non-compliant code before commits.
  3. Report Results: If errors are found (exit code non-zero), block the Pull Request from merging.

An example snippet of the GitHub Actions YAML configuration follows:

name: ESLint Check
on: [push, pull_request]
jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with: { node-version: '18.x' }
      - run: npm ci
      - run: npm run lint

Summary and Outlook

By configuring ESLint appropriately, Vue 3 developers can build codebases that adhere to both modern JavaScript/TypeScript standards and the specific characteristics of the Vue framework. From enabling basic rules to resolving Prettier conflicts and deeply integrating TypeScript with CI/CD automation, these steps form a complete engineering loop.

With the iteration of Vue 3.4+ versions and the widespread adoption of the Composition API, the ESLint rule set continues to evolve. Developers should keep an eye on official documentation, update plugin versions promptly, and leverage the latest fixes and optimizations. The ultimate goal is to establish a "zero-error" submission standard, allowing teams to focus on business logic innovation and implementation rather than getting bogged down in endless style debates.