VS Code插件／Prettier 代码排版格式化
Prettier原生支持 JavaScriptTypeScriptJSONHTMLCSSMarkdownYAMLGraphQLVue等前端语言代码的排版格式化工具。管“长啥样”缩进单行长度换行位置前后空格引号或分号等主要与VS CodeWebStormSublime Text等Windows的前端IDE集成。Prettier配置文件格式的种类如下格式说明及特点适用场景prettier片段嵌入在package.json中看到要认识但不推荐散落在其他文件中.prettierrc无扩展名的JSON/YAML文件书写简洁但没有注释。早期的写法留存在大量老项目中新项目不推荐使用。.prettierrc.json.prettierrc.yml显示扩展名的配置文件根据扩展名编码器自动识别语法高亮语法校验。另外YAML形式支持注释但因为缩进敏感写错空格就报错所以普及率低。固定参数即可满足需求就用.prettierrc.json.prettierrc.toml与上面的一样仅支持固定静态参数RustPython项目以外很少用。.prettierrc.jsprettier.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) xproseWrap: preserve, // 默认折行标准endOfLine: lf, // 换行符LF通常运行在LinuxhtmlWhitespaceSensitivity: css, // HTML空格敏感度默认惯例embeddedLanguageFormatting: auto // 自动格式化内嵌代码默认惯例}※红字的设置即可其他属性使用默认值可以不必显性设置。※对于不同语言文件的差异需要不同于默认值时叠加以下overridesoverrides: [{files: [*.json, *.jsonc, .prettierrc],options: {parser: json,trailingComma: none}},{files: *.md,options: {proseWrap: always,printWidth: 80}},{files: [*.html, *.vue],options: {htmlWhitespaceSensitivity: ignore,singleAttributePerLine: truevueIndentScriptAndStyle: 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)的配置# 依存関係 node_modules/ # ビルド出力・成果物 dist/ build/ out/ public/build/ # ログ・キャッシュ *.log .cache/ .temp/ # 環境変数 .env.* # パッケージ管理ファイル package.json package-lock.json
)
