【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 ：
黑马步调员视频中的写法已颠末时：
"editor.codeActionsOnSave": {
"source.fixAll": true
}, 在新版VSCode中，source.fixAll的值由布尔类型变成了字符串类型：
版本必要无条件执行所有修复操作（如团队同一逼迫格式化）完全禁用生存时的自动修复（如手动处置惩罚复杂格式问题）精致化控制修复范围（如仅启用 ESLint 和 Prettier 的修复）新版alwaysneverexplicit旧版truefalse无
除此之外，新版本中增长了精致化配置，如：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 解构的校验
//
页:
[1]