vscodeでサクッとprettierを使う(Google JavaScript Style Guide参考)

prettierとはコード整形に優れたformatterで、主にフロントの言語を触るときに活躍します。
対応言語例
```
JavaScript
JSX
TypeScript
JSON
HTML
Vue
Angular
CSS
SCSS
GraphQL
Markdown
YAML
```
なぜprettierを使うか？
=> prettierはコード整形に優れた上に手軽に実行できるから。
[Prettier 入門 ～ESLintとの違いを理解して併用する～](引用：https://qiita.com/soarflat/items/06377f3b96964964a65d)

そこでprettierをVSCodeでサクッと使うやり方をまとめます。

# VSCodeでprettierを使えるようにする。
1. 拡張機能から```Prettier - Code formatter```を検索。インストールしてください。
1. 保存時自動でformatterを当てたい時は歯車マーク > 設定 > format on saveをtrueにしてください。

# prettierの設定。
各project単位でformatの設定は変わるかと思います。そんなときには```.prettierrc```と言うファイルをproject直下に配置することで各projectごとにフォーマットの規約を定義できます。

[.prettierrc](https://qiita.com/takeshisakuma/items/bbb2cd2f1c65de70e363)
に詳しく書いてあります。

🔽[Googleのコーディング規約](https://google.github.io/styleguide/jsguide.html#formatting)を真似た設定です。
*雰囲気を勝手に読み取っただけなので間違っててもあしからず。
各パラメータの説明でリンクにしている部分は参考にした規約に飛ぶようにしています。

```.prettierrc
{
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "lf",
    "htmlWhitespaceSensitivity": "css",
    "insertPragma": false,
    "jsxBracketSameLine": false,
    "jsxSingleQuote": true,
    "printWidth": 80,
    "proseWrap": "preserve",
    "quoteProps": "as-needed",
    "requirePragma": false,
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5",
    "useTabs": false,
    "vueIndentScriptAndStyle": false
}
```

## arrowParens: [always, avoid]
アロー関数の()を書くか
[always](https://google.github.io/styleguide/jsguide.html#features-functions-arrow-functions): 常に書く

## bracketSpacing: bool
オブジェクトの{}の内側にスペースを入れるか。
[true](https://google.github.io/styleguide/jsguide.html#formatting-horizontal-whitespace)

## endOfLine: [lf, crlf, cr, auto]
改行の文字コード。
[lf](https://google.github.io/styleguide/jsguide.html#special-escape-sequences): \n
crlf \r\n
cr: \r
auto: デフォルト

## htmlWhitespaceSensitivity: [css, strict, ignore]
htmlファイルの空白の区別レベル設定
css: デフォルト

## insertPragma: bool
ファイルの先頭に```/** @format */```を入れるか
false: デフォルト

## jsxBracketSameLine: bool
要素の最後の「>」が次の行に単独であるとき、行の最後尾に置く
false: デフォルト

## jsxSingleQuote: bool
jsxで「""」を「''」に置き換える
[true](https://google.github.io/styleguide/jsguide.html#features-strings-use-single-quotes)

## printWidth: int
折り返す行の長さを指定
[80](https://google.github.io/styleguide/jsguide.html#formatting-column-limit)


## proseWrap: [always, never, preserve]
markdownの折り返しの設定
preserve: デフォルト

## quoteProps: [as-needed, consistent, preserve]
オブジェクトのプロパティを引用符で囲むか。
[as-needed](https://google.github.io/styleguide/jsguide.html#features-objects-mixing-keys): 必要な時のみ
* どちらでも良いが混ざらないようにする。

## requirePragma: bool
ファイルの先頭に```/** @format */```を含むファイルのみフォーマットする
false: デフォルト

## semi: bool
セミコロンを追加するか
[true](https://google.github.io/styleguide/jsguide.html#formatting-semicolons-are-required)

## singleQuote: bool
「""」 => を「''」に置き換える
[true](https://google.github.io/styleguide/jsguide.html#features-strings-use-single-quotes)

## tabWidth: int
インデントのスペースの数
[2](https://google.github.io/styleguide/jsguide.html#formatting-block-indentation)

*行を折り返す場合は[4スペース取る](https://google.github.io/styleguide/jsguide.html#formatting-indent)

## trailingComma: [es5, none, all]
末尾にカンマを付けるか。
[es5](https://google.github.io/styleguide/jsguide.html#features-arrays-trailing-comma)


## useTabs: bool
インデントをタブにするか
[false](https://google.github.io/styleguide/jsguide.html#whitespace-characters)

## vueIndentScriptAndStyle: bool
vueファイルの\<script\>と\<style\>をインデントするか
false: デフォルト

## filepath: string, null
使用するパーサーへのファイルパス
none: デフォルト

## parser: str
parserの指定
自動推測するので設定しなくて良い