# 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 文件中单文件组件的脚本和样式标签内是否缩进