【2020年版】VSCodeでhtml/css/jsの拡張機能おすすめ

2019年2月3日2020年3月21日

Web制作で4年ほど生計を立てている僕が、VSCodeでhtml/css/jsにおすすめの拡張機能を紹介します。

全部無料です！

おすすめのテキストエディタはVSCode一択

テキストエディタ おすすめでググると、 検索結果がえぐい。。。 テキストエディタを15個種類比較する ...

 https://uetani33.net/text-editor-vscode/

html：VSCodeでオススメの拡張機能

Auto Rename Tag

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

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

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

<section>あああ</section>

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

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

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

Path Intellisense

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

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

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

IntelliSense for CSS, SCSS class names in HTML and Slim

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

何気に便利。

EJS language support

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

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

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

CSS/SCSS：VSCodeでオススメの拡張機能

SCSS Formatter

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

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

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

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

» SCSS Formatter – Visual Studio Marketplace

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

JavaScript：VSCodeでオススメの拡張機能

Bracket Pair Colorizer 2

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

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

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

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

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

JavaScript code snippets

JavaScriptのスニペット集です。

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

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

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

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

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

便利ツール：VSCodeでオススメの拡張機能

Live Server

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

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

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

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

sftp

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

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

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

» sftp – Visual Studio Marketplace

Code Spell Checker

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

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

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

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でフォルダを開いたときに、ファイルの拡張子によってアイコンをつける拡張機能です。

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

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