Perttier 使用
官网
What is Prettier? · Prettier
安装
1
2
3
4
5
6
7
8
9
|
# 全局安装
npm install -g prettier
# or
yarn global add pretter
# 项目中安装
npm install --save-dev --save-exact prettier
#or
yarn add prettier --dev --exact
|
配置
配置的位置
-
package.json
中的 perttier
字段
-
JSON或者YAML格式的 .prettierrc
-
.prettierrc.json
, .prettierrc.yml
, .prettierrc.yaml
, .prettierrc.json5
-
.prettierrc.js
, .prettierrc.cjs
,prettierrc.config.js
,prettierrc.config.cjs
1
2
3
4
5
6
7
8
9
10
11
|
{
"tabWidth": 2, // tab缩进大小,默认为2
"useTabs": true, // 使用tab缩进,默认false
"semi": false, // 使用分号, 默认true
"singleQuote": true, // 使用单引号, 默认false(在jsx中配置无效, 默认都是双引号)
"TrailingCooma": "none", // 行尾逗号,默认none,可选 none|es5|all,es5 包括es5中的数组、对象,all 包括函数对象等所有可选
"bracketSpacing": true, // 对象中的空格 默认true
"jsxBracketSameLine": false, // JSX标签闭合位置 默认false
"arrowParens": "avoid", // 箭头函数参数括号,默认avoid 可选 avoid| always,avoid 能省略括号的时候就省略 例如x => x,always 总是有括号
"htmlWhitespaceSensitivity": "strict" //html空格严格程度,可选<css|strict|ignore>
}
|
配置文件的位置从被格式化的文件的位置找起,然后沿着文件系统向上寻找。注意,prettier没有全局的配置文件。
配置的例子
JSON:
1
2
3
4
5
6
|
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true
}
|
JS:
1
2
3
4
5
6
7
|
// prettier.config.js or .prettierrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true,
};
|
YAML:
1
2
3
4
5
|
# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true
|
TOML:
1
2
3
4
5
|
# .prettierrc.toml
trailingComma = "es5"
tabWidth = 4
semi = false
singleQuote = true
|
覆盖配置文件
可以根据文件类型和目录指定不同的配置
JSON:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
{
"semi": false,
"overrides": [
{
"files": "*.test.js",
"options": {
"semi": true
}
},
{
"files": ["*.html", "legacy/**/*.js"],
"options": {
"tabWidth": 4
}
}
]
}
|
YAML:
1
2
3
4
5
6
7
8
9
10
|
semi: false
overrides:
- files: "*.test.js"
options:
semi: true
- files:
- "*.html"
- "legacy/**/*.js"
options:
tabWidth: 4
|