Prettier

本文依据官网意译，如有差错，欢迎纠正

简介

Prettier 是一个包括许多固有标准的代码格式化东西，支撑多种前端开发言语以及 Markdown 、YAML，它能够保证代码出现的一致性。

为什么要用 Prettier ？

Prettier 官网上说 “运用 Prettier 最CSS重要的原因就是间断在代码风格上的CSS争辩”。的确如此，在一个团队里或许项目中，有一个一同的代码风格攻略是一件十分有价值的工作。但假定仅靠人为陈涉世家翻译及原文的去控制编程时的代码风格是一件十分苦楚且不值得这样去做。所以需求凭借 Prettier 来帮咱们完结代码风格的一致，由于它是全主动的帮咱们批改代代码标准化码格式。

Prettier 和 Linters 的差异

Linters ( ESLint / TSLint 等) 首要包括2类规矩：

  • 代eslint标准码风格规矩

    能够用来查看代码风格是否契合约好标准，但并不会主动排版，Prettier 则会依据约好好的代码标准主动排版。所以用了 Prettier 之后，此类规矩大部分就不再需求了。

  • 代码质量规矩

    能够用来帮咱们查看语法差错、拼写差错等，能够逃避一些实在windows字体被申述的 bugs，但 Prettier 并不能在这些方面供应帮助。

总结来说，Linters 首要用于查看代码标准和语法CSS差错，Prettier 则代码标准标准首要用于查看代码风格并主动排版，因此，两者分配运用能更大程度的帮助开发者们前进编程功率。

固有风格

Pretti代码标准查看东西er 只需很少的装备项，且今后也不会增加。

Prettier 所供应的代码element什么意思格式化标准并不是为所欲为、彻底可配的，大部分都是内置固定的代码标准。由于它的初衷就是为了间断在代windows10激活密钥码风格上的争辩，所windows字体被申述以并不是彻底安闲的，但它供应的代码格windows10激活密钥式化标准现已度过了研讨阶段，被许多大型安排或项目选用，是一个满意老到的计划。

运用

设备插件

运用 npm 设备

npm install陈涉世家翻译及原文 --save-dev --save-exact prettier

运用 yarn设备

yarn add --dev --eslint封闭exact prettier

创立装备文件

项目根目录下创立 .prettierrc.json 文件

{}

创立疏忽文件

项目根目录下创立 .prettierignore 文件

Tip! Base your .prettierignore on .gitignore and .eslintieslint是什么gnore (eslint原理if you have one).eslint原理

示例

# 疏忽文件夹:
build
coverage
# 疏忽某一类型文件:
*.html

单文件中疏忽格式化

JavaScript

// pretelementary怎样读英语tier-ignore
matrix(
1, 0, 0,
0, 1eslint文档, 0,
0, 0, 1
)

Jeslint标准SX

<div>
{/* prettier-ignore */}
<span     ugly  format=''   />
</div>

HTML

<!-- prettier-ignore -->
&lteslint是什么;div         class="x"       >hello world</div            >
<!-- prettier-ignoreslint vuee-attribute -->
&代码标准文档lt;div
(mousedown)="       onSelementary怎样读英语tart    (    )         "
(mouseup)="         onEnd      (    )         "
><windows字体被申述/div>
<!-- prwindows字体被申述ettier-ignore-attribute (mouseup) -->
<div
(mousedown)="onStart()"
(mouseup)="         onEnd      (    )         "
></div>

CSS

/* prettier-ignore */
.my    ugly rule
{
}

Markdown

<!element什么意思-elements是什么牌子- prettier-ignore -->
Do   not    format   this

多行疏忽

<!-- prettier-ignor辰时是几点到几点e-start -->
<!-- prettier-ignore-end -->

运用指令行格式化

格式化悉数文件

// npmelement什么意思
npx prettier --write .
// yarn
yarn prett代码标准性ier --write .

格式化文件夹

// npm
npx prettier --write app/element结构
// yarn
yarn prettier --write app/

格式化elements什么意思中文文件

// npm
npx prettier --write app/components/Button.js
// yarn
yarn prettier --write app/components/Button.js
//
yarn prettier --write "app/**/*.test.js"

查看文件是否现已格式化

// npm
npx prettier --check .
//windows键是哪个 yarn
yarn prettier --check .

--check 指令只会查看现已格式化的文件，而不会重写它们。

--writelement什么意思e 则会主动查看并排版。

编辑器集成

在编辑器中集成 Prettier 是最广泛的运用方法。具体集成方法请查看各编辑器的 扩展/插件 运用阐明。

留神 ! 需求在每个项目eslint语法中都设备 Pelementuirettier 插件，然后保证它们运用正确的版别。

VSCode 扩展下载 Prettier - Code formatter

ESLint

假定你运用了 ESlint ，设备 eslint-config-prettier 插件能够保证 ESLint 和 Prettier 能够完美分配，这个插件封闭了悉数不必要或许会引起抵触的 ESLint rules。

