)
目录
1.安装 Prettier
VSCode添加配置
Prettier
ESlint与Prettier冲突报错
随着前端开发技术的快速发展，代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 Prettier 检查代码规范并自动格式化 Vue.js 代码，包括安装插件、配置 Prettier 以及 VSCode 设置的具体步骤。通过这些工具，可以显著提升编码效率和代码质量。
1.安装 Prettier
首先在vscode插件商店里搜索Prettier - Code formatter安装：
VSCode添加配置
安装并配置完成Prettier - Code formatter后，我们继续回到 VSCode 进行扩展设置：
settings.json配置文件
"editor.defaultFormatter": "esbenp.prettier-vscode",
{ "editor.formatOnSave": true, // 保存时自动格式化 "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" // 保存时自动修复 ESLint 报错 } }添加工作区建议
Prettier
ESLint的 主要优势在于 代码的风格检查并给出提示 ，而在代码格式化这一块Prettier做的更加专业，因此我们经常将ESLint结合Prettier一起使用。
pnpm i prettier -D在根目录新建文件 prettier.config.js
export default { // 使用单引号 (true：单引号，false：双引号) singleQuote: false, // 结尾不用分号 (true：有，false：没有) semi: false, // 缩进制表符宽度 | 空格数 tabWidth: 2, // 多行时尽可能打印尾随逗号 可选值"<none|es5|all>" trailingComma: "none", // 使用制表符而不是空格缩进行 (true：制表符，false：空格) useTabs: false, // 换行符使用 lf 结尾是 可选值 "<auto|lf|crlf|cr>" endOfLine: "auto", // 指定最大换行长度 printWidth: 120, // 在对象字面量中决定是否将属性名用引号括起来 可选值 "<as-needed|consistent|preserve>" quoteProps: "as-needed", // 在JSX中使用单引号而不是双引号 (true：单引号，false：双引号) jsxSingleQuote: false, // 在对象，数组括号与文字之间加空格 "{ foo: bar }" (true：有，false：没有) bracketSpacing: true, // 将 > 多行元素放在最后一行的末尾，而不是单独放在下一行 (true：放末尾，false：单独一行) bracketSameLine: false, // (x) => {} 箭头函数参数只有一个时是否要有小括号 (avoid：省略括号，always：不省略括号) arrowParens: "avoid", // 指定要使用的解析器，不需要写文件开头的 @prettier requirePragma: false, // 可以在文件顶部插入一个特殊标记，指定该文件已使用 Prettier 格式化 insertPragma: false, // 用于控制文本是否应该被换行以及如何进行换行 proseWrap: "preserve", // 在html中空格是否是敏感的 "css" - 遵守 CSS 显示属性的默认值， "strict" - 空格被认为是敏感的 ，"ignore" - 空格被认为是不敏感的 htmlWhitespaceSensitivity: "css", // 控制在 Vue 单文件组件中 <script> 和 <style> 标签内的代码缩进方式 vueIndentScriptAndStyle: false, // 这两个选项可用于格式化以给定字符偏移量（分别包括和不包括）开始和结束的代码 (rangeStart：开始，rangeEnd：结束) rangeStart: 0, rangeEnd: Infinity }要格式化代碼，你可以使用 Prettier：
"lint:prettier": "prettier --write \"**/*.{js,ts,mjs,cjs,json,tsx,css,less,scss,vue,html,md}\""ESlint与Prettier冲突报错
代码格式上的冲突
我们在运行项目的时候，需要注意ESlint和Prettier这两个文件的配置项，有时候报错是因为这两个文件的配置项不一致导致的，
让Prettier来接管ESlint的格式化，用来覆盖ESLint本身的规则配置，关掉所有和Prettier冲突的ESLint的配置
将Prettier集成到现有的ESLint工具中:
pnpm install -D eslint-config-prettier在eslint.config.js文件中新增配置：
import js from "@eslint/js" //js规范（标准的） import globals from "globals" //环境 import pluginVue from "eslint-plugin-vue" //vue规范 import { defineConfig } from "eslint/config" //配置 import eslintConfigPrettier from "eslint-config-prettier" // prettier const ignores = ["**/dist/**", "**/node_modules/**", ".*"] export default defineConfig([ { files: ["**/*.{js,mjs,cjs,vue}"], //匹配文件 plugins: { js }, extends: ["js/recommended"], //js规范 languageOptions: { globals: { ...globals.browser, ...globals.node } }, //全局变量 window ignores, //忽略文件 rules: { "no-console": "error", //禁止console semi: "error" //强制分号 {为了演示与prettier冲突} }, ...eslintConfigPrettier }, pluginVue.configs["flat/essential"] //vue规范 ])在package.json中添加lint-staged配置，指定在提交时要检查的文件及对应的命令。
"*.{js,mjs,cjs,vue,json,css,less,scss,vue,html,md}": "prettier --write",至此，Git Hooks 的配置就完成了。以后在提交代码时，lint-staged会自动运行 prettier 检测并修复可自动修复的问题，确保提交的代码符合规范。
