今回はコードフォーマッターのprettierのvscodeへの導入方法
についての説明です。
prettierって何?
prettierはコードフォーマッターと呼ばれ、書いたコードを読みやすい形に整形してくれるツールです。
個人で開発を行っている場合は関係ないかもしれませんが、複数人のチームで開発している時に、人によってコードの書き方が違うと他の人がコードを読みにくくなってしまいます。
そこで、prettierを使うことで、command+s
でファイルを保存した時に誰でも読みやすい形に勝手にコードが整形されます。
それによって可読性が上がり、メンテナンスや開発もしやすくなります。
コードの整形の例
整形前
const inputTitle = useCallback((event) => {
setTitle(event.target.value)
}, [setTitle]);
let hoge = func (
parameter1, parameter2, parameter3, parameter4,
parameter6, parameter7,
parameter8,
);
整形後
const inputTitle = useCallback(
(event) => {
setTitle(event.target.value);
},
[setTitle]
);
let hoge = func(
parameter1,
parameter2,
parameter3,
parameter4,
parameter6,
parameter7,
parameter8
);
導入方法を紹介
prettierについて理解していだだけたでしょうか?
ここからはvscodeへのprettierの導入について解説します。
手順1:拡張機能の検索欄でprettierと入力しインストール
まずは、インストールです。
vscodeの拡張機能の検索欄にprettier
と入力すると、一番上にPrettier - Code formatter
というものが出てくるので、それをインストールします。
インストールが完了すると、以下の画像のようにアンインストール、無効にするなどのボタンが現れると思います。
手順2:vscode側で「Format on save」の設定をする
次はvscode側の設定です。手順1でprettierは有効になっています。
まずは、command + ,
または、左下の歯車のマークの設定をクリック
vscodeに関する設定項目がズラーっと並んでいると思います。検索欄の下にあるユーザー
とワークスペース
はそれぞれ、vscodeのどの開発でも適用する設定
とワークスペース、つまり現在のディレクトリのみの設定
という意味があります。
今回はワークスペース
を選択します。
その後、検索窓にformatOnSave
と入力してください。
Editor:Format On Save
にチェックを入れます。
すると.vscode
という名前のファイルが自動生成される(他の設定を既に行っていたらあるかもしれません)ので、その中にあるコードを確認します。以下のようになっていればOKです。
{
"editor.formatOnSave": true
}
これで導入は完了です🖐