macOS 本地从零开始配置 Prettier + VS Code

本指南适用于希望批量格式化 Markdown、YAML、HTML、JS、CSS 等文件的用户，尤其适合使用 VS Code 的用户。

1. 安装 Node.js

Prettier 依赖 Node.js 环境，建议通过 Homebrew 安装，便于更新与管理。

brew install node

安装完成后，在终端运行验证命令：

node -v
npm -v

常见问题，如遇 zsh: command not found: node，请确认路径是否加入环境变量：

export PATH="/opt/homebrew/bin:$PATH"
source ~/.zprofile

2. 在项目中安装 Prettier

进入你的项目目录（如 xxxx.github.io）：

cd ~/xx/xxxx.github.io

安装 Prettier 到项目开发依赖中：

npm install --save-dev prettier

安装成功后，目录中会出现：

• node_modules/
• package-lock.json
• package.json（如原本不存在会自动生成）

3. 安装配置：Prettier

安装：打开 VS Code，前往扩展商店，搜索并安装：Prettier - Code formatter

配置：打开 settings.json（打开命令面板：Cmd + Shift + P，命令面板中搜索 Preferences: Open Settings (JSON)），添加以下内容：自动保存。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

4. 配置 Prettier 行为（可选）

1. 创建 .prettierrc 文件

在项目根目录创建 .prettierrc 文件，自定义格式规则。例如：

{
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 100,
  "proseWrap": "preserve"
}

2. 创建 .prettierignore 文件

可用于排除不希望格式化的路径，例如：

node_modules
_site
_assets
docs/vendor
*.min.js

5. 批量格式化项目文件

仅检查格式（不会修改文件）：

npx prettier . --check

在项目根目录运行以下命令格式化所有支持的文件：

npx prettier . --write

可选用法（推荐）：

npx prettier "**/*.{md,yml,yaml,html,json,css,js}" --write