[Vue] WebStormでPrettierを使った自動フォーマットをする [WebStorm]
WebStormでは⌥⌘Lでファイル全体にフォーマットをかけられるが、WebStormデフォルト設定だとPrettierのデフォルトルールに反したフォーマットがされてしまい、警告だらけになってしまう可能性がある。
ProjectにPrettierのフォーマットを設定する方法は以下。
- ⌘, で設定を開く
- 言語&フレームワーク -> JavaScript -> Prettierを選択
- Prettierパッケージを選択。プロジェクトかグローバルにprettierをインストールしていればプルダウンに選択肢が出る
- 「次のファイルに実行」にvueファイルを追加する
// 例
{**/*,*}.{js,ts,jsx,tsx,vue}
- 「コードの整形時」にチェック
- ⌥⌘L
ちなみに以下のコマンドを実行すると、プロジェクト内のlintエラーをあらかた解決してくれる。
yarn run lint –fix