edo1z blog

プログラミングなどに関するブログです

webstormでPrettierを使って自動コード整形する

Nuxt.jsとかで開発してるときに、いつもの ctrl + alt + l で整形すると、Eslintに色々怒られるのでなんとかしたい。

pleiades.io

Prettierを使うといいのかな?

prettier.io

やってみたこと

prettierのインストール

$ yarn global add prettier

webstormで「reformat with prettier」を探す

ctrl + shift + A で「アクション検索ボックス」が出てくるので、reformatと入力すると、「reformat with prettier」が出てくる。

f:id:edo1z:20190814002521p:plain

通常のコード整形ではなく、reformat with prettierを使う

自分の環境だと、ctrl + alt + l でコード整形なのですが、それではなく、ctrl + shift + alt + p によって、reformat with prettier が出来るのでそれを使います。

Prettierの設定とか全然してないけど、なんかとりあえず出来てるっぽいからこれでいいことにします。

追記

まだまだ全然ダメでした。prettierでreformatするとインデントはいい感じなんだけど、文字列をダブルクオートで囲み、JS文の最後にセミコロン?を入れるんだけど、NuxtのEslintだと怒ってくる。Eslintの設定+Prettierの設定を熟知するしかないかもしれません。私は長いものに巻かれるタイプなので、Prettierの設定だけ覚えたいと思います。

Prettierで文字をシングルクオートで囲み、JS文末にセミコロン入れないように設定する方法

.prettierrc というファイルに設定を追加したらいいだけらしい。

{
  "singleQuote": true,
  "semi": false
}