VS CodeのPrettier拡張機能の使い方
フロントエンドとかnpmとかコマンドとかよくわかんないから、拡張機能だけ入れてすぐ使いたい人のためにメモ。 ※VS Codeは「Visual Studio Code」の略です。
まずPrettierって何？
一言で言うと、ソースコードを自動で整形してくれるツール。 色んな言語に対応していて、さらに専用のファイルを設定することで色々段落が設定できるようだが、メモの目的から外れるのでこれはまた別の記事で。
公式サイトはこちら
Prettierの拡張機能の使い方
0.動作確認環境
Windows10 Home Version1903
1.インストール
- 拡張機能タブをクリックし、上の検索ボックスに「Prettier」を入力
- 1番上に表示される「Prettier – Code...」をクリック
- 「インストール」をクリックする
- インストールが終わったあとは画像のように「アンインストール」に変わっているはず *1
2.Prettier拡張機能がとりあえず動作するように設定する
- 左下の歯車アイコンをクリックし、設定を押す*2
- 設定画面の検索ボックスに「save」と入力
- 「Editor:Format On Save」にチェック
3.とりあえず動かしてみる
保存したら自動的にコードが整形されてきれいになっていることを確認。 右下のPrettierの隣にチェックも入っているはず。
ビフォー
アフター
さいごに
Prettierは海外だとかなりメジャーなイメージだけど、残念ながらまだまだ日本では浸透していないイメージ。拡張機能だけでもWeb系以外で浸透していってほしいものである。
設定とか仕様については次回の記事で書ければ。 ESLintとかwebpack周辺もそろそろちゃんと勉強しないとね。
