Perttier 使用

官网

安装

        
        
        
    
# 全局安装
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

        
        
        
    
{
  "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:

        
        
        
    
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

JS:

        
        
        
    
// prettier.config.js or .prettierrc.js
module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

YAML:

        
# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

TOML:

        
# .prettierrc.toml
trailingComma = "es5"
tabWidth = 4
semi = false
singleQuote = true

覆盖配置文件

可以根据文件类型和目录指定不同的配置

JSON:

        
        
        
    
{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

YAML:

        
        
        
    
semi: false
overrides:
  - files: "*.test.js"
    options:
      semi: true
  - files:
      - "*.html"
      - "legacy/**/*.js"
    options:
      tabWidth: 4