2019/02/03 web制作上谷亮太

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

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

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

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

と渡り歩いていいます。

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

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

» 目次

1. Auto Rename Tag
2. Bracket Pair Colorizer 2
3. SCSS Formatter
4. IntelliSense for CSS, SCSS class names in HTML and Slim
5. sftp
6. Code Spell Checker
7. JavaScript code snippets
8. Path Intellisense
9. Japanese Language Pack for VS Code
10. Material Icon Theme
11. EJS language support
12. まとめ：無料でこれだけのことができるようになるVSCodeすげぇ

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を使っています。

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 を参照してください。