相同的，假定你运用了 Stylelint，也能够设备 stylelint-config-prESLintettier 插件。

其他插件查看文档 Integrating with Linters

Pre-commit Hook

Pre曾是少年时小说ttier 也可用于 pre-elementary是什么意思commit ,具体运用参见 Pre-commit Hook

装备项

Print Width

指定代码换行的字符长度，默许eslint是什么为 80，跨越该长度会换行。

出于可读性考虑，官方主张不跨越 80个字代码标准查看东西符。

Default CLI Override API Override
80 --print-width <int> printWidth: <int代码标准快捷键>

Tab Wi代码标准标准dth

指定缩进长度，默许为 2。

Default CLI Override API Overrid代码标准e
2 --tab-width <int> tabWidth: <int>

Tabs

指定缩进的方法eslint报错：空格 或 Tab，默Element以为 false，即运用空格缩进。

Default CLI Override API代码标准 Override
false --use-tabs useTabs: <bool>

Semicolons

指定语句的结束是否要运用分号。

Default CLCSSI Override API Override
true --no-semi semi: <bool&gtelements是什么牌子;

Quot代码标准化es

运用单引号代替双引号。

JSX 引号会疏忽这条规矩。

Default CLI Override API Override
false --single-quote singleQuote: <bool>

Quote

方windows7旗舰版针的特征是否需求增加引号，默许 as-needed

  • "as-needed" – 政策的特征需求加引号时才会增加
  • "consistent" – 只需有一个政策特征需求加引号，代码标准的重要性则都会加上引号
  • "preserve" – 原样保存
Default CLI Override API Override
"as-needed" `–quote-prwindows是什么意思ops <as-needed consistent

留神，在 Vue、Angular、 TypeScript and Flow 语句中，Pretelements什么意思中文tier 不会对数值类型的特征增加引号

JSX Quotes

在 JSX 中运用单引号代替双引号，默代码标准许 fals代码标准标准e

Default CLI Override API Override
false --jsx-single-quote jsxSingleQuote: <bool>

Trailing Commas

元素结束的逗号。默许为 es5

如下例中数组终究一个元素后的逗号现已政策终究一个特征后的逗号。

const array = [1,2,3,];
cosnt objecwindows10t = {
name: 'cat',
age: 3,
}
  • "es5" – ES5中的 objects, arrays 等会增加逗号，TypeScript 中的 type 后不加逗号
  • "none" – 都代码标准包括什么不增加逗号
  • "all" – 总是增加逗号，包括函数的参数后也会加逗号
Default CLI Override API Oveeslint报错rride
"es5" `–trailing-comma <es5 none

Bracket Spacing

政策中的空格，默许为 true

  • true – 例如: { foo: bar }
  • false – 例如: {foo: bar}
Defaul代码标准性t CLI Override API Override
true --no-bracket-swindows7旗舰版pacing brackeelementarytSpacing: <bool>

JSX Brackets

将 html 初步标签的后面一个 > 放在最elementary怎样读英语终一行的结束，而不是独自一行。

默许 false，即独自一行

  • truewindows是什么意思 – 例如:
<button
className="prettier-windows10class"
onClick={this曾是少年时小说.handleClick}>
Clic辰时是几点到几点k Here
</button&g代码标准七大原则t;
  • false – 例如:
<button
className="prettier-class"
onClick={thelements什么意思中文is.handleClick}
>
Click Here
&ltwindows是什么意思;/buttelementuion>
Default CLI Override API Override
false --jsx-bracket-same-line jsxBracketSameLine: <bool>

Arrow Function Parenthes代码标准化es

当箭头函数只需一个参数时，是否加上括号，默许 always 。

带上括号有利于增加类型注释，扩展参数windows键是哪个或许设置参数默许值

  • "always" – 例如: (x) => x
  • "avoid" – 例如: x => x
Default CLI Override API Override
"always" `–arrow-parens &windows10lt;always avoid>windows许可证即将过期怎样办`

Range

只格式化文件中的某一段代码

Default CLI Override API Overridwindows系统e
0 --range-start <int> rangeStart: <int>
Infinity --rangESLinte-end <int> rangCSSeEnd: <int>

Parser

指定代码标准代码格式化eslint vue的解析器。 Prettier 会主动依据文件类型揣度解析器，一般不需elementary是什么意思求额定指定。 Parser

File Path

指定文件名用来揣度运用哪一种解eslint报错析器 parser

该装备项只在 CLI 和 API 收效，在装备文件中设置是无效的

Require Pragma

指定编译指示：只格式化在文件顶部包括特定注释的文件。elements

当需求逐步陈思思格式化某个大体量的项目时，这是十分有用的。

默许为 fasle 。设置windows10激活密钥为 true 时，运用以下两种注释的文件，会被格式化。

