0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

vscodeにprettierを導入しよう!!

Posted at

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

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というものが出てくるので、それをインストールします。
スクリーンショット 2020-11-29 21.29.55.png

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

スクリーンショット 2020-11-29 21.32.04.png

手順2:vscode側で「Format on save」の設定をする

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

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

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

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

その後、検索窓にformatOnSaveと入力してください。
スクリーンショット 2020-11-29 21.42.38.png

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

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

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

これで導入は完了です🖐

参考

prettier(公式)

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?