React_TS 学习笔记(2-11)Prettier代码格式化配置使用

{  "semi": true,  "trailingComma": "es5",  "singleQuote": false,  "printWidth": 80,  "tabWidth": 2,  "useTabs": false,  "bracketSpacing": true,  "arrowParens": "always",  "jsxBracketSameLine": false,  "jsxSingleQuote": false,  "quoteProps": "preserve",  "endOfLine": "lf",  "htmlWhitespaceSensitivity": "css",  "vueIndentScriptAndStyle": true,  "insertPragma": true,  "requirePragma": false,  "embeddedLanguageFormatting": "auto",  "singleAttributePerLine": false}

# 构建目录distbuild.outpublic# 依赖目录node_modules# 缓存目录.cache# 系统文件.DS_Store# 环境配置.env.env.local.env.development.local.env.test.local.env.production.local.env.production.env.preview.env.development.eslintrc.cjs.eslintignoreeslint.config.jspostcss.config.js# 工具配置.vscode.idea.antigravity.continue.windsurf.cursor.cursorrules.kiro.yaml.kiro.qoder.json.qoder# 其他*.min.js*.min.css# 自定义排除格式化文件目录*.md*.jsonvite.config.ts.prettierrc.gitignoreindex.html

# 项目package.json内预设命令，格式化整个项目npm run format 无需完全使用此命令，可自行查看命令配置，可按自己喜好进行预设# 格式化指定文件npx prettier --write src/App.tsx# 检查格式化状态（不修改文件）npx prettier --check src/

