# 如何规范代码风格 - prettier

## Prettier

Prettier 是一个自动格式化代码的工具。

**安装**

```
npm i -D prettier
```

**配置**

```javascript
// .prettierrc.json
{}
```

* [其他配置文件形式](https://prettier.io/docs/en/configuration.html)
* [配置选项](https://prettier.io/docs/en/options.html)

定义 `.prettierignore` 告诉 prettier 哪些文件不用管：

```bash
# .prettierignore
# Ignore artifacts:
build
coverage
```

**使用**

```
npx prettier --write .
```

* 会格式化所有文件(改写)
* 也可以指定要格式化的文件路径：`prettier --write "app/**/*.test.js"`

```
prettier --check .
```

* 只会检查文件格式有没有符合要求，并不会改写文件

**编辑器**

当然，命令行的使用方式并不常用，我们更多是让编辑器帮我们自动格式化。

VSCode 可以安装 `Prettier - Code formatter` 插件。

[配置编辑器](https://prettier.io/docs/en/editors.html)

注意：记得在项目本地安装 prettier。

**ESlint**

如果项目同时也使用 ESlint 的话，需要安装 [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier#installation)，然后在 eslint 配置中加上 `extends: ['prettier']`。它会关掉 ESlint 中不需要的或者跟 prettier 有冲突的规则。

* prettier 是用来规范代码风格的，比如缩进多少、加不加分号之类的。
* eslint 更多是用来规范代码质量的，比如能不能有声明了但是不用的变量，能不能定义隐式全局变量这类规则。

## husky

虽然项目中是安装了 prettier，但不能保证每个人都能主动运行命令或者是配置编辑器。

所以，我们还是需要工具来自动检查和格式化。

[这里](/notes/articles/workflow/git-hooks.md) 已经介绍过 husky 是干什么的了。

```javascript
// package.json
{
    "husky": {
        "hooks": {
            "pre-commit": "prettier --write . && git add -A ."
        }
    }
}
```

* 执行 `prettier --write .` 格式化所有代码
* 执行 `git add` 把所有修改的文件加入暂存区，一起提交

## lint-staged

不过 `prettier --write .` 每次都会格式化所有文件，但其实我们只需要检查有修改的文件就好了。

lint-staged 就是用来解决这个问题的。

**安装**

```
npm i -D lint-staged
```

**配置**

```javascript
// package.json
{
    "husky": {
        "hooks": {
            "pre-commit": "lint-staged"
        }
    },
    "lint-staged": {
        "*": "prettier --write"
    }
}
```

**原理**

简单地说，lint-staged 就是把改动文件的路径加到了 `prettier --write` 命令后面。

同时它还把修改文件暂存了，我们也不需要 `git add -A .` 了。


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://suki.gitbook.io/notes/articles/workflow/prettier.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.