知识库

Appearance

Return to top
On this page

Prettier CLI命令

Prettier提供了丰富的命令行接口(CLI)，允许您从终端直接使用Prettier进行代码格式化。本指南详细介绍所有可用的CLI命令和选项。

基础命令

安装Prettier

bash
# 作为开发依赖安装（推荐）
npm install --save-dev prettier

# 全局安装（不推荐）
npm install --global prettier

基本用法

bash
# 检查文件格式
npx prettier --check src/**/*.js

# 格式化文件并输出到终端
npx prettier src/index.js

# 格式化文件并写入原文件
npx prettier --write src/index.js

# 格式化多个文件
npx prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,md}"

检查模式

检查文件是否已格式化

bash
# 检查单个文件
npx prettier --check src/index.js

# 检查多个文件
npx prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,md}"

# 检查所有支持的文件类型
npx prettier --check "**/*.{js,jsx,ts,tsx,css,scss,less,json,md,yml,yaml,graphql,mdx}"

检查模式的输出

bash
# 输出示例
npx prettier --check "src/**/*.js"
# src/index.js: Checksums correct
# src/utils.js: Code style issues found in the above file(s)

写入模式

格式化并写入文件

bash
# 格式化单个文件
npx prettier --write src/index.js

# 格式化多个文件
npx prettier --write "src/**/*.{js,jsx,ts,tsx,json,css,md}"

# 格式化整个项目
npx prettier --write "**/*.{js,jsx,ts,tsx,json,css,md,yaml,yml}"

选择性格式化

bash
# 只格式化变更的文件
git diff --name-only --diff-filter=ACMRTUB | grep -E '\.(js|jsx|ts|tsx|json|css|md)$' | xargs npx prettier --write

# 格式化特定目录
npx prettier --write "src/components/**/*.{js,jsx}"

配置选项

使用配置文件

bash
# 指定配置文件路径
npx prettier --config .prettierrc.json --write src/

# 使用项目根目录的配置文件（自动检测）
npx prettier --write src/

覆盖配置选项

bash
# 命令行覆盖配置
npx prettier --write --single-quote --trailing-comma es5 --print-width 100 src/

# 覆盖多个选项
npx prettier --write \
  --semi=false \
  --single-quote \
  --tab-width=4 \
  --print-width=120 \
  src/

支持的文件类型

JavaScript和相关文件

bash
# JavaScript
npx prettier --write "**/*.js"

# JSX
npx prettier --write "**/*.jsx"

# TypeScript
npx prettier --write "**/*.ts"

# TSX
npx prettier --write "**/*.tsx"

样式文件

bash
# CSS
npx prettier --write "**/*.css"

# SCSS
npx prettier --write "**/*.scss"

# Less
npx prettier --write "**/*.less"

# Stylus
npx prettier --write "**/*.styl"

数据文件

bash
# JSON
npx prettier --write "**/*.json"

# YAML
npx prettier --write "**/*.{yml,yaml}"

# GraphQL
npx prettier --write "**/*.graphql"

其他文件类型

bash
# Markdown
npx prettier --write "**/*.md"

# HTML
npx prettier --write "**/*.html"

# Vue
npx prettier --write "**/*.vue"

# Angular
npx prettier --write "**/*.component.html"

高级选项

忽略文件

bash
# 使用 .prettierignore 文件
npx prettier --write src/

# .prettierignore 文件示例
# node_modules/
# dist/
# build/
# *.min.js
# coverage/

列出不受支持的文件

bash
# 列出所有Prettier可以处理的文件
npx prettier --list-different "**/*"

# 只列出格式不正确的文件
npx prettier --list-different "src/**/*.{js,jsx,ts,tsx,json,css,md}"

详细输出

bash
# 显示详细信息
npx prettier --write --log-level debug src/

# 日志级别选项
npx prettier --log-level silent   # 无输出
npx prettier --log-level error    # 只显示错误
npx prettier --log-level warn     # 显示警告和错误
npx prettier --log-level debug    # 显示所有信息

缓存选项

使用缓存提高性能

bash
# 启用缓存（实验性功能）
npx prettier --write --cache src/

# 指定缓存位置
npx prettier --write --cache --cache-location .prettiercache src/

# 清除缓存
npx prettier --cache-clear --write src/

格式化信息

显示格式化统计

bash
# 显示格式化统计信息
npx prettier --write --log-level debug src/

# 仅显示格式化过的文件
npx prettier --write src/ 2>&1 | grep -v "to ignore" | grep -v "All matched files"

与Git集成

格式化Git暂存的文件

bash
# 格式化Git暂存的文件
npx prettier --write $(git diff --name-only --diff-filter=ACMR --staged "*.js")

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

预提交钩子

bash
# 使用husky设置预提交钩子
npm install --save-dev husky lint-staged

# package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

常用命令组合

项目初始化

bash
# 创建配置文件
echo '{"semi": false,"singleQuote": true,"printWidth": 80}' > .prettierrc

# 创建忽略文件
echo -e "node_modules/\n*.min.js\ndist/\nbuild/" > .prettierignore

# 格式化所有文件
npx prettier --write .

CI/CD环境

bash
# 在CI中只检查格式
npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"

# 检查特定目录
npx prettier --check "src/**/*.{js,jsx,ts,tsx,json,css,md}"

# 检查变更的文件
git diff --name-only HEAD^ HEAD --diff-filter=ACMR | grep -E '\.(js|jsx|ts|tsx|json|css|md)$' | xargs npx prettier --check

开发环境

bash
# 开发时常用命令
npm run format:check    # 检查格式
npm run format:write    # 格式化文件
npm run format:staged   # 格式化暂存文件

# package.json
{
  "scripts": {
    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:write": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:staged": "npx lint-staged"
  }
}

性能优化

大项目优化

bash
# 分批处理大项目
npx prettier --write "src/components/**/*.{js,jsx}"
npx prettier --write "src/utils/**/*.{js,jsx}"
npx prettier --write "src/api/**/*.{js,jsx}"

# 使用缓存
npx prettier --write --cache src/

并行处理

bash
# 使用并行处理工具
npm install --save-dev npm-run-all

# package.json
{
  "scripts": {
    "format:components": "prettier --write \"src/components/**/*.{js,jsx}\"",
    "format:utils": "prettier --write \"src/utils/**/*.{js,jsx}\"",
    "format:api": "prettier --write \"src/api/**/*.{js,jsx}\"",
    "format:all": "npm-run-all --parallel format:*"
  }
}

故障排除

常见问题

bash
# 问题: 找不到配置文件
# 解决: 检查配置文件名和位置
npx prettier --find-config-path src/index.js

# 问题: 某些文件没有被格式化
# 解决: 检查.prettierignore文件
npx prettier --ignore-path .prettierignore --write src/

# 问题: 格式化后代码无法运行
# 解决: 检查Prettier配置是否与项目兼容
npx prettier --check src/ && npm test

调试配置

bash
# 查看Prettier如何解释特定文件
npx prettier --debug-check src/index.js

# 查看应用的配置
npx prettier --find-config-path src/index.js

# 验证配置文件
npx prettier --check .prettierrc.json

通过熟练掌握这些CLI命令，您可以高效地在项目中使用Prettier进行代码格式化。