【VUE3】Eslint 与 Prettier 的配置

目次

0 媒介
1 VSCode 中的 Eslint 与 prettier 插件 
2 两种方案
3 eslint.config.js
4 eslint-plugin-prettier 插件
5 eslint-config-prettier 插件
6 安装插件命令
7 其他配置
8 参考资料 

---

0 媒介

黑马步调员视频地点：160-Vue3大事件项目-ESlint共同Prettier完成代码风格配置
关于 eslint 与 prettier 的配置，由博主查阅资料自行整理及实验得出的结论，如有错误请告知博主，十分感谢！！ 

---

1 VSCode 中的 Eslint 与 prettier 插件 

VSCode中的这两个插件的作用有二，第一：自动检查代码，第二：在生存时进行自动修复 
关于VSCode配置的文件 settings.json ：
黑马步调员视频中的写法已颠末时：

1.   "editor.codeActionsOnSave": {
2.     "source.fixAll": true
3.   },

复制代码

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

版本	必要无条件执行所有修复操作（如团队同一逼迫格式化）	完全禁用生存时的自动修复（如手动处置惩罚复杂格式问题）	精致化控制修复范围（如仅启用 ESLint 和 Prettier 的修复）
新版	always	never	explicit
旧版	true	false	无

除此之外，新版本中增长了精致化配置，如：source.fixAll.eslint
因此，代码修改为： 

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

复制代码

留意：source.fixAll.eslint 的默认值就是 explicit ，也就是说并不必要体现配置也可以执行自动修正，但是如果想要克制他，则可以设置为never
这串代码是为了防止与 eslint、prettier 冲突，但是新版本中，该属性的默认值就是false，所以无需配置：

1.   // 保存代码，不自动格式化
2.   "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 的格式化风格：

1. // eslint.config.js
3. import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
5. export default defineConfig([
6.   skipFormatting,
7. ])

复制代码

配置步骤：
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 中，黑马步调员的规则因此也必要写在该文件中，如：

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

复制代码

但是如许写是错误的，由于在新版中，必要给属性名加双引号，如下：

1. {
2.   "$schema": "https://json.schemastore.org/prettierrc",
3.   "singleQuote": true,
4.   "semi": false,
5.   "printWidth": 80,
6.   "trailingComma": "none",
7.   "endOfLine": "auto"
8. }

复制代码

留意：这种方案必要将脚手架自动导入的插件注释掉，即@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 的规则来运行，配置如下：

1. // eslint.config.js
3. // ...
5. import prettierPlugin from 'eslint-plugin-prettier'
7. export default defineConfig([
8.   // ...
9.   {
10.     plugins: {
11.       // 插件名作为键，值为插件模块（通过 import 引入）
12.       prettier: prettierPlugin,
13.     },
14.     rules: {
15.       // 使用插件提供的规则（格式：`插件名/规则名`）
16.       'prettier/prettier': 'error',
17.     },
18.   },
20. ])

复制代码

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

1. // eslint.config.js
3. import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
5. export default defineConfig([
6.   // ...
7.   eslintPluginPrettierRecommended,
9. ])

复制代码

这将：
• 启用规则。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 规则

1. import eslintConfigPrettier from "eslint-config-prettier/flat";
3. export default [
4.   eslintConfigPrettier,
5. ];

复制代码

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

---

6 安装插件命令

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

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

复制代码

---

7 其他配置

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

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

直接在 eslint.config.js 中配置即可，配置位置如下：
[code]// 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 解构的校验
      //