Prettier 小记

介绍

按官方介绍，Prettier 是一款支持多种语言的代码格式化工具，它适配各种编辑器，并且配置参数少。像React、Babel等众多知名前端工具库都用到了它。

它的格式化目前（2021.03）支持以下语言：
JavaScript (including experimental features)、JSX、Angular、Vue、Flow、TypeScript、CSS, Less, and SCSS、HTML、JSON、GraphQL、Markdown, including GFM and MDX、YAML

Prettier 会生成更漂亮的代码，并且不会影响AST。与Linters 不同，Prettier 仅注重代码格式，而 Linters 会关注代码bug。

使用

安装

1
npm install --save-dev --save-exact prettier

或yarn

1
yarn add --dev --exact prettier

配置

然后在项目根目录下创建配置文件.prettierrc.json和忽略配置文件.prettierignore。
常见的配置如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
{
    // tab缩进大小,默认为2
    "tabWidth": 4,
    // 使用tab缩进，默认false
    "useTabs": false,
    // 使用分号, 默认true
    "semi": false,
    // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
    "singleQuote": false,
    // 行尾逗号,默认none,可选 none|es5|all
    // es5 包括es5中的数组、对象
    // all 包括函数对象等所有可选
    "TrailingCooma": "all",
    // 对象中的空格 默认true
    // true: { foo: bar }
    // false: {foo: bar}
    "bracketSpacing": true,
    // JSX标签闭合位置 默认false
    // false: <div
    //          className=""
    //          style={{}}
    //       >
    // true: <div
    //          className=""
    //          style={{}} >
    "jsxBracketSameLine": false,
    // 箭头函数参数括号 默认avoid 可选 avoid| always
    // avoid 能省略括号的时候就省略 例如x => x
    // always 总是有括号
    "arrowParens": "avoid"
}

.prettierignore的配置与.gitignore类似，如

1
2
3
4
build
coverage
dist
node_modules

需要注意的是，.prettierignore会基于.gitignore和.eslintignore（如果有的话）。

如果您的项目尚无法格式化，例如HTML文件，请添加*.html。

格式化

执行

1
npx prettier --write .

或yarn

1
yarn prettier --write .

如果您具有CI设置，请作为一部分运行以下命令，以确保每个人都运行Prettier。这样可以避免合并冲突和其他协作问题。

1
prettier --check .

--check类似--write，但check不会重写文件。

编辑器接入

官方文档：https://prettier.io/docs/en/editors.html

如 vscode插件：prettier-vscode

安装后使用：

  • 1.编辑器命令行：
1
2
3
4
1. CMD + Shift + P -> Format Document
OR
1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
  • 2.保存时执行editor.formatOnSave：
1
2
3
4
5
6
// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

其中格式支持：

1
2
3
4
5
6
javascript
javascriptreact
typescript
typescriptreact
json
graphql

整合 Linters

Linters 通常不仅包含代码质量规则，而且还包含样式规则。使用Prettier时，大多数样式规则都是不必要的，但更糟糕的是，它们可能与Prettier冲突！

我们可以通过使用以下插件，避免冲突：

首先，我们有一些插件，可以让您像对待Linters 规则一样运行Prettier：

我们提供了可以更漂亮地运行然后立即运行的工具，例如文件上的eslint --fix。

.eslintrc.json修改：

1
2
3
4
5
6
7
8
9
10
{
    "env": {
        "browser": true
    },
    "extends":["plugin:prettier/recommended"], // 使用 prettier 推荐配置
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    }
}

ESlint 与 Prettier 的合作关系： 由于 ESlint 自身自动格式化功能不够完善，Prettier 代替了 ESlint 格式化能力，利用了 ESlint 的检测和提示

pre-commit

在提交之前，这可以通过git add重新格式化标记为“暂存”的文件。

lint-staged

当您想与Prettier一起使用其他代码质量工具（例如ESLint，Stylelint等）或需要支持部分暂存文件（git add –patch）时，此功能很有用。

在继续之前，请确保已安装Prettier并在您的devDependencies中。

1
npx mrm lint-staged

这将安装husky 和 lint-staged，并且运行时是lint-staged，然后将配置添加到项目的package.json中，该配置将在预先提交的挂钩中自动格式化支持的文件。

pretty-quick

安装husky，

1
npm install --save-dev pretty-quick husky

然后在package.json中设置：

1
2
3
4
5
6
7
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  }
}

pre-commit

设置.pre-commit-config.yaml文件：

1
2
3
4
- repo: https://github.com/pre-commit/mirrors-prettier
  rev: "" # Use the sha or tag you want to point at
  hooks:
    - id: prettier

git-format-staged

1
npm install --save-dev git-format-staged husky

配置package.json：

1
2
3
4
5
6
7
{
  "husky": {
    "hooks": {
      "pre-commit": "git-format-staged -f 'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"' ."
    }
  }
}

Shell script

或者，您可以将此脚本另存为.git/hooks/pre-commit并授予其执行权限：

1
2
3
4
5
6
7
8
9
10
11
#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR "*.js" "*.jsx" | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --write

# Add back the modified/prettified files to staging
echo "$FILES" | xargs git add

exit 0

如果git报告您提交的美化文件在提交后仍被修改，则您可能需要添加提交后脚本来更新git的索引。

在.git/hooks/post-commit中添加以下内容：

1
2
#!/bin/sh
git update-index -g

插件

https://prettier.io/docs/en/plugins.html