1

PRETTIER_CONFIG_GUIDE.md

@@ -0,0 +1,134 @@
+# Prettier 常用配置项详解
+
+## 基础格式化选项
+
+### semi (boolean)
+
+- **默认值**: true
+- **说明**: 在语句末尾打印分号
+- **示例**:
+  - true: `console.log('hello');`
+  - false: `console.log('hello')`
+
+### singleQuote (boolean)
+
+- **默认值**: false
+- **说明**: 使用单引号而不是双引号
+- **示例**:
+  - true: `const str = 'hello';`
+  - false: `const str = "hello";`
+
+### printWidth (number)
+
+- **默认值**: 80
+- **说明**: 指定每行代码的最大字符数，超过这个长度会自动换行
+
+### useTabs (boolean)
+
+- **默认值**: false
+- **说明**: 使用制表符(tab)缩进而不是空格
+
+### tabWidth (number)
+
+- **默认值**: 2
+- **说明**: 指定每个缩进级别的空格数
+
+## 对象和数组格式化
+
+### bracketSpacing (boolean)
+
+- **默认值**: true
+- **说明**: 在对象字面量中的括号之间打印空格
+- **示例**:
+  - true: `{ foo: bar }`
+  - false: `{foo: bar}`
+
+### bracketSameLine (boolean)
+
+- **默认值**: false
+- **说明**: 将多行 HTML 元素的 > 放在最后一行的末尾，而不是单独放在下一行
+
+### trailingComma (string)
+
+- **默认值**: "es5"
+- **可选值**: "none" | "es5" | "all"
+- **说明**: 在多行对象或数组的最后一个元素后是否添加逗号
+- **示例**:
+
+  ```javascript
+  // "none"
+  {
+    foo: 'bar'
+  }
+
+  // "es5"
+  {
+    foo: 'bar',
+  }
+
+  // "all"
+  {
+    foo: 'bar',
+    baz: 'qux',
+  }
+  ```
+
+## JSX 特定选项
+
+### jsxSingleQuote (boolean)
+
+- **默认值**: false
+- **说明**: 在 JSX 中使用单引号而不是双引号
+
+### singleAttributePerLine (boolean)
+
+- **默认值**: false
+- **说明**: 是否强制每个 JSX 属性独占一行
+
+## 函数和箭头函数
+
+### arrowParens (string)
+
+- **默认值**: "always"
+- **可选值**: "always" | "avoid"
+- **说明**: 在箭头函数参数周围始终包含括号
+- **示例**:
+
+  ```javascript
+  // "always"
+  const fn = (x) => x
+
+  // "avoid"
+  const fn = (x) => x
+  const fn2 = (x, y) => x + y
+  ```
+
+## 其他格式化选项
+
+### endOfLine (string)
+
+- **默认值**: "lf"
+- **可选值**: "auto" | "lf" | "crlf" | "cr"
+- **说明**: 指定换行符风格
+  - "lf": \n (Linux/macOS)
+  - "crlf": \r\n (Windows)
+
+### quoteProps (string)
+
+- **默认值**: "as-needed"
+- **可选值**: "as-needed" | "consistent" | "preserve"
+- **说明**: 对象属性引用方式
+  - "as-needed": 仅在需要时才引用属性
+  - "consistent": 如果至少有一个属性需要引用，则引用所有属性
+  - "preserve": 保持原样
+
+### htmlWhitespaceSensitivity (string)
+
+- **默认值**: "css"
+- **可选值**: "css" | "strict" | "ignore"
+- **说明**: 指定 HTML、Vue、Angular 文件中全局空白敏感度
+
+### vueIndentScriptAndStyle (boolean)
+
+- **默认值**: false
+- **说明**: Vue 文件中单文件组件的脚本和样式标签内是否缩进