vue-desktop/PRETTIER_CONFIG_GUIDE.md

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"

• 说明: 在多行对象或数组的最后一个元素后是否添加逗号

• 示例:

  // "none"
  {
    foo: 'bar'
  }
  
  // "es5"
  {
    foo: 'bar',
  }
  
  // "all"
  {
    foo: 'bar',
    baz: 'qux',
  }
  

JSX 特定选项

jsxSingleQuote (boolean)

• 默认值: false
• 说明: 在 JSX 中使用单引号而不是双引号

singleAttributePerLine (boolean)

• 默认值: false

• 说明: 强制每个 HTML、Vue 和 JSX 属性独占一行

• 示例:

  <!-- 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"

• 说明: 在箭头函数参数周围始终包含括号

• 示例:

  // "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": 如果可能，将对象压缩到单行