【VUE3】Eslint 与 Prettier 的配置

0 前言

黑马程序员视频地址：160-Vue3大事件项目-ESlint配合Prettier完成代码风格配置

关于 eslint 与 prettier 的配置，由博主查阅资料自行整理及实验得出的结论，如有错误请告知博主，十分感谢！！

1 VSCode 中的 Eslint 与 prettier 插件

VSCode中的这两个插件的作用有二，第一：自动检查代码，第二：在保存时进行自动修复

关于VSCode配置的文件 settings.json ：

黑马程序员视频中的写法已经过时：

  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },

在新版VSCode中，source.fixAll的值由布尔类型变成了字符串类型：

版本	需要无条件执行所有修复操作（如团队统一强制格式化）	完全禁用保存时的自动修复（如手动处理复杂格式问题）	精细化控制修复范围（如仅启用 ESLint 和 Prettier 的修复）
新版	always	never	explicit
旧版	true	false	无

除此之外，新版本中增加了精细化配置，如：source.fixAll.eslint

因此，代码修改为：

  // 当保存的时候，eslint自动帮我们修复错误
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

注意：source.fixAll.eslint 的默认值就是 explicit ，也就是说并不需要显示配置也可以执行自动修正，但是如果想要禁止他，则可以设置为never

这串代码是为了防止与 eslint、prettier 冲突，但是新版本中，该属性的默认值就是false，所以无需配置：

  // 保存代码，不自动格式化
  "editor.formatOnSave": false,

总结：新版本 VSCode 无需配置 settings.json 文件

2 两种方案

目前有两种方案

第一种：让 eslint 与 prettier 执行各自格式化代码

所需插件：eslint、prettier、VScode 中的 eslint 和 prettier 、eslint-config-prettier/skip-formatting

原理：

VSCode中的 eslint 默认依据自己的规则（可以显式写在 eslint.config.js 中）实时检查代码的正确性以及风格，会实时标红报错，且在保存文件时会自动修正

VSCode 中的 prettier 插件默认并不会实时提示，而是在保存文件时依据自己的规则（在 .prettierrc.json 中）进行自动修正代码风格

注意：二者同时使用可能会造成格式化冲突，因此，create-vue 脚手架在 eslint.config.js 中帮我们导入了一个插件，用来跳过 esliint 的格式化风格：

// eslint.config.js

import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfig([
  skipFormatting,
])

配置步骤：

1. 安装 ESLint 与 Prettier 插件（如果按照 1.2 的步骤进行，即执行了 pnpm i，则已经安装了 ESLint 与 Prettier 插件，否则还应手动安装）

2. 安装 VSCode 中的 eslint 与 prettier 插件

3. 在 .prettierrc.json 文件中配置想要的规则（该文件的最上方提供了参考手册以及默认配置）

第二种：将 prettier 的规则添加到 eslint 中，让 eslint 执行（黑马程序员视频中的方法）

所需插件：eslint、prettier、VSCode 中的 eslint 插件、eslint-plugin-prettier、eslint-config-prettier

详细步骤见下文：

下文中提供了两种方法，但其实本质都一样

第一种：使用基础的 eslint-plugin-prettier 与 eslint-config-prettier

第二种：使用 eslint-plugin-prettier 中的推荐规则集包，即可自动添加 eslint-plugin-prettier 与 eslint-config-prettier

由于本质是 eslint 使用 prettier 的格式化规则，因此规则需要写在 .prettierrc.json 中，黑马程序员的规则因此也需要写在该文件中，如：

// .prettierrc.json

{
 singleQuote: true, // 单引号
 semi: false, // 无分号
 printWidth: 80, // 每行宽度至多80字符
 trailingComma: 'none', // 不加对象|数组最后逗号
 endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
}

但是这样写是错误的，因为在新版中，需要给属性名加双引号，如下：

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "singleQuote": true,
  "semi": false,
  "printWidth": 80,
  "trailingComma": "none",
  "endOfLine": "auto"
}

注意：这种方案需要将脚手架自动导入的插件注释掉，即@vue/eslint-config-prettier/skip-formatting，或者将新的配置写在最后，以此来覆盖掉此插件

3 eslint.config.js

扁平配置（eslint.config.js）的版本时间线

8.21.0 版本（2022 年 9 月）：官方首次引入扁平配置格式（eslint.config.js），作为可选的新配置方式，此时旧的 .eslintrc 格式仍为默认，用户可自主选择是否迁移。

9.0.0 版本（主要版本更新）：官方将扁平配置设为默认配置格式，同时弃用旧的 .eslintrc 格式（不再自动搜索旧格式文件）。若需继续使用旧格式，需显式设置环境变量 ESLINT_USE_FLAT_CONFIG=false。

黑马程序员使用的配置是老版本的，此处将教授如何进行新版本的配置

4 eslint-plugin-prettier 插件

此插件的作用是将 Prettier 的格式化规则作为 ESLint 的规则来运行，配置如下：

// eslint.config.js

// ...

import prettierPlugin from 'eslint-plugin-prettier'

export default defineConfig([
  // ...
  {
    plugins: {
      // 插件名作为键，值为插件模块（通过 import 引入）
      prettier: prettierPlugin,
    },
    rules: {
      // 使用插件提供的规则（格式：`插件名/规则名`）
      'prettier/prettier': 'error',
    },
  },

])

以上为基础用法，官方还提供了一个推荐规则集，配置方法如下：

// eslint.config.js

import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'

export default defineConfig([
  // ...
  eslintPluginPrettierRecommended,

])

这将：
• 启用规则。prettier/prettier
• 禁用此插件有问题的 arrow-body-style and prefer-arrow-callback 规则 - 请参阅下面的原因。
• 启用配置 eslint-config-prettier，这将关闭与 Prettier 冲突的 ESLint 规则。

（这是从GitHub - prettier/eslint-plugin-prettier：用于 Prettier 格式的 ESLint 插件截来的）

5 eslint-config-prettier 插件

该插件的作用是关闭所有与 Prettier 冲突的 ESLint 规则

除了上述的规则集外，也可以选择手动配置 eslint-config-prettier 插件

常与 1.3.4 中的第一种基础用法相配合，即关闭 eslint 规则，并使用 prettier 规则

import eslintConfigPrettier from "eslint-config-prettier/flat";

export default [
  eslintConfigPrettier,
];

解答：eslint-config-prettier/flat 中的 flat 是专门为扁平配置（eslint.config.js）提供的版本

6 安装插件命令

由此可见，无论是选择 1.3.2 中的第二种方法还是 1.3.2 中的第一种方法与 1.3.3 所结合的方案，都需要安装 eslint-plugin-prettier 与 eslint-config-prettier 插件

pnpm install --save-dev eslint-plugin-prettier eslint-config-prettier

7 其他配置

在黑马程序员的视频中，还提供了两种额外配置，即

vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

直接在 eslint.config.js 中配置即可，配置位置如下：

// eslint.config.js

import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'

export default defineConfig([
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

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

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  skipFormatting,
  {
    rules: {
      // 使用插件提供的规则（格式：`插件名/规则名`）
      'vue/multi-word-component-names': [
        'warn',
        {
          ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
        }
      ],
      'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
      // 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。
      'no-undef': 'off'
    }
  },
])