HTML/CSS基礎 第2回 『開発環境を整えていこう』

拡張機能の追加

HTML/CSS基礎 第1回を読んでいただいた方はVisual Studio Codeをダウンロードしていただいたことと思います。このアプリケーションは、拡張機能をインストールすることで、さらに便利に使うことができるようになります。拡張機能のインストールの仕方は以下の通りとなります。

お勧めの拡張機能

拡張機能のインストール方法を確認したところで、以下にお勧めの拡張機能をまとめておきました。お好みに合わせて導入してください。

１.Japanese Language Pack for Visual Studio Code

Visual Studio Codeを日本語で表示するための拡張機能です。Visual Studio Codeを再起動後、Ctrl+Shift+P を押して “コマンド パレット” を表示し、display と入力して Configure Display Language を選択します。Enter キーを押すと、インストールされている言語の一覧が表示されるので、「日本語」を選択しましょう。

２.indent-rainbow

コードの中でブロックを把握しやすくするために行う字下げをインデントといいます。この拡張機能をインストールすることで、インデントに色を付けてコードを見やすくすることができます。

３.HTML CSS Support

Class名入力時に、CSS側でスタイル適用しているClass名を候補に出力させる補完機能です。

４. zenkaku

ファイルに含まれる全角スペースをハイライトしてくれる拡張機能です。この拡張機能をインストールしておくことで、入力したのが半角スペースか全角スペースかを一目で判断することができます。

５.その他

上記で紹介した以外にもいろいろな拡張機能があります。他にも拡張機能をインストールしてオリジナルの作業環境を構築していってください。

今回はここまでです。

次回は実際にコードを書いていってみましょう。