VSCodeにPrettierを設定する
2023/05/08
2023/05/10
自動コードフォーマッター「Prettier」（プリティア）をVSCodeに設定する方法です。
Prettierのインストール
VSCodeの拡張機能からPrettierをインストールします。
ファイル保存時に自動でPrettierを発動
設定の「Format On Save」にチェックします。
設定の「Default Formatter」をPrettierに設定に設定します。
※setting.jsonに以下のように記述を追加してもOKです。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}Prettierの詳細設定を変更する
プロジェクトのルートディレクトリに.prettierrc.jsonを作成します。
以下は設定の例です。
{
"printWidth": 100,
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"endOfLine": "lf"
}printWidth
折り返す行の長さを指定
trailingComma
末尾のカンマの設定（”es5”はES5で有効な末尾のカンマ）
tabWidth
インデントのスペースの数を指定
useTabs
スペースではなくタブで行をインデント
semi
ステートメントの最後にセミコロンを追加
singleQuote
ダブルクォートの代わりにシングルクォートを使用
endOfLine
改行の文字コードを指定
Prettierのフォーマットから除外する
ファイルごと除外したい場合、.prettierignoreファイルを作成して以下のようにファイルを記述します。
package.json
package-lock.json
対象の行だけprettierを効かせたくない場合は以下のように記述します。
（「この1行だけは長くなるけど自動改行させたくない！」といった時に使います）
// prettier-ignore
const longlongArray = 'aaaaaaaaaaabbbbbbbbbbccccccccccddddddddddeeeeeeeeeeffffffffffggggggggggg'