### 基本格式化选项#### semi `boolean`- **默认值**: `true` | **项目值**: `true`- **说明**: 是否在语句末尾添加分号- **示例**:  - `true`: `const a = 1;`  - `false`: `const a = 1`#### singleQuote `boolean`- **默认值**: `false` | **项目值**: `false`- **说明**: 是否使用单引号代替双引号（JSX 中不受此项影响，需配置 `jsxSingleQuote`）- **示例**:  - `true`: `import React from 'react'`  - `false`: `import React from "react"`#### trailingComma `string`- **默认值**: `"all"` | **项目值**: `"es5"`- **可选值**: `"none"` | `"es5"` | `"all"`- **说明**: 多行结构末尾是否添加尾随逗号  - `"none"`: 不添加尾随逗号  - `"es5"`: 在 ES5 合法位置添加（对象、数组等），不含函数参数  - `"all"`: 尽可能添加尾随逗号（包括函数参数）#### bracketSpacing `boolean`- **默认值**: `true` | **项目值**: `true`- **说明**: 对象字面量的花括号内是否添加空格  - `true`: `{ foo: bar }`  - `false`: `{foo: bar}`#### tabWidth `number`- **默认值**: `2` | **项目值**: `2`- **说明**: 每级缩进的空格数#### useTabs `boolean`- **默认值**: `false` | **项目值**: `false`- **说明**: 是否使用制表符（Tab）缩进代替空格---### 箭头函数#### arrowParens `string`- **默认值**: `"always"` | **项目值**: `"always"`- **可选值**: `"always"` | `"avoid"`- **说明**: 箭头函数仅有一个参数时是否添加圆括号  - `"always"`: 始终添加括号 `(x) => x`  - `"avoid"`: 单参数时省略括号 `x => x`---### JSX 相关#### jsxSingleQuote `boolean`- **默认值**: `false` | **项目值**: `false`- **说明**: JSX 属性值是否使用单引号代替双引号  - `true`: `<input className='foo' />`  - `false`: `<input className="foo" />`#### jsxBracketSameLine `boolean` ⚠️- **默认值**: `false` | **项目值**: `false`- **说明**: 多行 JSX 元素的闭合 `>` 是否放在最后一个属性的同一行  - `true`: 闭合 `>` 紧跟最后一个属性  - `false`: 闭合 `>` 单独占一行> ⚠️ **已废弃**：此选项在 Prettier v2.4.0 起已废弃，推荐使用 `bracketSameLine` 替代。当前配置仍可正常工作，建议后续迁移。---### 对象属性#### quoteProps `string`- **默认值**: `"as-needed"` | **项目值**: `"preserve"`- **可选值**: `"as-needed"` | `"consistent"` | `"preserve"`- **说明**: 对象属性名的引号处理策略  - `"as-needed"`: 仅在需要时添加引号（如含特殊字符）  - `"consistent"`: 如有任一属性需要引号，则所有属性统一添加引号  - `"preserve"`: 保留原始代码中的引号风格，不做修改---### 行宽和换行#### printWidth `number`- **默认值**: `80` | **项目值**: `80`- **说明**: 每行最大字符数，超出后 Prettier 会尝试换行- **注意**: 这不是硬性截断，Prettier 会在语义合理处换行#### endOfLine `string`- **默认值**: `"lf"` | **项目值**: `"lf"`- **可选值**: `"lf"` | `"crlf"` | `"cr"` | `"auto"`- **说明**: 文件换行符格式  - `"lf"`: Unix/macOS 换行符 (`\n`)  - `"crlf"`: Windows 换行符 (`\r\n`)  - `"cr"`: 旧版 Mac 换行符 (`\r`)，几乎不再使用  - `"auto"`: 保持文件首行的现有换行符格式---### 特殊标记#### insertPragma `boolean`- **默认值**: `false` | **项目值**: `true` ⚡- **说明**: 格式化文件后，是否在文件顶部自动插入 `/** @format */` 标记- **用途**: 可用于标识哪些文件已被 Prettier 格式化过#### requirePragma `boolean`- **默认值**: `false` | **项目值**: `false`- **说明**: 是否仅格式化文件顶部包含 `/** @format */` 或 `@prettier` 标记的文件- **注意**: 若设为 `true`，则只有文件顶部有标记的文件才会被格式化; 常与 `insertPragma` 搭配使用，实现渐进式格式化迁移---### 其他选项#### proseWrap `string`- **默认值**: `"preserve"`- **可选值**: `"always"` | `"never"` | `"preserve"`- **说明**: Markdown 等散文类文件中的文本换行行为  - `"always"`: 超出 `printWidth` 时自动换行  - `"never"`: 每个段落合并为一行  - `"preserve"`: 保持原有的换行方式#### htmlWhitespaceSensitivity `string`- **默认值**: `"css"` | **项目值**: `"css"`- **可选值**: `"css"` | `"strict"` | `"ignore"`- **说明**: HTML/Vue/Angular 模板中空白字符的敏感度  - `"css"`: 遵循 CSS `display` 属性的默认行为（推荐）  - `"strict"`: 所有标签内的空白字符均视为有意义  - `"ignore"`: 所有标签内的空白字符均视为无意义#### vueIndentScriptAndStyle `boolean`- **默认值**: `false` | **项目值**: `true` ⚡- **说明**: 是否对 Vue SFC 中 `<script>` 和 `<style>` 标签内的代码添加一级缩进- **示例**:  - `true`: 标签内容增加一级缩进  - `false`: 标签内容顶格对齐#### embeddedLanguageFormatting `string`- **默认值**: `"auto"` | **项目值**: `"auto"`- **可选值**: `"auto"` | `"off"`- **说明**: 是否格式化文件中嵌入的代码块（如 Markdown 中的代码块、HTML 中的 `<script>` 等）  - `"auto"`: 自动检测并格式化嵌入代码  - `"off"`: 不格式化嵌入代码#### singleAttributePerLine `boolean`- **默认值**: `false` | **项目值**: `false`- **说明**: HTML/JSX/Vue 中是否强制每个属性独占一行  - `true`: 每个属性单独占一行  - `false`: 属性可以在同一行（受 `printWidth` 限制）