Prettier

Prettier 是一个流行的代码格式化工具，专注于通过自动化方式统一代码风格，让开发者无需在代码格式上花费过多精力。它与 ESLint 等工具不同，更侧重于代码的格式美观和一致性，而非代码质量或语法错误检查。

核心特点

开箱即用：默认提供一套合理的格式化规则，无需复杂配置即可使用
无配置争议：通过强制统一的格式，消除团队成员间关于代码风格的争论
多语言支持：支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种语言
编辑器集成：可与 VS Code、WebStorm 等主流编辑器无缝集成
自动化格式化：可通过命令行、编辑器保存事件或 Git 钩子自动执行
可扩展性：支持自定义配置和插件，适应不同项目需求

工作原理

Prettier 通过将代码解析为抽象语法树（AST），然后按照预定义规则重新生成代码，从而实现格式化。这种与传统的代码检查工具不同，它不是在原有代码基础上进行修改，而是完全重新生成代码，确保输出格式的一致性。

与 `ESLint` 的区别

Prettier：专注于代码格式（缩进、引号、换行等），不关心代码逻辑
ESLint：主要关注代码质量（未使用的变量、语法错误等），也包含部分格式规则
在实际项目中，两者通常结合使用，用 ESLint 检查代码质量，用 Prettier 负责代码格式化

规则

Prettier 详细配置

这个配置遵循了目前最广泛使用的规则，主要特点包括：

基础格式
- 每行最多 100 个字符，平衡可读性和屏幕空间利用
- 使用 2 个空格缩进（前端社区主流选择）
- 语句末尾添加分号（避免自动插入分号可能导致的问题）
- 使用单引号（大多数 JavaScript 项目的首选）
对象与函数
- 对象字面量前后保留空格（{ foo: bar } 而非 {foo: bar}）
- 箭头函数参数始终使用括号（(x) => x 而非 x => x）
- 多行结构中添加尾逗号（提高代码可读性和版本控制友好性）
HTML/JSX 相关
- JSX 中使用单引号
- JSX 标签的反尖括号单独换行（提高复杂组件的可读性）
- 遵循 CSS 对 HTML 空白的处理规则
特殊文件处理
- JSON 文件放宽行宽限制（200 字符）
- Markdown 文件适当放宽行宽并自动换行
- YAML 文件使用双引号（符合 YAML 规范）
- 统一使用 Unix 风格换行符（LF），保证跨平台一致性

javascript

module.exports = {
    // 每行最大字符数，超过会自动换行
    printWidth: 100,

    // 缩进空格数
    tabWidth: 2,

    // 使用空格代替制表符
    useTabs: false,

    // 语句末尾是否加分号
    semi: true,

    // 使用单引号代替双引号
    singleQuote: true,

    // 对象属性是否使用引号（as-needed：仅在必要时使用）
    quoteProps: 'as-needed',

    // JSX 中使用单引号
    jsxSingleQuote: true,

    // 多行逗号分隔的语法中，最后一行是否加逗号
    trailingComma: 'all',

    // 对象字面量前后是否加空格
    bracketSpacing: true,

    // JSX 标签的反尖括号是否换行
    bracketSameLine: false,

    // 箭头函数参数是否加括号（always：总是加括号）
    arrowParens: 'always',

    // 范围格式化的起始行和结束行
    rangeStart: 0, rangeEnd: Infinity,

    // 是否格式化嵌入在 HTML 中的代码
    embedFormatting: 'auto',

    // 是否在文件顶部插入特殊的 @format 标记
    insertPragma: false,

    // 是否需要在文件顶部有 @prettier 标记才格式化
    requirePragma: false,

    //  proseWrap：控制 Markdown 文本的换行方式（preserve：保留原样）
    proseWrap: 'preserve',

    // HTML 空白敏感性（css：遵循 CSS 显示属性的默认行为）
    htmlWhitespaceSensitivity: 'css',

    // Vue 文件中 script 和 style 标签内的代码是否缩进
    vueIndentScriptAndStyle: false,

    // 换行符使用（lf：Unix 风格的换行符 \n）
    endOfLine: 'lf',

    // 对引号进行格式化时是否区分属性和内容
    singleAttributePerLine: false,

    // 自定义文件解析器
    overrides: [{
        files: '*.json', options: {
            printWidth: 200
        }
    }, {
        files: ['*.md', '*.mdx'], options: {
            printWidth: 120, proseWrap: 'always'
        }
    }, {
        files: '*.yml', options: {
            singleQuote: false
        }
    }]
};

Prettier ​

核心特点 ​

工作原理 ​

与 ESLint 的区别 ​

规则 ​

Prettier

核心特点

工作原理

与 `ESLint` 的区别

规则