Prettier

介绍

Prettier 是一个流行的代码格式化工具，旨在确保代码风格的一致性。它支持多种编程语言和文件类型，并且可以与许多编辑器和 IDE 集成。

快速上手

1. 安装

npm i -D prettier

2. 配置文件

支持 多种格式 的配置文件。以 .prettierrc 为例：

.prettierrc

{
  "$schema": "https://json.schemastore.org/prettierrc",
  "htmlWhitespaceSensitivity": "ignore",
  "printWidth": 120,
  "quoteProps": "consistent",
  "semi": false,
  "singleQuote": true
}

配置项说明

• htmlWhitespaceSensitivity: 设置 HTML 中的空白符敏感度
• printWidth: 每行代码的最大长度
• quoteProps: 对象属性的引号使用规则
• semi: 是否在语句末尾添加分号
• singleQuote: 使用单引号而不是双引号
• ...

3. 配置忽略范围

新建/编辑 .prettierignore 文件：

node_modules
dist
public
pnpm-lock.yaml
yarn.lock
package-lock.json
.vscode
.idea
.local

4. 在 package.json 中配置脚本

{
  "scripts": {
    "format": "prettier --write .",
    "format": "prettier --write src/**/*.{js,ts,json,css,md}"
  }
}

常见问题

忽略代码片段

// prettier-ignore
const foo    =      {   bar:    "baz" }