终极ESLint-plugin-vue规则配置指南：从入门到精通

终极ESLint-plugin-vue规则配置指南：从入门到精通

【免费下载链接】eslint-plugin-vue Official ESLint plugin for Vue.js 项目地址: https://gitcode.com/gh_mirrors/es/eslint-plugin-vue

eslint-plugin-vue是Vue.js官方的ESLint插件，它提供了一系列规则来帮助开发者编写规范、高质量的Vue.js代码。本指南将从安装到高级配置，全面介绍如何使用eslint-plugin-vue提升你的Vue项目代码质量。

🚀 快速安装步骤

要开始使用eslint-plugin-vue，首先需要安装必要的依赖包。根据你使用的包管理器，可以选择以下命令之一：

使用npm安装

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

使用yarn安装

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

系统要求

• ESLint: ^8.57.0 || ^9.0.0
• Node.js: ^18.18.0 || ^20.9.0 || >=21.1.0

⚙️ 基础配置方法

eslint-plugin-vue支持两种配置方式：ESLint v9+推荐的eslint.config.js和传统的.eslintrc文件。

使用eslint.config.js（推荐）

对于ESLint v9+或v8.57.0及以上版本，推荐使用eslint.config.js文件：

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

export default [
  ...pluginVue.configs['flat/recommended'],
  // 如果你使用Vue.js 2.x，请使用下面的配置
  // ...pluginVue.configs['flat/vue2-recommended'],
  {
    rules: {
      // 在这里覆盖或添加规则设置
      // 'vue/no-unused-vars': 'error'
    },
    languageOptions: {
      sourceType: 'module',
      globals: {
        ...globals.browser
      }
    }
  }
]

使用.eslintrc（传统方式）

对于ESLint v8及以下版本，可以使用.eslintrc.js文件：

module.exports = {
  extends: [
    'plugin:vue/recommended',
    // 如果你使用Vue.js 2.x，请使用下面的配置
    // 'plugin:vue/vue2-recommended'
  ],
  rules: {
    // 在这里覆盖或添加规则设置
    // 'vue/no-unused-vars': 'error'
  }
}

📋 预设配置详解

eslint-plugin-vue提供了多种预设配置，以满足不同项目需求：

Vue.js 3.x配置

• flat/base: 基础配置，启用正确的ESLint解析
• flat/essential: 基础配置+防止错误或意外行为的规则
• flat/strongly-recommended: essential+提高代码可读性和开发体验的规则
• flat/strongly-recommended-error: 与strongly-recommended相同，但所有规则都设为error级别
• flat/recommended: strongly-recommended+强制执行社区默认规范的规则
• flat/recommended-error: 与recommended相同，但所有规则都设为error级别

Vue.js 2.x配置

• flat/vue2-essential: 基础配置+防止错误或意外行为的规则
• flat/vue2-strongly-recommended: vue2-essential+提高代码可读性和开发体验的规则
• flat/vue2-strongly-recommended-error: 与vue2-strongly-recommended相同，但所有规则都设为error级别
• flat/vue2-recommended: vue2-strongly-recommended+强制执行社区默认规范的规则
• flat/vue2-recommended-error: 与vue2-recommended相同，但所有规则都设为error级别

注意：默认情况下，base和essential类别的规则报告错误，其他规则报告警告。如果你希望所有规则都报告错误，可以使用带-error后缀的配置。

🔍 常用规则解析

eslint-plugin-vue提供了大量规则，下面介绍一些最常用的规则：

模板相关规则

• vue/html-indent: 控制HTML标签和属性的缩进
• vue/max-attributes-per-line: 限制每行的属性数量
• vue/html-quotes: 强制HTML属性使用一致的引号风格
• vue/html-self-closing: 控制自闭合标签的风格

脚本相关规则

• vue/script-indent: 控制