Prettier

Prettier

简介：Prettier 是一个可配置化的代码美化（格式化）工具，往往用于统一项目中的代码风格。

安装

yarn add --dev prettier

使用

新建配置文件

在项目根目录下，创建.prettierrc文件，这个文件是 Prettier 的配置文件，我们可在这个配置文件中写一些配置，可覆盖 Prettier 的默认配置。

例如：

{
    // 设置tab宽度为4个空格
    "tabWidth": 4,
    // 语句末尾要加分号
    "semi": true,
    // 使用单引号
    "singleQuote": true
}

命令行自动格式化代码

我们可以通过配置一个脚本，对 src 中的所有文件进行 prettier 格式化

配置如下：

{
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "format": "prettier --write src/"
    }
}

然后，我们只需要运行yarn format，就可对 src 目录下的所有文件进行格式化了。

commit 时对所修改的文件进行格式化

很多时候，我们关心的只是如何将代码写好，代码的格式化如果能在我们 commit 的时候自动进行就好了。

既然要和 Git 整合，首先确保你当前的工程在用 Git。

和 Git 整合，有四种方法：

lint-staged，
pretty-quick
pre-commit
precise-commits
其中除了 pre-commit 之外，都是 npm 的 module，需要先 npm install ...。我们只介绍 lint-staged 用法。当你需要 Prettier 和其他 Linters 一起用的时候，也用 lint-staged。

先 npm install 吧：

// 先别运行这两行，下面会有更简单的办法
npm install husky
npm install lint-staged

其实，更简单的操作是运行下面这一行：

// 这一行就可以安装husky和lint-stage，并且配置好husky。
npx mrm lint-staged

husky（哈士奇）在这里的作用就是咬住 Git 的 hooks 不放。我们这里只关心 pre-commit 这一个 hook。

mrm 之后，你的 package.json 多了这些内容：

"devDependencies": {
    "husky": "^3.0.5",
    "lint-staged": "^9.2.5"
},
"husky": {
    "hooks": {
        "pre-commit": "lint-staged"
    }
},
"lint-staged": {
    "*.{js,css,json,md}": [
        "prettier --write",
        "git add"
    ]
}

以后，你每次进行 commit 的时候，prettier 将会自动对你要 commit 的文件进行格式化了。