【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 を参照してください。
Material Icon Theme
VSCodeでフォルダを開いたときに、ファイルの拡張子によってアイコンをつける拡張機能です。
何を使ってもいいのですが、ググって出てきたこれをとりあえず使っています。
EJS language support
当方は、制作効率化の為にhtmlを直接作るのではなくejsで記述しています。
VSCodeはデフォルトだとejsをサポートしていない為、これを入れてejsに対応させています。
ejsを使うなら入れておいて損しないかなと。ちなみに、コンパイルはgulpを走らせています。
まとめ：無料でこれだけのことができるようになるVSCodeすげぇ
とりあえずこのあたりを入れておけば、普通のマークアップはかなり使いやすくなるかなと。
それにしてもVSCodeは無料なのにここまでできちゃいます。
最初に触ったエディタがatomだったのですが、またあれから色々進化したなーと。時代に合わせて道具も進化して、いい時代に生まれたなと思います。
ちなみにVSCode、デフォでemmetがついているのでそれを使うこともお忘れなく。