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