Angular 代码规范之 Prettier 介绍 | 更文挑战第19天

莫莫莫
791 阅读4分钟

这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战

1. 什么是Prettier？

Prettier是一个代码格式化工具，它可以支持JS/JSX/TS/Flow/JSON/CSS/LESS等文件格式。

2. 下载哪些插件

  • 集成TsLint

tslint-plugin-prettier不公开推荐的配置。您应该结合上面的两个步骤。添加两者tslint-plugin-prettier并tslint-config-prettier作为开发人员依赖项，然后添加两组配置。

yarn add --dev tslint-config-prettier tslint-plugin-prettier

然后在tslint.json：

{
  "extends": ["tslint-plugin-prettier", "tslint-config-prettier"],
  "rules": {
    "prettier": true
  }
}

https://prettier.io/docs/en/integrating-with-linters.html#recommended-configuration-1

3. 添加忽略（不被格式化）

  • js： // prettier-ignore
// prettier-ignore
matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)
  • JSX: {/* prettier-ignore */}
<div>
  {/* prettier-ignore */}
  <span     ugly  format=''   />
</div>
  • HTML:
<!-- prettier-ignore -->
<div         class="x"       >hello world</div            >

<!-- prettier-ignore-attribute -->
<div
  (mousedown)="       onStart    (    )         "
  (mouseup)="         onEnd      (    )         "
></div>

<!-- prettier-ignore-attribute (mouseup) -->
<div
  (mousedown)="onStart()"
  (mouseup)="         onEnd      (    )         "
></div>
  • css: /* prettier-ignore */
/* prettier-ignore */
.my    ugly rule
{

}

4. 如何配置

如下是可配置项

如下只要关键词为是否xxxx的，true表示是的情况，false表示否的情况。

printWidth： 设置每行最大长度

  • 类型: init
  • 默认值： 80
  • 示例： "printWidth"： 120

tabWidth： tab的空格数

  • 类型: int
  • 默认值：2
  • 示例： "tabWidth"： 4

useTabs： 是否使用tab替换空格进行缩进

  • 类型: bool
  • 默认值：false
  • 示例： "useTabs"： true

Semicolons： 是否在语句末尾添加分号。

  • 类型: bool
  • 默认值：true
  • 示例： "Semicolons"： false

Quotes： 是否用单引号替换双引号。

  • 类型: bool
  • 默认值：false
  • 示例： "Quotes"： true

quoteProps：对象那个中属性的引号修改规则

  • 选项
    • "as-needed": 仅在对象属性需要添加引号的时候添加
    • "consistent"： 如果对象最后一个属性需要添加引号，则给所有属性添加引号
    • "preserve"： 遵循对象中属性的引号使用方法。
  • 默认值： "as-needed"
  • 示例: "quoteProps": "preserve"

jsxSingleQuote：jsx中是否使用单引号替代双引号

  • 类型: bool
  • 默认值： false
  • 示例: "jsxSingleQuote": true

trailingComma： 在末尾可能出现逗号的地方添加逗号

  • 选项
    • "none"：不添加
    • "es5"：在ES5中有效的尾随逗号(对象、数组等)
    • "all"： 在所有可能出现逗号的地方都添加上（函数参数）
  • 默认值： "none"
  • 示例: "trailingComma": "all"

bracketSpacing: 控制对象方括号之间是否显示空格

  • 类型: bool
  • 默认值： true
  • 示例: "bracketSpacing": false

jsxBracketSameLine:是否将多行jsx元素的>放在最后一行的末尾，而不是单独放在下一行

  • 类型: bool
  • 默认值： false
  • 示例: "jsxBracketSameLine": true

arrowParens: 箭头函数只有一个参数时用括号包裹

  • 选项
    • "avoid" : 不包裹
    • "always" : 包裹
  • 默认值： "avoid"
  • 示例: "arrowParens": "always"

rangeStart、rangeEnd: 格式化文件给定范围的代码

  • 类型: int
  • 默认值：
    • "rangeStart": 0
    • "rangeEnd": Infinity
  • 示例: "rangeStart": "100", "rangeEnd": "500"

parser: 指定要使用的解析器

Prettier会自动从输入文件路径中推断出解析器，因此您不必更改此设置。

  • 类型: string
https://prettier.io/docs/en/options.html#parser

filepath: 指定用于推断要使用的解析器的文件名。

例如，以下将使用CSS解析器：

cat foo | prettier --stdin-filepath foo.css
  • 示例： "filepath": "<string>"

requirePragma

Prettier可以将自己限制为仅在文件顶部格式化包含特殊注释（称为pragma）的文件。当逐步将大型未格式化的代码库转换为更漂亮的代码库时，这非常有用。
例如，提供以下内容作为其第一个注释的文件将被格式化--require-pragma：

/**
 * @prettier
 */

或者

/**
 * @format
 */
  • 示例： "requirePragma": <bool>

insertPragma

Prettier可以在文件顶部插入一个特殊的@format标记，指定文件格式更漂亮。当与--require-pragma选项一起使用时，这很有效。如果文件顶部已有docblock，则此选项将使用@format标记向其添加换行符。

  • 示例： "insertPragma": <bool>

proseWrap

默认情况下，Prettier将按原样包含markdown文本，因为某些服务使用对行敏感的渲染器，例如GitHub注释和BitBucket。在某些情况下，您可能希望依赖编辑器/查看器软包装，因此此选项允许您使用"never"进而不去包装它。

  • 选项
    • "always" : 如果超过打印宽度，请包装文本。
    • "never" : 不要包装文本。
    • "preserve" : 按原样包装文本。
  • 默认值： "preserve"
  • 示例: "proseWrap": "always"

htmlWhitespaceSensitivity： 指定HTML文件的全局空白区域敏感度

  • 选项
    • "css" : 遵守cssdisplay属性默认值的格式。
    • "strict" : 空格被认为是敏感的。
    • "ignore" : 空格被认为是不敏感的。
  • 默认值： "css"
  • 示例: "proseWrap": "strict"

endOfLine： 行结尾的风格设置

  • 选项
    • "auto" : 维护现有的行结尾（通过查看第一行之后使用的内容来标准化一个文件中的混合值）
    • "lf" : Line Feed only（\n），在Linux和macOS以及git repos内部很常见。
    • "crlf" : 回车符+换行符（\r\n），在Windows上很常见。
    • "cr" : 仅限回车符（\r），很少使用
  • 默认值： "auto"
  • 示例: "endOfLine": "crlf"

更多用法更新于 github

avatar
文章
阅读
粉丝