Prettier 常用配置

用户8394166222431
6,772 阅读4分钟

常用配置

printWidth

一行最多多少个字符（超过后会要求换行）

默认值：80

tabWidth

指定每个缩进级别的空格数

默认值：2

useTabs

使用制表符而不是空格缩进行

默认值：false

semi

在语句末尾需要加分号

默认值：true

singleQuote

使用单引号

默认值：false

quoteProps

在何时需要给对象属性名添加引号（相当于JSON对象写法）

  • 默认值：as-needed

可选值：

  • as-needed - 仅在需要时才添加引号（例如包含特殊符号）
  • consistent - 如果对象里有一个属性加了引号，那么所有属性都要加引号
  • preserve - 你爱加不加，prettier不会提示、自动添加或删除

示例：

  • 不要求加引号

    var a = {
  name: "cat",
  age: "5"
}

  • 要求加引号

    var a = {
  "name": "cat",
  "age": "5"
}

jsxSingleQuote

在 JSX 中使用单引号而不是双引号

默认值：false

trailingComma

是否在多行逗号分隔语法中，在最后一个元素后面加逗号

默认值：es5

默认值从 none 变为 es5 in v2.0.0

可选值：

  • es5 - 对ES5支持的内容添加尾随逗号（如对象、数组）
  • none - 始终不加尾随逗号
  • all - 尽可能都加尾随逗号，但需要环境支持ES2017，或TypeScript 2.7

示例：

  • es5、all

    var a = {
  name: "cat",
  age: "5",
}

  • none

    var a = {
  name: "cat",
  age: "5"
}

bracketSpacing

在单行对象中，在左右保留一个空格

默认值：true

可选值：

  • true - Example: { foo: bar }.
  • false - Example: {foo: bar}.

arrowParens

单参数箭头函数是否需要加小括号

默认值：always

默认值从 avoid 变为 always in v2.0.0

可选值：

  • "always" - 总是加上小括号. Example: (x) => x
  • "avoid" - 尽可能省略小括号. Example: x => x

备注：官方认为，添加括号可以更方便地编写注释、类型声明和默认值，所以才修改了默认值为alaways

endOfLine

换行符类型

默认值：lf

可选值：

  • lf - \n Linux和MacOS换行符
  • crlf - \r\n Windows换行符
  • cr - \r 很少用
  • auto - 根据文件首行使用哪种换行符决定整个文件使用哪一个

不常用配置

Range

  • rangeStart：需要格式化和检查的字符起始偏移值（从头部开始）

    默认值：0

  • rangeEnd：需要格式化和检查的代码结束偏移值（从头部开始）

    默认值：Infinity

备注：这2个属性配合使用，可只格式化部分代码，可配合CLI使用，一般不会改配置文件里的

requirePragma

只格式化文件顶部有特殊注释（pragma）的文件

默认值：false

备注：如果你正准备从一个庞大且未被格式化过的代码库（屎山）过渡时，会非常有用

特殊注释：

/**
 * @prettier
 */

或者：

/**
 * @format
 */

insertPragma

对通过prettier格式化后的文件顶部添加@format特殊注释

默认值：false

备注：如果同时包含requirePragma和insertPragma，那么insertPragma将被忽略。通常由处理过渡的开发人员使用insertPragma，而其他人使用requirePragma

proseWrap

对一行字符数超过printWidth的文本换行 （仅对markdown文件有效）

默认值：preserve

可选值：

  • always - 超过时始终换行
  • never - 超过时不换行
  • preserve - 保持原样

htmlWhitespaceSensitivity

去除html元素中的多余空格

默认值：css

注意：该配置会影响到内联元素超出printWidth后的换行方式

备注：如果元素内容左右有空格或换行，HTML的块级元素（display: block，如div）显示时会忽略，而内联元素（display: inline，如span）则会显示成空格。该配置决定了prettier如何处理元素内部多余的空格，以及超出printWidth元素的换行方式

可选值：

  • css - 按照元素默认的CSS display样式决定是否移除多余空格
  • strict - 所有元素周围的空格和换行都有意义，保留所有空格，并在超出换行后黏连左右标签尖括号
  • ignore - 所有元素周围的空格和换行都没意义，删除所有空格，并正常换行

特殊注释：

如果自定义CSS样式覆盖了默认样式，可在元素上部添加特殊注释告诉Prettier按哪种类型格式化该元素

<!-- display: inline -->
<div style="display: inline"> a </div>
<!-- display: block -->
<span style="display: block"> b </span>

示例：

<!-- input -->
<html>
  <body>
    <div> a </div>
    <span> b </span>
    <div>aaaaaaaaaaa</div>
    <span>ccccccccc</span>
  </body>
</html>
​
<!-- css oputput -->
<html>
  <body>
    <div>a</div>
    <span> b </span>
    <div>
      aaaaaaaaaaa
    </div>
    <span
      >ccccccccc</span
    >
  </body>
</html>
​
<!-- strict oputput -->
<html>
  <body>
    <div> a </div>
    <span> b </span>
    <div
      >aaaaaaaaaaa</div
    >
    <span
      >ccccccccc</span
    >
  </body>
</html>
​
<!-- ignore oputput -->
<html>
  <body>
    <div>a</div>
    <span>b</span>
    <div>
      aaaaaaaaaaa
    </div>
    <span>
      ccccccccc
    </span>
  </body>
</html>

vueIndentScriptAndStyle

vue文件中<script>和<style>标签内部代码是否缩进

默认值：false

avatar
文章
阅读
粉丝