一篇文章读懂 Prettier CLI 命令:从基础到进阶 (3)

Prettier 命令行工具

Prettier 提供了一个强大的命令行界面 (CLI),允许用户通过命令行来格式化代码。在 package.json 中,你可以配置一个脚本来运行 Prettier,例如:

json 复制代码
"scripts": {
  "format": "prettier --write ."
}

这个脚本会使用 Prettier 来格式化当前目录及其子目录中的所有支持的文件,并将更改写回原文件。

基本命令格式

Prettier 的 CLI 命令的基本格式如下:

bash 复制代码
prettier [options] [file/dir/glob ...]
  • options:格式化的选项。
  • file/dir/glob:要格式化的文件、目录或通配符。
常见的命令选项
  1. --write 或 -w

    • 描述:将格式化后的代码写入原文件。

    • 示例:

      bash 复制代码
      prettier --write file.js
      prettier -w "src/**/*.js"
  2. --check

    • 描述:检查文件是否已经按照 Prettier 规则进行了格式化。如果所有文件都已格式化,则输出 All matched files use Prettier code style!;否则,显示哪些文件还没有被格式化。

    • 示例:

      bash 复制代码
      prettier --check .
  3. --find-config-path--config

    • --find-config-path:显示找到的配置文件路径。

    • --config:指定配置文件的路径。

    • 示例:

      bash 复制代码
      prettier --config ~/configs/prettier.json --write .
  4. --no-config

    • 描述:不读取任何配置文件,直接使用 Prettier 默认的配置。

    • 示例:

      bash 复制代码
      prettier --no-config --write .
  5. --ignore-path

    • 描述:指定忽略文件(.prettierignore)的路径。

    • 示例:

      bash 复制代码
      prettier --ignore-path ~/configs/ignore/.prettierignore --write .
  6. 规则的配置

    • 描述:可以在 CLI 命令中直接配置 Prettier 的规则。不过,这种方式只适用于少量规则的快速配置。对于大量规则,建议使用单独的配置文件。

    • 示例:

      bash 复制代码
      prettier --single-quote --semi false --print-width 80 --write .
示例

假设你有一个项目结构如下:

复制代码
my-project/
├── src/
│   ├── index.js
│   └── utils/
│       └── helper.js
├── package.json
└── .prettierrc

你可以在 package.json 中添加以下脚本:

json 复制代码
{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "format": "prettier --write .",
    "check": "prettier --check ."
  }
}

然后你可以使用以下命令:

  • 格式化整个项目:

    bash 复制代码
    pnpm run format
  • 检查项目中的文件是否已经格式化:

    bash 复制代码
    pnpm run check
  • 使用特定配置文件进行格式化:

    bash 复制代码
    prettier --config ~/configs/prettier.json --write .
  • 忽略特定文件并格式化:

    bash 复制代码
    prettier --ignore-path .gitignore --write .
  • 不使用配置文件,直接使用默认配置进行格式化:

    bash 复制代码
    prettier --no-config --write .

通过这些命令,你可以灵活地使用 Prettier 来格式化你的代码,确保代码风格的一致性和可读性。

相关推荐
|晴 天|6 小时前
Vue 3 + TypeScript + Element Plus 博客系统开发总结与思考
前端·vue.js·typescript
猫3287 小时前
v-cloak
前端·javascript·vue.js
旷世奇才李先生7 小时前
Vue 3\+Vite\+Pinia实战:企业级前端项目架构设计
前端·javascript·vue.js
SoaringHeart8 小时前
Flutter进阶:用OverlayEntry 实现所有弹窗效果
前端·flutter
IT_陈寒10 小时前
Vite静态资源加载把我坑惨了
前端·人工智能·后端
herinspace10 小时前
管家婆实用贴-如何分离和附加数据库
开发语言·前端·javascript·数据库·语音识别
小码哥_常11 小时前
从MVC到MVI:一文吃透架构模式进化史
前端
嗷o嗷o11 小时前
Android BLE 的 notify 和 indicate 到底有什么区别
前端
豹哥学前端11 小时前
别再背“var 提升,let/const 不提升”了:揭开暂时性死区的真实面目
前端·面试
lar_slw11 小时前
k8s部署前端项目
前端·容器·kubernetes