Prettier

官網連接：Prettier

爲何用 Prettier

目前爲止最大的緣由是，Prettier 能夠中止無休止的關於代碼格式的撕逼。
通常狀況下，項目和團隊都但願有一套統一的編碼格式，但執行起來卻很痛苦。工程師們對逼迫着按照某種格式編碼特別反感，更別說還要而外花費時間作這件事。

怎麼用

安裝

經過 yarn：yarn add prettier --dev 或 yarn global add prettier
經過 npm：npm install [--save-dev|--global] prettier

CLI 命令使用

命令：
prettier [opts] [filename ...]

格式化並替換文件：
prettier file --write

實際場景：
prettier --single-quote --trailing-comma es5 --write "{app,__{tests,mocks}__}/**/*.js"

ESLint

使用 eslint-plugin-prettier ，將其做爲 ESLint 的一個插件

yarn add --dev prettier eslint-plugin-prettier

// .eslintrc.json
{
  "plugins": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}複製代碼

建議使用 eslint-config-prettier 覆蓋掉其餘已有規則

yarn add --dev eslint-config-prettier

// .eslintrc.json:
{
  "extends": [
    "prettier"
  ]
}複製代碼

Pre-commit Hook 提交前的鉤子中使用

在 git add 後自動格式化代碼，三種方式：

1. lint-staged

經過 husky 實現，須要安裝 husky 和 lint-staged:

yarn add lint-staged husky --dev

// package.json
{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,json,css}": [
      "prettier --write",
      "git add"
    ]
  }
}複製代碼

不過有一點問題
可查看 github.com/okonet/lint… 查看詳細配置

2. pre-commit

將以下內容拷貝至 .pre-commit-config.yaml 文件

-   repo: https://github.com/prettier/prettier
    sha: ''  # Use the sha or tag you want to point at
    hooks:
    -   id: prettier複製代碼

詳情查看 github.com/awebdevelop…

3. bash script

把下面的腳本添加到 .git/hooks/pre-commit，可能須要修改腳本的執行權限

#!/bin/sh
jsfiles=$(git diff --cached --name-only --diff-filter=ACM | grep '\.jsx\?$' | tr '\n' ' ')
[ -z "$jsfiles" ] && exit 0

# Prettify all staged .js files
echo "$jsfiles" | xargs ./node_modules/.bin/prettier --write

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

exit 0複製代碼

爲何只是 js 文件？？？

須要注意的是：

1. 須要在本地安裝 Prettier：npm install prettier
2. 由於 .git 默認不會提交，因此這種方式適用於我的使用，若有須要，也可同步給其餘人

經過 API 使用

略

Options 參數

Prettier 提供少許自定義的參數設置，能夠用於 CLI 和 API 調用。如 Print Width，Tab Width，Tabs，Semicolons，Quotes 等。
詳情查看文檔

配置文件

Prettier 經過 cosmiconfig 模式定義配置文件，意味着你能夠定義以下格式：

• .prettierrc file, 內容能夠是 YAML 或 JSON, 後綴能夠是: .yaml/.yml/.json/.js.
• prettier.config.js 內容是 object.
• "prettier" 經過在 package.json 指定 key:value 形式.

配置內容同 API option，舉例：

JSON:

// .prettierrc
{
  "printWidth": 100,
  "parser": "flow"
}複製代碼

YAML:

# .prettierrc
printWidth: 100
parser: flow複製代碼

覆蓋重寫

Prettier 參照 ESLint 提供了覆蓋模式

JSON:

{
  "semi": false,
  "overrides": [{
    "files": "*.test.js",
    "options": {
      "semi": true
    }
  }]
}複製代碼

YAML:

semi: false
overrides:
- files: "*.test.js"
  options:
    semi: true複製代碼

files 和 excludeFiles 能夠是字符串或字符串數組

編輯器集成

支持 Atom，Emacs，Vim，Visual Studio Code，Visual Studio，Sublime Text，JetBrains WebStorm, PHPStorm, PyCharm 等

好比 Sublime Text，搜索安裝 jsPrettier 便可使用，前提是不作特殊配置

支持的腳本語言

全部的 javascript 語法，包含非標準化的。可使用 API parser 或 CLI --parser 指定編譯器。全部的 JSX 和 Flow 語法其餘如 TypeScript（^2.1.3）, CSS, Less, SCSS, JSON, and GraphQL 語法