---

前言

在 Vue 3 项目中，良好的代码风格和规范是确保代码质量和可维护性的关键。ESLint 是一个常用的 JavaScript 静态代码分析工具，可以帮助我们在开发过程中自动检测和修复常见的代码问题。本文将介绍如何根据个人开发习惯设置 Vue 3 项目中的 ESLint 推荐规则，以提高代码质量和一致性

---

以下是一些常用的 ESLint 推荐规则设置，适用于 Vue 3 项目的 ESLint 配置

1、安装依赖

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

2、配置文件

在项目根目录下创建 .eslintrc.js 文件，并添加以下内容

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
  ],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    // 在这里添加你的自定义规则
  },
};

3、ESLint 规则

常用的 ESLint 规则设置

module.exports = {
  // ...

  rules: {
    // JavaScript/ESLint 推荐的规则
    'no-console': 'warn', // 不允许使用 console.log 等
    'no-unused-vars': 'warn', // 不允许存在未使用的变量
    'no-undef': 'error', // 不允许使用未定义的变量

    // Vue/ESLint 推荐的规则
    'vue/html-indent': ['error', 2], // HTML 缩进为 2 个空格
    'vue/attribute-hyphenation': 'error', // 属性名使用连字符形式
    'vue/html-self-closing': 'off', // 关闭自闭合标签要求，根据个人或团队喜好配置
    'vue/max-attributes-per-line': ['error', {
      singleline: 3, // 单行最多 3 个属性
      multiline: {
        max: 1, // 每行最多一个属性
        allowFirstLine: false // 不允许属性出现在第一行
      }
    }],
    'vue/no-v-html': 'off', // 允许使用 v-html 指令
    'vue/no-unused-components': 'warn', // 不允许存在未使用的组件

    // TypeScript/ESLint 推荐的规则
    '@typescript-eslint/no-unused-vars': 'warn', // 不允许存在未使用的 TypeScript 变量
    '@typescript-eslint/explicit-module-boundary-types': 'off', // 允许不显式指定导出函数的返回类型
    '@typescript-eslint/no-explicit-any': 'off', // 允许使用 any 类型
  },
};

上述常用规则中的详细说明

• ‘no-console’: ‘warn’：阻止使用 console.log 等控制台输出语句，将其设置为警告级别
• ‘no-unused-vars’: ‘warn’：防止存在未使用的变量，将其设置为警告级别。这可以帮助你发现未使用的变量并进行清理
• ‘no-undef’: ‘error’：阻止使用未定义的变量，将其设置为错误级别。这可以防止拼写错误或未声明的变量导致的问题。

---

Vue 相关的规则详细说明

• ‘vue/html-indent’: [‘error’, 2]：强制 HTML 缩进为 2 个空格，以保持一致的代码风格。
• ‘vue/attribute-hyphenation’: ‘error’：要求属性名使用连字符形式，而不是驼峰式命名
• ‘vue/html-self-closing’: ‘off’：关闭自闭合标签的要求。根据个人或团队的喜好进行配置。
• ‘vue/max-attributes-per-line’: [‘error’, {…}]：限制每行属性的最大数量，以保持代码可读性。
• ‘vue/no-v-html’: ‘off’：允许使用 v-html 指令，用于将 HTML 字符串渲染为 Vue 模板。
• ‘vue/no-unused-components’: ‘warn’：防止存在未使用的组件，将其设置为警告级别

---

TypeScript 相关的规则详细说明

• ‘@typescript-eslint/no-unused-vars’: ‘warn’：防止存在未使用的 TypeScript 变量，将其设置为警告级别。
• ‘@typescript-eslint/explicit-module-boundary-types’: ‘off’：允许不显式指定导出函数的返回类型。根据个人或团队的偏好进行配置。
• ‘@typescript-eslint/no-explicit-any’: ‘off’：允许使用 any 类型。这可能在一些情况下是必要的，但应谨慎使用。

这些规则是一些常用的推荐设置，可以根据项目需求和团队规范进行自定义和调整。在配置中添加或修改规则时，建议在代码中始终保持一致性，并根据具体情况选择合适的规则级别（例如：'error'、'warn' 或 'off'）。

总结

通过设置这些 ESLint 推荐规则，我们可以在 Vue 3 项目中提高代码质量和可维护性。然而，个人或团队的开发习惯可能有所不同，因此在设置规则时应根据实际需求进行自定义和调整。保持一致的代码风格和规范将有助于提高团队合作和代码质量