Prettier

Prettier 是什么？

• 编辑器保存代码时自动格式化

• 支持多种编程语言

• 可与大多数编辑器集成

• 一个node项目

• 支持工程化配置

国内官网

默认上支持 JavaScript、TypeScript、CSS、SCSS、HTML、Vue、React、JSON、Markdown 这几种语言，

其它语言例如php、go、rust、python也支持，但是需要额外安装社区插件

例如go、rust本身官网有自己的语言格式服务器，这里就不建议使用了，php没有官网的格式服务器，推荐使用

常见的使用场景

工程命令行

以npm项目为例，执行 npm install --save-dev prettier 安装prettier

在项目根目录下运行 npx prettier --write .

命令解析：

• npx：调用本地 node_modules 中的 Prettier。

• -write：关键参数！ 表示直接覆盖原文件（即“原地修改”）。

• .：表示当前目录及其所有子目录。

  ✅ 执行后，Prettier 会自动遍历所有它支持的文件类型（如 .js, .ts, .vue, .css, .json 等），并按规则格式化。

在项目根目录下，支持配置文件具体配置其格式化要求，这里不在多说

git工程集成

现在要实现一个这样的功能：每次 git commit 时，只会格式化本次提交的文件！

需要用到下面两个工具 Husky、lint-staged

Husky：Git 钩子管理器

Git 本身提供了很多钩子（hooks），比如 pre-commit（提交代码前触发）、commit-msg（校验提交信息前触发）、pre-push（推送代码前触发）等。这些钩子默认是 shell 脚本，编写和维护成本高。

Husky 把 Git 钩子封装成了更易用的 JavaScript 接口，让你能通过简单的配置，在 Git 执行特定操作（如提交、推送）时，自动运行指定的脚本（比如代码检查、格式化）。

lint-staged：只校验暂存区的文件

只对 Git 暂存区（即将提交）的文件执行指定命令，不会影响未修改的文件，既高效又精准

安装

npm install --save-dev husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

项目配置

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx,vue,css,scss,json,md}": "prettier --write"
  }
}

编辑器集成

以vscode系列编辑器为例

1. 安装插件 Prettier - Code formatter 安装插件的同时已自动安装了Prettier 项目

2. 打开语言基础配置

这个是js和markdown的格式配置，保存代码时编辑器就会自动格式化

其重点是 "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode" 这两个配置块

"[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[markdown]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
},

安装非官方默认的其它语言，例如rust/php/java 要单独下载其配套插件，例如 npm install -g prettier @prettier/plugin-php 然后在vscode中配置，自行搜索吧，配置项要多几个