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

prettierとはコード整形に優れたformatterで、主にフロントの言語を触るときに活躍します。
対応言語例

JavaScript
JSX
TypeScript
JSON
HTML
Vue
Angular
CSS
SCSS
GraphQL
Markdown
YAML

なぜprettierを使うか？
=> prettierはコード整形に優れた上に手軽に実行できるから。
Prettier 入門 ～ESLintとの違いを理解して併用する～

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

VSCodeでprettierを使えるようにする。

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

prettierの設定。

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

.prettierrc
に詳しく書いてあります。

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

.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: 常に書く

bracketSpacing: bool

オブジェクトの{}の内側にスペースを入れるか。
true

endOfLine: [lf, crlf, cr, auto]

改行の文字コード。
lf: \n
crlf \r\n
cr: \r
auto: デフォルト

htmlWhitespaceSensitivity: [css, strict, ignore]

htmlファイルの空白の区別レベル設定
css: デフォルト

insertPragma: bool

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

jsxBracketSameLine: bool

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

jsxSingleQuote: bool

jsxで「""」を「''」に置き換える
true

printWidth: int

折り返す行の長さを指定
80

proseWrap: [always, never, preserve]

markdownの折り返しの設定
preserve: デフォルト

quoteProps: [as-needed, consistent, preserve]

オブジェクトのプロパティを引用符で囲むか。
as-needed: 必要な時のみ

• どちらでも良いが混ざらないようにする。

requirePragma: bool

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

semi: bool

セミコロンを追加するか
true

singleQuote: bool

「""」 => を「''」に置き換える
true

tabWidth: int

インデントのスペースの数
2

*行を折り返す場合は4スペース取る

trailingComma: [es5, none, all]

末尾にカンマを付けるか。
es5

useTabs: bool

インデントをタブにするか
false

vueIndentScriptAndStyle: bool

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

filepath: string, null

使用するパーサーへのファイルパス
none: デフォルト

parser: str

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