vscodeにprettierを導入しよう!!

5998 ワード
拡張機能 VSCode prettier 拡張機能 テキストリンク

今回はコードフォーマッターのprettierのvscodeへの導入方法についての説明です。

prettierって何？

prettierはコードフォーマッターと呼ばれ、書いたコードを読みやすい形に整形してくれるツールです。

個人で開発を行っている場合は関係ないかもしれませんが、複数人のチームで開発している時に、人によってコードの書き方が違うと他の人がコードを読みにくくなってしまいます。

そこで、prettierを使うことで、command+sでファイルを保存した時に誰でも読みやすい形に勝手にコードが整形されます。

それによって可読性が上がり、メンテナンスや開発もしやすくなります。

コードの整形の例

整形前

example.js
    const inputTitle = useCallback((event) => {
      setTitle(event.target.value)
    }, [setTitle]);
example.js
let   hoge  = func (
  parameter1,   parameter2, parameter3,    parameter4,
 parameter6,  parameter7,
       parameter8,
            );

整形後

example.js
  const inputTitle = useCallback(
    (event) => {
      setTitle(event.target.value);
    },
    [setTitle]
  );
example.js
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側の設定です。手順１でprettierは有効になっています。

まずは、command + ,または、左下の歯車のマークの設定をクリック

vscodeに関する設定項目がズラーっと並んでいると思います。検索欄の下にあるユーザーとワークスペースはそれぞれ、vscodeのどの開発でも適用する設定とワークスペース、つまり現在のディレクトリのみの設定という意味があります。

今回はワークスペースを選択します。

その後、検索窓にformatOnSaveと入力してください。

Editor:Format On Saveにチェックを入れます。

すると.vscodeという名前のファイルが自動生成される(他の設定を既に行っていたらあるかもしれません)ので、その中にあるコードを確認します。以下のようになっていればOKです。

setting.json
{
  "editor.formatOnSave": true
}

これで導入は完了です🖐

参考

prettier(公式)

Prettierの導入方法
フロントエンド開発で必須のコード整形ツール