【2019年版】VSCodeでWeb制作でhtml/css/jsにおすすめの拡張機能

当方は3年ほど、Web制作で生計を立てています。

テキストエディタ経歴は、

1. Atom（3ヵ月）
2. Sublime text3（半年）
3. Brackets（1年半）
4. VSCode（1年）

と渡り歩いていいます。

今日は、1年ほど使っているVSCodeで、マークアップ・Web開発をするのに必須なVSCodeの拡張機能をご紹介します。

※なお、当方はタスクランナーとしてGulpを走らせているので、Gulpでできることはこの記事では紹介しません。

Auto Rename Tag

マークアップするなら、絶対に入れた方がいいです。

タグを変更するときに、前後のやつを触らなくても前だけを変更すれば、後ろも自動で変わるようになります。

例えば↓なコードがあって、

<section>あああ</section>

ここのsectionタグをdivタグにしたいのなら、普通だと前と後ろの2箇所のsectionをdivに変えないといけません。

それが、この拡張機能を入れれば、前のsectionタグを変えるだけで、後ろのsectionタグも自動で変わるようになります。

↓がデモなので、見るとこの便利さが伝わるかなと。

Bracket Pair Colorizer 2

ソース内で、一致している括弧同士にわかりやすい色をつけてくれます。※括弧＝「（」と「）」

$(window).on('load resize', function () {
    resizeWidth()
});

例えば、こんなソースだと

こんな感じに、それぞれの対になる「（」と「）」が別々の色がついて見やすくなっています。

JavaScriptを触るときに結構重宝します。

SCSS Formatter

VSCodeはデフォルトでコードの自動整形機能がついていますが、scssはこれを入れないと自動整形されません。

scssを使うなら必須かなと。

なお、導入後VSCode側で設定が必要です。

公式で導入方法が紹介されているので、導入はそちらをご確認ください。

» SCSS Formatter – Visual Studio Marketplace

なお、当方はscssのコンパイルはgulpかkoalaを走らせています。

IntelliSense for CSS, SCSS class names in HTML and Slim

インストールすると、htmlでclass名をつけるときに、css/scssからclass名の候補を教えてくれます。

何気に便利。

sftp

テキストエディタでサーバーにftp接続等をするソフトです。

とりあえずないと困ると思うので入れておきましょう。

公式に使い方が書いてあるので使い方はそちらで。

» sftp – Visual Studio Marketplace

Code Spell Checker

コードの英単語のスペルが間違えていたら、波線でスペルミスを知らせてくれます。

↑の写真だと、starrtとtwenttyfiveがミスなので「〜」が引かれています。

単純なスペルミスがすぐにわかるようになるので、入れると吉。

JavaScript code snippets

JavaScriptのスニペット集です。

こんな感じに途中まで入力したら予測変換されたりします。

forと途中まで入力して、出てくるカーソルからforeachを選ぶと

foreachの基本構文が出力されたりと、こんな感じでjavascriptが楽に書けるように。

なお、以下のjavascriptフレームワークまでサポートされています。

• JavaScript (.js)
• TypeScript (.ts)
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Vue (.vue)

Path Intellisense

ファイルパスのディレクトリを自動保管してくれます。

こんな感じに、htmlでsrc属性を入れようと途中まで入力すると、選択できる選択肢が表示されます。

選ぶと、パスが書き込まれるので非常に便利。

Japanese Language Pack for VS Code

VScodeを日本語化するのに必要な拡張機能。なくてもいけますが、日本人なので日本語の方が純粋に見やすいので入れるといいかなと。

一様、この日本語化の方法を管理画面のテキストをコピペしときます。

使用法

インストールが完了したら、Japanese Language Pack を読み込むために locale.json 内で "locale": "ja" を設定します。locale.json を編集するには Ctrl+Shift+P を押してコマンド パレットを表示させ、”config” と入力し、利用できるコマンドのリストをフィルター処理してから Configure Language コマンドを選択します。詳細については Docs を参照してください。

Material Icon Theme

VSCodeでフォルダを開いたときに、ファイルの拡張子によってアイコンをつける拡張機能です。

何を使ってもいいのですが、ググって出てきたこれをとりあえず使っています。

EJS language support

当方は、制作効率化の為にhtmlを直接作るのではなくejsで記述しています。

VSCodeはデフォルトだとejsをサポートしていない為、これを入れてejsに対応させています。

ejsを使うなら入れておいて損しないかなと。ちなみに、コンパイルはgulpを走らせています。

Live Server

このプラグインを入れておくとVSCode上でローカルサーバーが立ち上がります。

メリットとして以下の感じ。

• ファイル更新したら自動でブラウザ更新される
• ファイルパスを絶対値指定される

結構便利になります。が、ちょっと重い気がするので、他のツールでローカルサーバー立ち上げるならこれはなくてもいい気がしています。が、あると便利。

まとめ：無料でこれだけのことができるようになるVSCodeすげぇ

とりあえずこのあたりを入れておけば、普通のマークアップはかなり使いやすくなるかなと。

それにしてもVSCodeは無料なのにここまでできちゃいます。

最初に触ったエディタがatomだったのですが、またあれから色々進化したなーと。時代に合わせて道具も進化して、いい時代に生まれたなと思います。

ちなみにVSCode、デフォでemmetがついているのでそれを使うこともお忘れなく。