168 lines
3.9 KiB
Markdown
168 lines
3.9 KiB
Markdown
# 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
|
|
- **说明**: 强制每个 HTML、Vue 和 JSX 属性独占一行
|
|
- **示例**:
|
|
|
|
```html
|
|
<!-- singleAttributePerLine: false -->
|
|
<button class="btn" id="submit" type="submit">Submit</button>
|
|
|
|
<!-- singleAttributePerLine: true -->
|
|
<button class="btn" id="submit" type="submit">Submit</button>
|
|
```
|
|
|
|
## 函数和箭头函数
|
|
|
|
### 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 文件中全局空白敏感度
|
|
- "css": 尊重 CSS display 属性的默认值
|
|
- "strict": 所有空白都被认为是重要的
|
|
- "ignore": 所有空白都被认为是不重要的
|
|
|
|
### vueIndentScriptAndStyle (boolean)
|
|
|
|
- **默认值**: false
|
|
- **说明**: Vue 文件中单文件组件的 `<script>` 和 `<style>` 标签内的代码是否缩进
|
|
|
|
### experimentalTernaries (boolean)
|
|
|
|
- **默认值**: false
|
|
- **说明**: 尝试 Prettier 的新三元表达式格式化方式，在成为默认行为之前使用
|
|
|
|
### experimentalOperatorPosition (string)
|
|
|
|
- **默认值**: "end"
|
|
- **可选值**: "start" | "end"
|
|
- **说明**: 当二元表达式换行时，操作符的位置
|
|
- "start": 操作符放在新行的开头
|
|
- "end": 操作符放在前一行的末尾（默认行为）
|
|
|
|
### objectWrap (string)
|
|
|
|
- **默认值**: "preserve"
|
|
- **可选值**: "preserve" | "collapse"
|
|
- **说明**: 配置 Prettier 如何包装对象字面量
|
|
- "preserve": 如果在开括号和第一个属性之间有换行符，则保持多行格式
|
|
- "collapse": 如果可能，将对象压缩到单行
|