格式化代码，这个需求不论在前端还是后端都太常见了。格式化舒服，写代码都利索些。最开始我是在 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 所指定的。

Tab Width

指定缩进用几个空格数。

Tabs

用tab代替空格，进行缩进

Semicolons

行尾自动加上分号

Quotes

用单引号代替双引号

Quote Props

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

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

// --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里用单引号代替双引号

Trailing Commas

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

Bracket Spacing

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

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

JSX Brackets

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

<!--配置设为  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

Range

Parser

File Path

Require Pragma

Insert Pragma

Prose Wrap

HTML Whitespace Sensitivity

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

Vue files script and style tags indentation

是否对Vue文件中<script>和<style>标签内的代码进行缩进。有些人（比如Vue的创建者）不缩进以节省缩进级别，但这可能会破坏你编辑器中的代码折叠。

• "false" - 不对 Vue文件中<script>和<style>标签内的代码进行缩进
• "true" - 对 Vue文件中<script>和<style>标签内的代码进行缩进

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)