网站导航
> 技术文档 > 【VUE3】Eslint 与 Prettier 的配置_eslint-plugin-prettier

【VUE3】Eslint 与 Prettier 的配置_eslint-plugin-prettier

网友: 技术文档 2025-08-08 07:54:48

目录

0 前言

1 VSCode 中的 Eslint 与 prettier 插件 

2 两种方案

3 eslint.config.js

4 eslint-plugin-prettier 插件

5 eslint-config-prettier 插件

6 安装插件命令

7 其他配置

8 总结

9 参考资料 

0 前言

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

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

注意：最简单的解决方案直接跳转 8 总结

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.jsimport 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 中，黑马程序员的规则因此也需要写在该文件中，如：

{ \"$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.jsimport 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 add --save-dev eslint-plugin-prettier eslint-config-prettier

7 其他配置

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

  1. vue组件名称多单词组成（忽略index.vue）

  2. props解构（关闭）

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

// eslint.config.jsimport { 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\' } },])

8 总结

快速导入默认配置： 

第一步：

使用pnpm create vue创建项目，并进入项目下载所有依赖 pnpm i

第二步：

打开vscode，下载插件Vue(Official)、ESLint

再运行以下命令安装必要包：

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

注意：有vetur、prettier的要禁用

第三步：

打开eslint.config.js文件，删除或注释掉：

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

以及下面调用的skipFormatting

添加代码：

// eslint.config.jsimport eslintPluginPrettierRecommended from \'eslint-plugin-prettier/recommended\'export default defineConfig([ // ... eslintPluginPrettierRecommended,])

第四步：

配置prettier规则

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

 至此已经可以使用

注意：

1. 因为禁用了prettier插件，因此.vscode/settings.json文件中的\"editor.defaultFormatter\": \"esbenp.prettier-vscode\"已经作废，需要注释或删除

2. 上述方法有缺陷：每次修改完.prettierc.json中的配置之后，要重启vscode才能生效（其实改一次就够了，这个缺陷相当于没有）

3. 其他配置见 7 其他配置

9 参考资料 

ESLint

Prettier

GitHub - eslint/eslint: Find and fix problems in your JavaScript code.

GitHub - prettier/prettier: Prettier is an opinionated code formatter.

GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting

GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier.

网络标签：

相关问题