プラグインのインストール
この章では HTML と CSS の開発をする際にオススメの「Visual Studio Code プラグイン」を紹介しています。
Visual Studio Code 以外のエディタをお使いの場合は、こちらの章はスキップしていただけたらと思います。
この章のゴールは「Visual Studio Code のプラグインをインストールできるようになる」です。
「プラグインって何？」といった場合は、 「プラグインとは」の部分で、プラグインの簡単な説明をしているので、この章の最初から順番に読み進めていただけたらと思います。
プラグインとは
プラグインとは「元々備わっていなかった機能を後から別途拡張できる機能」と思っていただけたらと思います。
例えば、Visual Studio Code は初期状態では日本語環境が用意されていません。
Visual Studio Code を日本語で使えるようにするためには「日本語化を行う拡張機能」を追加する必要があります。
このように「元々用意されていないものを後から拡張できる機能」のことを「プラグイン」と呼んだりします。
プラグインをインストールする
今回インストールしていただくプラグインは以下の 3 つになります。
それでは 1 つずつインストール手順を見ていきましょう。
動画内では Mac 環境で解説をしております。
Windows の場合も基本的な流れは同じかと思いますが、うまく行かない場合は必要に応じて「Visual Studio Code プラグイン インストール windows」のように検索し問題を解決していただけたらと思います。
Prettier
インストール手順
補足解説
プラグイン「Prettier」をインストールして適切な設定をしておくと、ファイルを保存する度にコードを自動整形してくれるようになります。
コードを書き始めたばかりの初心者あるあるですが、書かれているコードがゴチャゴチャしていて読むづらくなりがちです。
コードがゴチャゴチャになってしまっていると、コードの問題箇所の特定が難しく時間がかかってしまうので、学習効率がより一層下がってしまいます。
それを避けるために、プラグイン「Prettier」をインストールし、常にコードが整形された状態に保てるようにしておきましょう。
Live Server
インストール手順
補足解説
プラグイン「Live Server」をインストールすると、ローカルの Web サーバーを簡単に起動することができます。
「ローカル」とは「あなたのパソコン」を指します。
「Live Server」で Web サーバーを起動して、コードの修正を行いファイルを保存すると自動で Web ブラウザの内容が更新されて、修正後の最新の状態が反映されます。
「Live Server」をインストールしなくても、作成した HTML や CSS をブラウザで確認することは可能です。
しかし、今後の HTML・CSS の解説を進める上で、「Live Server」経由での説明の方がシンプルになるので、今回「Live Server」を取り上げさせていただきました。
Japanese Language Pack for Visual Studio Code（日本語化したい場合）
インストール手順
補足解説
こちらのプラグインは Visual Studio Code を日本語化したい場合にインストールしていただけたらと思います。
便利なプラグインは他にもたくさんある
今回取り上げなかったものでも便利なプラグインは探せばたくさん出てくるので、気になるプラグインがあれば実際にインストールして試してみると良いでしょう。
「VSCode おすすめ プラグイン」で検索すれば、おすすめプラグインのまとめ記事がたくさん見つけられるかと思います。
ただ注意点として、プラグインをインストールすればするほど Visual Studio Code の動作が重くなる可能性があります。 （パソコンの容量がいっぱいになって、パソコンの動作が遅くなってくるのと同じようなイメージ）
試してみて「このプラグインは不要だな」と思ったら、適宜アンインストールすることをオススメします。