企业官网建站步骤长沙网站seo优化
目录
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 的修复） |
| 新版 | 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 中，黑马程序员的规则因此也需要写在该文件中，如：
// .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.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 install --save-dev eslint-plugin-prettier eslint-config-prettier7 其他配置
在黑马程序员的视频中，还提供了两种额外配置，即
-
vue组件名称多单词组成（忽略index.vue）
-
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 参考资料
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.