なぜVSCodeはHTML初心者におすすめのエディタなのか

ツール

VSCodeをおすすめする理由

VSCodeはVisual Studio Codeという名のMicrosoftが開発したソースコードエディタです。動作が軽く、ユーザーインターフェースもシンプルでわかりやすいのが特徴です。

VSCodeにはWeb系の開発に便利な機能がデフォルトでサポートされています。また拡張機能にもWebに関する機能が様々あり、その拡張機能も導入しやすいという魅力的な点があります。

これらの機能を使いこなせれば、Webの開発効率はグッと上がるでしょう。これが私がVSCodeをおすすめする理由です。

VSCodeのインストール方法や基本的な使い方については、こちらの記事に掲載していますので参考にしてください。

【Visual Studio Code】インストールと使い方についてサクッと解説
Visual Studio Code(VSCode)は、Microsoftが開発したソースコードエディタで、最近人気が急上昇しているエディタです。使いやすく、見た目も良いので初心者にオススメのエディタなので一度インストールしてみてはいかがでしょうか。

VSCodeのデフォルト機能

先述した通り、VSCodeにはデフォルトでもWeb系の開発に役立つ機能がサポートされています。ここではその機能を紹介していきます。

Emmet

デフォルトでサポートされている機能の中でも強力なのは、HTML・CSSのコード補完として利用されるEmmetです。

Emmetは次のように、HTMLやCSSを省略した形で書き、TABキーをトリガーに本来のコードに展開してくれます。


Emmetについては次のチートシートがとても参考になります。うまく使いこなせばコーディングの量が減り、開発効率が上がるはずです。

Cheat Sheet

Color Picker

色コードを指定した場合に、カーソルを当てるとColor Pickerが表示されます。該当の色を選択することで、色コードを変更することができます。色コードはHEX、RGB、HSLの3種類に変換可能です。

Code Formatter

VSCodeにはHTMLのフォーマッターがデフォルトで備わっています。Alt +Shift + Fキー、またはコマンドパレット(F1)からFormat Documentを実行します。

Auto Close Tag

HTMLの開始タグを入力すれば、終了タグが自動で挿入されます。

おすすめの拡張機能

ここではHTMLの開発に役立つ拡張機能を紹介します。

HTML Preview

VSCode内でHTMLファイルのプレビューを表示することができるようになります。HTMLファイルを変更すれば、プレビューも自動で更新されるため、確認しながら開発をすることができます。

IntelliSense for CSS class names in HTML

HTMLでクラスを指定する際に、CSSで定義しているクラスが入力候補として表示されるようになります。一見地味な機能かもしれませんが、意外と役に立ちます。

Prettier

Code Formatterの1つで、HTML、CSS、javascriptなどのフォーマッターがサポートされています。デフォルトの機能ではHTMLしかサポートしていないため入れておいて損はないでしょう。実行方法はAlt + Shift + Fキーです。

Color Highlight

色コードの背景にその色を付けてくれます。指定したコードがどのような色なのかが視覚的にわかりやすくなります。

Color Manager

Color Managerは、Color Pickerとしての機能もありますが、強力なのはパレットの機能です。パレットは、絵の具のパレットと同じように様々な色を保存することができます。

Webページを構成する色をパレットに登録しておけば、それを選択するだけで色コードを挿入することができます。色コードはHEX、RGB、HSLが選べます。

Color Managerは、エディタを右クリックし、open color paletteを選択することで起動できます。

まとめ

これまで説明した通り、VSCodeにはHTML開発に役立つたくさんの機能がサポートされています。

私個人としてはサクサク動くことと、拡張機能が追加しやすい点がお気に入りポイントです。

みなさんも是非1度使ってみてください。

 

- Visual Studio Codeのおすすめ書籍はコチラ -

コメント

タイトルとURLをコピーしました