More than 3 years have passed since last update.

vscodeにprettierを導入しよう!!

Posted at 2020-11-29

今回はコードフォーマッターの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の導入について解説します。

まずは、インストールです。
vscodeの拡張機能の検索欄にprettierと入力すると、一番上にPrettier - Code formatterというものが出てくるので、それをインストールします。

インストールが完了すると、以下の画像のようにアンインストール、無効にするなどのボタンが現れると思います。

次はvscode側の設定です。手順１でprettierは有効になっています。

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

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

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

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

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

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

setting.json

{
  "editor.formatOnSave": true
}

これで導入は完了です🖐