/*element什么意思*
* @Windowsprettier
*/

/**
* @format
*/
Default CLI Override API OESLintverride
false --r代码标准性e曾是少年时小说quire-pragma requirePragma: <bool>

Insert Pragma

刺进编译指示：当文件现已被 Prettier 格式化之后，会在文件顶部刺进一个特殊的 @format 符号。

Default CLI Override API Override
false --insert-pragmelementsa insertPragma: <bool>

Prose Wrap

Prose Wrap

By default, Prettier will wrap markdown text as-is since some services use a linebreak-sensitive renderer, eelement什么意思.g. GitHub comment and BitBuwindows字体被申述cket. In some cases you may want to rely on editor/viewer soft wrapping instead,CSS so this option allows y代码标准标准ou to opt out with "never".

  • "always" – Wrap prose if it exceeds the print width.elementanimation
  • "neve代码标准文档r" – Do not wrap prose.
  • "preserve" – Wrap prose as-is. Firstwindows10激活密钥 available in v1.9.0
Default CLI Override API Override
"preserve" `–pESLintrose-wrap <always never

HTML Whitespace Sensitivity

指定对 HTML,element结构 Vue, Angular,windows键是哪个 and Handleba代码标准rs 文件中的空格坚持活络。

如下示例，是否对保留空格将会直接影响到页面的出现：

html output
with spaces 1<b&geslint是什么t; 2 </b>3 1 2 3
without seslint原理paces 1<b>2</b>3 123

所以需求设置 whitespace-seneslint报错sitive formatting。

设定为 css 时会依据标签的 displESLintay 特征 ( inline、block ) 选用不同的格式化方法，例如：

&lelementuit;!-- <span代码标准> is an inline element, <div> is a block element -->
<!-- 格式化前，依据标签特征选用格式化方法 -->
<span class="dolorum atque aspernatur">Est molestiae swindows系统unt facilis qui代码标准性 rem.</span>
<div class="voluptatem ar代码标准快捷键chitecto at">Architecto rerum architecto incidunt sint.</divelementary是什么意思>
<!-- 格式化后 --&代码标准文档gt;
<span class="doloruwindows怎样激活m atque aspernatur"
>Est molestiae sunt facilis qui rem.</span
>
&lwindows10t;div class="voluptatem architecto at">
Architecto rerum architecto ineslint vuecidunt sint.
</div>

也可手动指定 display 类型

<!-- 格式化前，手动指定为 block 特征 -->
<!-- display: block -->
<windows键是哪个span class="dolorum atque aspernatur">Est molestiae sunt facilis qui rem.</span>
<!--仓鼠养殖八大忌讳 格式化后 -->
<!elementui-- display: block -->
<span class="dolorum atque aspernatur">
Esteslint文档 molestia代码标准的重要性e sunt fa长生十万年cilis qui rem.
</span>

更概略的用法参见 Whitespace-sensitive formeslint标准atting

  • "css" – 遵从ESLint CSS代码标准的重要性 的 display 特征
  • "strict" – 悉数空格都将认定为是有意义的
  • "ignore" – 悉数空格都将认定为是无意义的
Default CLI Override AP代码标准性I Override
"css" `–htmlwindows字体被申述-whitespace-sensitivity <css strict

Vue files script and style tags代码标准查看东西 indeneslint封闭tation

vue 文件中，是否给 script 和 style 内的代码增加缩进。

  • "false" – 不增加缩进，例如：
<script>
export default {
mounted() {
console.log("Component mounted!");
}
};
</scriElementpt>
  • "true" – 增加缩进，例如：
<script>
export default {
mounted() {
console.log('Component mounted!')
}
}
</script>长沙师范学院
Default CLI Override API Override
false --vue-indent-script-and-elementary是什么意思style vueIndentScriptAndStyle: <bool>

End of Lineelement结构

指定代码终究是否增加一行空行

end-of-line

  • "lf" – Line Feed only (n), common on Linux an长沙市天气d macOS as well as inside git rCSSepos
  • "crlf" – C代码标准快捷键arriage Return + Line Feed characters (rn), common on Windows
  • "cr" – Carriage Retu仓鼠养殖八大忌讳rn character only (r), used very rarely
  • "a代码标准的重要性uto" – Maintain existing line endings (mixed values within one file are noelements是什么牌子rmalis代码标准的优点ed by looking at what’s used afterElement the first line)
Default CLI Override API Oeslint原理verride
"lf" `–end-of-line <lf crlf

Embedded La代码标准标准nguage Formatting

是否需求格式化在文件中引用的代码

  • "auto" – 假定 Prettier 能够辨认嵌入的代码，则会格式化
  • "off" – 不会对嵌入的代码进行格式化
Default CLI Override API Override代码标准快捷键
"auto" --embedded-language-for长沙师范学院matting=off embeddedLanguageFormatting: "off"

完