# Prettier

## Target

提交代碼時…

1. 自動格式化代碼
2. 使用 ESLint 檢查代碼，並自動修復錯誤
3. 在修復不了的時候，回報錯誤（此次 commit 不會提交）

## Basic Configuration

`.prettierrc` 

```yaml
{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve"
}

```

{% embed url="<https://prettier.io/docs/en/configuration.html>" %}

## Install

```
yarn add -D prettier
```

`package.json`

```javascript
{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\""
  }
}

```

```javascript
{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\" \"test/**/*.ts\""
  }
}

```

{% embed url="<https://prettier.io/docs/en/install.html>" %}

## Integrating with ESLint Linters

If you use ESLint, install [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier#installation) to make ESLint and Prettier play nice with each other. It turns off all ESLint rules that are unnecessary or might conflict with Prettier.

```
yarn add -D eslint-config-prettier eslint-plugin-prettier
```

{% hint style="info" %}
`eslint-config-prettier`: 關閉所有不必要或可能跟 Prettier 產生衝突的規則。 \
`eslint-plugin-prettier`: 可以讓 ESLint 使用 Prettier 規則進行檢查，並使用 --fix 選項。
{% endhint %}

`.eslintrc`

```yaml
{
  "extends": [
    "plugin:prettier/recommended",
    "prettier"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

```

{% hint style="info" %}
使 `eslint-config-prettier` 生效。覆蓋 ESLint 中與 Prettier 衝突的配置。\
使 `eslint-plugin-prettier` 生效，不符合 prettier/prettier 的規則會報錯。
{% endhint %}

{% embed url="<https://prettier.io/docs/en/install.html#eslint-and-other-linters>" %}

{% embed url="<https://prettier.io/docs/en/integrating-with-linters.html>" %}

## Git Pre-commit Hook**s**

Run Prettier as a pre-commit hook to makes sure all your commits are formatted.

```
yarn add -D husky lint-staged

npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"
```

{% hint style="info" %}
`husky`: Git hooks，這裡主要用 pre-commit 鉤子，在 commit 之前幫你做一些事情。\
`lint-staged`: 在提交的文件中，執行自定義的指令。
{% endhint %}

`package.json`

```javascript
{
  "lint-staged": {
    "**/*": "prettier --write --ignore-unknown"
  }
}
```

```javascript
{
  "lint-staged": {
    "src/**/*.{js,jsx,ts,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}
```

{% hint style="info" %}
Note: If you use ESLint, make sure lint-staged runs it before Prettier, not after.
{% endhint %}

{% embed url="<https://prettier.io/docs/en/install.html#git-hooks>" %}

{% embed url="<https://prettier.io/docs/en/precommit.html>" %}

## Additional

#### CI setup

Run `prettier --check .` in CI to make sure that your project stays formatted.

```
prettier --check .
```

{% hint style="info" %}
`--check` is like `--write`, but only checks that files are already formatted, rather than overwriting them.
{% endhint %}

## Reference

* [Configuration File](https://prettier.io/docs/en/configuration.html)
* [Options](https://prettier.io/docs/en/options.html)
* [Integrating with Linters](https://prettier.io/docs/en/integrating-with-linters.html)
* [Related Projects](https://prettier.io/docs/en/related-projects.html)
* [Pre-commit Hook](https://prettier.io/docs/en/precommit.html)
* [代碼風格統一：使用husky,prettier,eslint在代碼提交時自動格式化，並檢查代碼。](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/708644/)