Vue.js ESLint 插件完全指南：从安装到高级配置

Vue.js ESLint 插件完全指南：从安装到高级配置

eslint-plugin-vue Official ESLint plugin for Vue.js 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-vue

前言

在现代 Vue.js 开发中，代码规范和质量控制是不可或缺的环节。eslint-plugin-vue 作为 Vue.js 官方的 ESLint 插件，专门为 Vue 单文件组件(SFC)提供代码检查能力。本文将全面介绍该插件的使用方法，帮助开发者建立规范的 Vue.js 代码检查工作流。

环境准备与安装

系统要求

在开始使用前，请确保满足以下环境要求：

• ESLint 版本：8.57.0 及以上或 9.0.0 及以上
• Node.js 版本：18.18.0 及以上、20.9.0 及以上或 21.1.0 及以上

安装方式

根据项目使用的包管理器选择以下安装方式：

使用 npm：

npm install --save-dev eslint eslint-plugin-vue

使用 yarn：

yarn add -D eslint eslint-plugin-vue vue-eslint-parser globals

配置指南

现代配置方式 (eslint.config.js)

ESLint v9 及以上版本推荐使用 eslint.config.js 文件进行配置。这种扁平化配置方式更加清晰和灵活。

基础配置示例：

import pluginVue from 'eslint-plugin-vue'
import globals from 'globals'

export default [
  ...pluginVue.configs['flat/recommended'],
  {
    rules: {
      // 自定义规则配置
    },
    languageOptions: {
      sourceType: 'module',
      globals: {
        ...globals.browser
      }
    }
  }
]

预定义配置集

插件提供了多个预定义的配置集，可根据项目需求选择：

Vue 3.x 项目配置

• flat/base：基础解析配置
• flat/essential：防止错误的必要规则
• flat/strongly-recommended：提升代码可读性的强推荐规则
• flat/recommended：社区最佳实践推荐规则

Vue 2.x 项目配置

• flat/vue2-base：Vue 2 基础解析配置
• flat/vue2-essential：Vue 2 防止错误的必要规则
• flat/vue2-strongly-recommended：Vue 2 强推荐规则
• flat/vue2-recommended：Vue 2 社区推荐规则

全局变量配置

根据项目运行环境配置全局变量：

浏览器端应用：

{
  languageOptions: {
    globals: {
      ...globals.browser
    }
  }
}

服务端渲染(SSR)应用：

{
  languageOptions: {
    globals: {
      ...globals['shared-node-browser']
    }
  }
}

与 TypeScript 和 Prettier 集成

现代前端项目通常需要与 TypeScript 和 Prettier 配合使用，以下是集成配置示例：

import eslint from '@eslint/js'
import eslintConfigPrettier from 'eslint-config-prettier'
import eslintPluginVue from 'eslint-plugin-vue'
import globals from 'globals'
import typescriptEslint from 'typescript-eslint'

export default typescriptEslint.config(
  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
  {
    extends: [
      eslint.configs.recommended,
      ...typescriptEslint.configs.recommended,
      ...eslintPluginVue.configs['flat/recommended'],
    ],
    files: ['**/*.{ts,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
      parserOptions: {
        parser: typescriptEslint.parser,
      },
    },
    rules: {
      // 自定义规则
    },
  },
  eslintConfigPrettier
)

常见问题解决方案

自定义解析器配置

当需要使用 Babel 或 TypeScript 解析器时，必须保持 vue-eslint-parser 作为主解析器：

{
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  }
}

组件识别机制

插件通过以下方式识别 Vue 组件：

• Vue.component()/Vue.extend() 调用
• defineComponent() 使用
• .vue 文件中的 export default
• 使用 // @vue/component 注释标记的对象

模板中的注释禁用规则

在模板中可以使用 HTML 注释临时禁用规则：

<template>
  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
  <div a="1" b="2" c="3" d="4"></div>
</template>

编辑器集成配置

VS Code 配置

在 .vscode/settings.json 中添加：

{
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "vetur.validation.template": false
}

其他编辑器

• Sublime Text：通过 SublimeLinter-eslint 插件支持
• Atom：在 linter-eslint 设置中添加 text.html.vue 作用域
• WebStorm/IntelliJ IDEA：在设置中启用 ESLint 集成

最佳实践建议

1. 对于新项目，优先使用 eslint.config.js 配置方式
2. 根据项目使用的 Vue 版本选择对应的配置集
3. 与 Prettier 配合使用时，确保 eslint-config-prettier 最后加载
4. 使用 <script setup> 语法时，确保 vue-eslint-parser 版本在 9.0.0 以上
5. 定期检查插件更新，获取对新 Vue 特性的支持

通过合理配置 eslint-plugin-vue，可以显著提升 Vue.js 项目的代码质量和团队协作效率。本文介绍的内容涵盖了从基础安装到高级集成的各个方面，开发者可根据实际项目需求选择合适的配置方案。

eslint-plugin-vue Official ESLint plugin for Vue.js 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-vue