Open
Description
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"
Metadata
Assignees
Labels
No labels