RalaCode
menusearch

【自動整形】VSCodeでPrettierを使う方法【設定必要です】

  • HTML, CSS
【自動整形】VSCodeでPrettierを使う方法【設定必要です】

VSCodeを使っている時、こう思うことありませんか?

空白とか改行とかいちいち調整するの面倒...

今回は、上記の悩みを解決する記事です。

結論から言うと、「Prettier」というツールを使えば解決です。
この記事ではVSCodeでPrettierを使う方法を解説します。

VSCodeは、当サイトでおすすめしているエディタです。
VSCodeのインストールの方法は、以下の記事で解説しております。

【初心者向け】Visual Studio Codeの使い方【図解あり】
【初心者向け】Visual Studio Codeの使い方【図解あり】
記事を読む

Prettierとは

「Prettier」とは、VSCodeの拡張機能のひとつです。
バラバラに書かれたコードを、自動的に綺麗にしてくれます。

after prettier

Prettierを使えば、コードを書いてファイル保存した瞬間、コードが自動的に整います

Prettierをインストールする

では、VSCodeを起動してください。
Prettierをインストールしていきます。

install prettier

上の画像のように操作していきます。
まず画面左側の「拡張機能」ボタンをクリックします。

検索欄に「prettier」と入力します。

検索結果の中に「Prettier - Code formatter」というものがあるかと思います。
「Prettier - Code formatter」のインストールボタンをクリックします。

これで、Prettierのインストールは完了です。
でも、Prettierはインストールしただけでは動いてくれません

Prettierを使うには、設定を行う必要があります。

Prettierが使えるように設定する

設定する項目は以下の2つです。

  • Format On Saveを有効にする

  • Default FormatterをPrettierに設定する

Format On Saveを有効にする

click settings

画面左下の歯車マークをクリックします。
表示される項目の中から「設定」をクリックします。

format on save

設定タブ」が開きます。

検索欄に「onsave」と入力してください。
すると、検索結果に「Format On Save」という項目が表示されます。
「Format On Save」にチェックを入れます。

これにより、コードを書いてファイルを保存したときに自動で「フォーマット」が行われます。
「フォーマット」は「整える」という意味です。

Default FormatterをPrettierに設定する

もうひとつ必要な設定があります。

何を使ってフォーマットするか」を決めないといけません。
ここでは、先ほどインストールした「Prettier」を使ってフォーマットしたいわけです。

default formatter

今度は、設定の検索欄に「format」と入力します。
すると、検索結果に「Default Formatter」という項目が表示されます。

「Default Formatter」の中のプルダウンから、「Prettier - Code formatter」を選択します。

これで、コードを書いてファイルを保存した時、Prettierを使って自動でフォーマットを行ってくれる設定になりました。

自動でフォーマットされるので、Web制作などかなりはかどるはずです。

ちなみに、HTMLとCSSを学習中で周りに差をつけたいならエビスコムの「作って学ぶ HTML&CSSモダンコーディング」という本がいいですよ。

この本では「Flexbox」と「CSS Grid」について学べます。
Web制作は、この2つがわかるだけでかなりのレベルにいけます。

他の本でもある程度は学べますが、エビスコムの本ほどきめ細かく教えてはくれません。

これから、HTMLとCSSを学びWeb制作へとつなげていきたいなら手元においておきたい1冊です。

>> 作って学ぶ HTML&CSSモダンコーディング エビスコム(著)

まとめ

  • Prettierをインストールする

  • Format On Saveを有効にする

  • Default FormatterをPrettierに設定する

上記の手順により、VSCodeでコードを自動整形してくれる状態を作ることができます。
記事は以上です。

【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
【初期設定まで解説】LocalbyFlyWheelでWordPressローカル環境構築
記事を読む
【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る
【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る
記事を読む
【周回はダメです】Progateの次は何をすればいいの?
【周回はダメです】Progateの次は何をすればいいの?
記事を読む

この記事を共有

以下のボタンを押すとSNSが開きます

Copyright © 2023 RalaCode