Edited at

Visual Studio CodeでHTML作成環境を整える

More than 1 year has passed since last update.


0. はじめに

Microsoft社がオープンソースで開発している高機能エディタVisual Studio Code。

Visual Studioよりも軽く、他のエディタと比較してもプラグインが豊富、かつ、導入が便利であるため重宝しています。そしてSublime Textなどと同じで複数のプラットフォームで稼働させることができます。

この記事では、HTML(JavaScript、CSSを含む)を編集するにあたり必要となる機能をセットアップする方法をまとめてようと思います。対象のVisual Studio Codeのバージョンは 1.10.2 です。


1. セットアップ

用意する機能は大きく分けて次の3種類。

1. エディタとしての基本機能を改善

2. コードを書きやすくするプラグインの導入

3. 作成したHTMLのプレビュータスクの作成


1-1. エディタとしての基本機能を改善

ここでは初期設定で不足している(と思う)エディタの設定を見直します。


インデントの見える化

コードの可読性を上げるためにはインデントが重要です。たくさんタグを使っているとインデントが迷子になりますよね。

ファイル→基本設定→設定 を選択すると「settings.json」ファイルが開くため、下記のとおり設定。


settings.json

// Place your settings in this file to overwrite the default settings

{
// エディターでインデントのガイドを表示する必要があるかどうかを制御します
"editor.renderIndentGuides": true
}

設定すると、このようにインデントに縦線のガイドがひかれます。


エクスプローラーにアイコンを表示

Visual Studio Code標準のエクスプローラーはシンプルで、ファイルの種類は拡張子からしか判断できません。

視覚的に判断できるようファイルにアイコンを表示させます。

ファイル→基本設定→ファイルアイコンのテーマ を選択すると「アイコンのテーマ」を選択できます。

お好きなものを選んでください。MarcketPlaceで公開されているアイコンセットを追加することもできます。Seti(Visual Studio Code)を選択した場合のスクリーンショットは次の通りです。


1-2. コードを書きやすくするプラグインの導入

Visual Studio CodeのサイトにHTMLを書く人のためのガイド(HTML Programming in VS Code)が用意されています。ガイドのとおりプラグイン等を導入しなくても、基本的な機能にて、インテリセンス(コード補完)、コードフォーマット、スニペットが利用できます。さらに機能アップするために、次のプラグインを導入することをお勧めします。

プラグイン
名前とリンク
用途


HTML Snippets
HTML5に対応した追加スニペットです。


HTML CSS Class Completion
CSSクラスの入力補完プラグインです。ワークスペース内のCSSを探索し、CSSクラスの入力を支援します。


HTMLHint
HTMLの静的解析ツールです。

その他にもJavaScriptの入力支援系のプラグインは大量にあります。マーケットプレイスで探してみてください。


1-3. 作成したHTMLのプレビュータスクの作成

もともとはタスクランナーでスクリプトを書こうと思ったんですが、こちらの機能についてもプラグインが存在し実用に耐えそうだったため、そちらを紹介。

プラグイン
名前とリンク
用途


View In Browser
選択中のHTMLファイルをコマンド一つでブラウザで開くことできます。

HTMLファイルを選択し、「Ctrl+F1」を押下するとブラウザが起動できます。いちいちWindowsのエクスプローラーを開く必要がありません。


2. おわりに

「はじめに」に書いた通り、Visual Studio Codeは軽くてプラグインが豊富なところが良いところですね。見た目もがしがしカスタマイズできるので自分のお気に入りエディタを作れそうです。

なお、記事中のサンプルには、BootstrapのHTMLを利用しました。