###### tags: `VSCODE` `Prettier`
# 【拡張機能】Visual Studio Code コード自動整形【Prettier】

## Prettierとは

■ソースコードを自動で整形してくれるツール。
■ソースを保存すると**自動で整形してくれる
タブのサイズや位置、さらにセミコロンやシングルクォーテーションなども整形**ため、**自動で整形してくれる。

## 自動整形イメージ


引用元：https://ma-vericks.com/vscode-prettier/

## Prettierの使い方

インストールが完了した想定で、設定方法を下記に記載する。

### 設定方法

> **保存時の自動フォーマッタ設定**

■(Macの場合)⌘ + , を押下後、検索ボックスに「save」を入力する。
⇛「***Editor:Format On Save***」が表示されるのでチェックを入れる。

> **おすすめ設定**

■タブサイズやセミコロンの有無設定などの総裁な設定は、
プロジェクトのルート直下に「 **.prettierrc** 」ファイルを作成し、
JSON形式で設定する。
<br />
・設定は下記の通り。

{
  "printWidth": 100,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "endOfLine": "lf"
}

・設定の詳細内容は下記の通り。
<table>
<tbody>
<tr>
<th>printWidth</th>
<td>自動折返し文字数</td>
</tr>
<tr>
<th>trailingComma</th>
<td>複数行の場合、可能な限り末尾のコンマを出力</td>
</tr>
<tr>
<th>tabWidth</th>
<td>タブサイズ</td>
</tr>
<tr>
<th>semi</th>
<td>ステートメントの最後にセミコロンを付与</td>
</tr>
<tr>
<th>singleQuote</th>
<td>二重引用符の代わりに単一引用符を使用</td>
</tr>
<tr>
<th>endOfLine</th>
<td>改行の文字コードを指定</td>
</tr>
</tbody>
</table>

> デフォルトの設定

「 **.prettierrc** 」ファイルを作成していない場合は、下記設定が適用される。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
}