白话 Prettier
格式化代码，这个需求不论在前端还是后端都太常见了。格式化舒服，写代码都利索些。最开始我是在 Sublime Text 写代码，并用 HTML-CSS-JS Prettify 来格式化代码。但是后来随着项目中开始使用 **Vue React ** 框架和 SCSS 预处理器，不得不开始装各个框架的格式化插件。最开始不觉得繁琐，但是~ 切换电脑或重装软件时，繁琐的操作特别上头。
偶然一次新建deme，发现 vue-cli 初始化项目时，有个选项是 eslint + prettier ，于是新大门打开了 ^ _ ^
先抛出为啥推荐 prettier，如果你编码在前端，并且常常需要在以下的语言或框架中作战
- JavaScript
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
那么使用 prettier 后，就可以不用再安装针对以上语言或框架的格式化插件了，并且 prettier 格式化的风格统一，让处女座(强迫症)的你，神清气爽~
所以 prettier 是什么？ 简单粗暴的回答就是：一款可以格式化多种语言框架的格式化插件 (dei~ 口号像 java 一样，编码一次，四处使用)
知道是啥了，那么开始使用~
以在 Visual Studio Code 使用为例：
首先安装
然后配置
CLI 参数: 在命令行里手动输入的参数
配置参数:在配置文件中设置的参数
以下时配置项的直译，如有疑问可以点击前往官网查看原文
Print Width
指定每行的长度
为了便于阅读，建议不要使用超过80个字符。
在代码样式指南中，最大行长规则通常被设置为100或120。然而，编写代码时，并不会达到每行的最大列数。开发人员为了可读性，经常使用空白处来打断长行。在实际操作中，平均行长往往会远远低于最大行数。
Prettier 的 printWidth 选项的工作方式不一样。它不是硬性的允许行长上限。它是一种告诉 Prettier 你想要的行长的方法。Prettier会制作较短和较长的行数，但一般会努力满足指定的 printWidth。
记住，计算机是笨的。你需要明确地告诉它们该怎么做，而人类可以做出自己的判断，例如何时断行。
换句话说，不要试图把 printWidth 当作 ESLint 的 max-len 来使用，它们是不一样的。max-len 只说了允许的最大行长，但没有说一般的首选长度，而这正是 printWidth 所指定的。
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
Tab Width
指定缩进用几个空格数。
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 2 | --tab-width <int> | tabWidth: <int> |
Tabs
用tab代替空格，进行缩进
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| false | --use-tabs | useTabs: <bool> |
Semicolons
行尾自动加上分号
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| true | --no-semi | semi: <bool> |
Quotes
用单引号代替双引号
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| false | --single-quote | singleQuote: <bool> |
Quote Props
对象里的key是否用引号包裹。
-
"as-needed"- 仅在须要时增加引号. -
"consistent"- 如一个属性值须要引号，则所有属性包裹引号. -
"preserve"- Respect the input use of quotes in object properties.
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --quote-props <as-needed|consistent|preserve> | quoteProps: "<as-needed|consistent|preserve>" |
// --quote-props=as-needed
const headers = {
accept: 'application/json',
'content-type': 'application/json',
};
// --quote-props=consistent
const headers = {
'accept': 'application/json',
'content-type': 'application/json',
};
JSX Quotes
在JSX里用单引号代替双引号
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| false | --jsx-single-quote | jsxSingleQuote: <bool> |
Trailing Commas
自 v2.0.0版本起，默认值由 none 调整为 es5
多行情况下，在末尾增加逗号
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| es5 | --trailing-comma <es5|none|all> | trailingComma: "<es5|none|all>" |
Bracket Spacing
对象字面量增加空格
可用选项
-
true- 示例结果:{ foo: bar }. -
false- 示例结果:{foo: bar}
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| true | --no-bracket-spacing | bracketSpacing: <bool> |
JSX Brackets
在JSX里多行元素的最后一行使用 > 闭合元素，而不是新开一行单独闭合(不适用于自闭合元素)
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| false | --jsx-bracket-same-line | jsxBracketSameLine: <bool> |
<!--配置设为 true 的 示例结果-->
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}>
Click Here
</button>
<!--配置设为 false 的 示例结果-->
<button
className="prettier-class"
id="prettier-id"
onClick={this.handleClick}
>
Click Here
</button>
Arrow Function Parentheses
箭头函数的单参数是否用括号包裹
-
"always"- 保证括号包裹. 例子:(x) => x -
"avoid"- 单参数时无括号包裹. 例子:x => x
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| "always" | --arrow-parens <always|avoid> | arrowParens: "<always|avoid>" |
Range
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
Parser
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
File Path
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
Require Pragma
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
Insert Pragma
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
Prose Wrap
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| 80 | --print-width <int> | printWidth: <int> |
HTML Whitespace Sensitivity
指定HTML对空格的敏感度，以处理空格
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| "css" | --html-whitespace-sensitivity <css|strict|ignore> | htmlWhitespaceSensitivity: "<css|strict|ignore>" |
Vue files script and style tags indentation
是否对Vue文件中<script>和<style>标签内的代码进行缩进。有些人（比如Vue的创建者）不缩进以节省缩进级别，但这可能会破坏你编辑器中的代码折叠。
-
"false"- 不对 Vue文件中<script>和<style>标签内的代码进行缩进 -
"true"- 对 Vue文件中<script>和<style>标签内的代码进行缩进
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| false | --vue-indent-script-and-style | vueIndentScriptAndStyle: <bool> |
End of Line
结尾换行符
-
"lf"– Line Feed only (\n), 常用于 Linux , macOS -
"crlf"- Carriage Return + Line Feed characters (\r\n), 常用于 Windows -
"cr"- Carriage Return character only (\r), MacIntosh操作系统（即早期的Mac操作系统）,现在很少用了 -
"auto"- Maintain existing line endings (mixed values within one file are normalised by looking at what’s used after the first line)
| 默认值 | CLI 参数 | 配置参数 |
|---|---|---|
| "lf" | --end-of-line <lf|crlf|cr|auto> | endOfLine: "<lf|crlf|cr|auto>" |
