Prettier快速入门 #

Prettier是一个代码格式化工具，它通过解析代码并使用自己的规则重新打印代码来强制执行一致的代码风格。Prettier会解析您的代码，然后使用自己的规则强制格式化，这些规则旨在将格式问题永久解决。

安装 #

您可以使用npm或yarn安装Prettier：

# 使用npm
npm install --save-dev --save-exact prettier

# 使用yarn
yarn add --dev --exact prettier

创建配置文件 #

在项目根目录下创建一个配置文件：

npx prettier --init-config

或者手动创建一个.prettierrc.json文件：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

基本使用 #

格式化单个文件 #

npx prettier ./src/index.js

格式化并写入文件 #

npx prettier --write ./src/index.js

检查文件是否已格式化 #

npx prettier --check ./src/index.js

常用配置选项 #

• printWidth: 指定每行最大字符数（默认80）
• tabWidth: 指定缩进空格数（默认2）
• useTabs: 使用制表符而非空格缩进（默认false）
• semi: 在语句末尾添加分号（默认true）
• singleQuote: 使用单引号而非双引号（默认false）
• trailingComma: 在对象或数组的最后一个元素后添加逗号（默认"none"）
• bracketSpacing: 在对象的括号前后添加空格（默认true）
• arrowParens: 在唯一箭头参数周围添加括号（默认"avoid"）

推荐的项目配置 #

创建一个.prettierignore文件来排除不需要格式化的文件：

node_modules/
dist/
build/
*.min.js
coverage/
.next/
.nuxt/

与Git集成 #

您还可以将Prettier与Git Hooks集成，确保提交的代码都经过格式化：

npx husky add .husky/pre-commit "npx lint-staged"
npx lint-staged

在package.json中添加配置：

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write",
      "git add"
    ]
  }
}