Prettier原生支持 JavaScript，TypeScript，JSON，HTML，CSS，Markdown，YAML，GraphQL，Vue等前端语言代码的排版格式化工具。管"长啥样"：缩进，行宽，引号，分号
主要与VS Code，WebStorm，Sublime Text等Windows的前端IDE集成。
Prettier配置文件格式的种类如下：
| 格式 | 说明及特点 | 适用场景 |
|---|---|---|
| prettier片段 | 嵌入在package.json中 | 看到要认识，但不推荐散落在其他文件中 |
| .prettierrc | 无扩展名的JSON/YAML文件； 书写简洁，但没有注释。 | 早期的写法，留存在大量老项目中； 新项目不推荐使用。 |
| .prettierrc.json .prettierrc.yml | 显示扩展名的配置文件；根据扩展名，编码器自动识别，语法高亮，语法校验。 另外，YAML形式支持注释，但因为缩进敏感，写错空格就报错，所以普及率低。 | 固定参数即可满足需求，就用**.prettierrc.json** |
| .prettierrc.toml | 与上面的一样，仅支持固定静态参数 | Rust，Python项目以外，很少用。 |
| .prettierrc.js prettier.config.js | 可执行JS代码，动态生成配置 两种内容写法都是一样的；仅是命名习惯不同，新项目的习惯是prettier.config.js | ・根据环境变量(DEV/PRD)动态切换 ・配置继承或复用公共配置 ・读取本地文件信息，动态调整规则 ・和ESLint共用一套配置范式。 |
.prettierrc.json样例
|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| { "printWidth": 120, // 一行最大字符数（超过自动换行） "tabWidth": 2, // 缩进空格数（前端通用 2 格） "useTabs": false, // 不使用 Tab 缩进，用空格 "semi": true, // 代码末尾保留分号 "singleQuote": true, // 使用单引号 "jsxSingleQuote": false, // JSX属性使用双引号 "quoteProps": "as-needed", // JSX属性仅在必要时加引号 "trailingComma": "es5", // 对象或数组的最后一项保留尾逗号 "bracketSpacing": true, // 对象字面量两侧加空格 { name: 'xxx' } "bracketSameLine": false, // HTML/JSX 标签的 > 不单独一行 "arrowParens": "always", // 箭头函数参数始终加括号 (x) => x "proseWrap": "preserve", // 默认折行标准 "endOfLine": "lf", // 换行符LF（通常运行在Linux） "htmlWhitespaceSensitivity": "css", // HTML空格敏感度，默认惯例 "embeddedLanguageFormatting": "auto" // 自动格式化内嵌代码，默认惯例 } |
※红字的设置即可，其他属性使用默认值，可以不必显性设置。
※对于不同语言文件的差异，需要不同于默认值时，叠加以下overrides
|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| "overrides": { "files": \["\*.json", "\*.jsonc", ".prettierrc", "options": { "parser": "json", "trailingComma": "none" } }, { "files": "*.md", "options": { "proseWrap": "always", "printWidth": 80 } }, { "files": "\*.html", "\*.vue", "options": { "htmlWhitespaceSensitivity": "ignore", "singleAttributePerLine": true "vueIndentScriptAndStyle": true } }, { "files": "\*.css", "\*.scss", "\*.less", "options": { "singleQuote": false } } ] | // JSON不需要尾随逗号 // 确保.prettierrc等无扩展名文件被正确解析 // 默认preserve不处理换行，设置为always，可按printWidth自动换行 // 默认css会保留inline元素间的空格，设为ignore可避免意外空白 HTML属性多时，强制每行一个，提升可读性 Vue中<script>和<style>内容缩进 // CSS中，双引号更常见 |
※另外还有以下，不常用的属性，了解即可。
・plugins：设置非内置功能
・requirePragma和insertPragma：对于既存项目，标签哪些是格式化对象文件的设置。
※ 忽略文件(.prettierignore)的配置
XML
# 依存関係
node_modules/
# ビルド出力・成果物
dist/
build/
out/
public/build/
# ログ・キャッシュ
*.log
.cache/
.temp/
# 環境変数
.env.*
# パッケージ管理ファイル
package.json
package-lock.json