Prettier-CSDN博客

官网链接：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 文件？？？

需要注意的是：

需要在本地安装 Prettier：npm install prettier
因为 .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 语法