官网链接: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复制代码
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 语法