VSCodeを使っている時、こう思うことありませんか?
「空白とか改行とかいちいち調整するの面倒...」
今回は、上記の悩みを解決する記事です。
結論から言うと、「Prettier」というツールを使えば解決です。
この記事ではVSCodeでPrettierを使う方法を解説します。
VSCodeは、当サイトでおすすめしているエディタです。
VSCodeのインストールの方法は、以下の記事で解説しております。
![【初心者向け】Visual Studio Codeの使い方【図解あり】](https://images.ctfassets.net/o1bgnefm7hbe/3Dq7OGpTNSaTa0e5YyjJ2w/81f8a8104ab39f3a7508018dd75ae133/install_vscode.png?w=260&h=146&q=50&fm=png)
Prettierとは
「Prettier」とは、VSCodeの拡張機能のひとつです。
バラバラに書かれたコードを、自動的に綺麗にしてくれます。
![after prettier](https://images.ctfassets.net/o1bgnefm7hbe/Dc9ax5MUornJipApNGcAY/0239ca9fbde8d4f03e0622edc6020dae/after_prettier.png?w=760&h=548&q=50&fm=png)
Prettierを使えば、コードを書いてファイル保存した瞬間、コードが自動的に整います。
Prettierをインストールする
では、VSCodeを起動してください。
Prettierをインストールしていきます。
![install prettier](https://images.ctfassets.net/o1bgnefm7hbe/4jKLr2mAzydFtDAF7g1gJ2/8aba071a88ff5ca5e3122ffaf0995ff8/install_prettier.png?w=760&h=462&q=50&fm=png)
上の画像のように操作していきます。
まず画面左側の「拡張機能」ボタンをクリックします。
検索欄に「prettier」と入力します。
検索結果の中に「Prettier - Code formatter」というものがあるかと思います。
「Prettier - Code formatter」のインストールボタンをクリックします。
これで、Prettierのインストールは完了です。
でも、Prettierはインストールしただけでは動いてくれません。
Prettierを使うには、設定を行う必要があります。
Prettierが使えるように設定する
設定する項目は以下の2つです。
Format On Saveを有効にする
Default FormatterをPrettierに設定する
Format On Saveを有効にする
![click settings](https://images.ctfassets.net/o1bgnefm7hbe/4ekgSYDLgHGd0e2z2TQZFb/627a30adf9a09e7de9eb5b83b1f2e913/click_settings.png?w=760&h=462&q=50&fm=png)
画面左下の歯車マークをクリックします。
表示される項目の中から「設定」をクリックします。
![format on save](https://images.ctfassets.net/o1bgnefm7hbe/2hL3vRs1N7Mdt46DMJmi6w/32c225d4c580cd0cb92df9844870a38c/format_on_save.png?w=760&h=462&q=50&fm=png)
「設定タブ」が開きます。
検索欄に「onsave」と入力してください。
すると、検索結果に「Format On Save」という項目が表示されます。
「Format On Save」にチェックを入れます。
これにより、コードを書いてファイルを保存したときに自動で「フォーマット」が行われます。
「フォーマット」は「整える」という意味です。
Default FormatterをPrettierに設定する
もうひとつ必要な設定があります。
「何を使ってフォーマットするか」を決めないといけません。
ここでは、先ほどインストールした「Prettier」を使ってフォーマットしたいわけです。
![default formatter](https://images.ctfassets.net/o1bgnefm7hbe/4Dnobk6qsfbSyeryGqRVff/a9f52b037b8d70f0f63a24228f1de04a/default_formatter.png?w=760&h=462&q=50&fm=png)
今度は、設定の検索欄に「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ローカル環境構築](https://images.ctfassets.net/o1bgnefm7hbe/2bj4B3wdmYEWUsI5wL9QOY/e70d8660ba93b3a66eb75637a6739ad8/flywheel_eyecatch.png?w=260&h=146&q=50&fm=png)
![【レスポンシブ対応とは】CSSをスマホ表示用、PC表示用に分けて作る](https://images.ctfassets.net/o1bgnefm7hbe/6IwZxW6XQ79LYLrakEDEHN/aa86847bb999bd591e8e3b0a4995b308/devices.png?w=260&h=146&q=50&fm=png)
![【周回はダメです】Progateの次は何をすればいいの?](https://images.ctfassets.net/o1bgnefm7hbe/6AACfG7m42GlCqfWIjIPx6/c781ecb6560980ee9cca82271770289e/step_by_step.png?w=260&h=146&q=50&fm=png)