白话 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	printWidth:

Tab Width

指定缩进用几个空格数。

默认值	CLI 参数	配置参数
2	--tab-width	tabWidth:

Tabs

用tab代替空格，进行缩进

默认值	CLI 参数	配置参数
false	--use-tabs	useTabs:

Semicolons

行尾自动加上分号

默认值	CLI 参数	配置参数
true	--no-semi	semi:

Quotes

用单引号代替双引号

默认值	CLI 参数	配置参数
false	--single-quote	singleQuote:

Quote Props

对象里的key是否用引号包裹。

"as-needed" - 仅在须要时增加引号.
"consistent" - 如一个属性值须要引号，则所有属性包裹引号.
"preserve" - Respect the input use of quotes in object properties.

默认值	CLI 参数	配置参数
80	--quote-props	quoteProps: ""

// --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:

Trailing Commas

自 v2.0.0版本起，默认值由 none 调整为 es5
多行情况下，在末尾增加逗号

默认值	CLI 参数	配置参数
es5	--trailing-comma	trailingComma: ""

Bracket Spacing

对象字面量增加空格
可用选项

true - 示例结果: { foo: bar }.
false - 示例结果: {foo: bar}

默认值	CLI 参数	配置参数
true	--no-bracket-spacing	bracketSpacing:

JSX Brackets

在JSX里多行元素的最后一行使用 > 闭合元素，而不是新开一行单独闭合(不适用于自闭合元素)

默认值	CLI 参数	配置参数
false	--jsx-bracket-same-line	jsxBracketSameLine:

Arrow Function Parentheses

箭头函数的单参数是否用括号包裹

"always" - 保证括号包裹. 例子: (x) => x
"avoid" - 单参数时无括号包裹. 例子: x => x

默认值	CLI 参数	配置参数
"always"	--arrow-parens	arrowParens: ""

Range

默认值	CLI 参数	配置参数
80	--print-width	printWidth:

Parser

默认值	CLI 参数	配置参数
80	--print-width	printWidth:

File Path

默认值	CLI 参数	配置参数
80	--print-width	printWidth:

Require Pragma

默认值	CLI 参数	配置参数
80	--print-width	printWidth:

Insert Pragma

默认值	CLI 参数	配置参数
80	--print-width	printWidth:

Prose Wrap

默认值	CLI 参数	配置参数
80	--print-width	printWidth:

HTML Whitespace Sensitivity

指定HTML对空格的敏感度，以处理空格

默认值	CLI 参数	配置参数
"css"	--html-whitespace-sensitivity	htmlWhitespaceSensitivity: ""

Vue files script and style tags indentation

是否对Vue文件中