この記事の監修者
今回はVSCodeで使っている拡張機能を紹介します。
他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。
基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください！
環境構築のための拡張機能
VSCodeの利用環境全体に影響する拡張機能です。拡張機能デビューする人もとりあえずインストールしておいていいと思います。
Japanese Language Pack for Visual Studio Code
VSCodeの日本語化に必要な拡張機能です。初めてVSCodeを立ち上げる人も即入れマストの拡張機能ですね。
Live Server
ファイル保存と同時に修正内容をブラウザに自動反映させられるもので、コーディング時には必須の機能です。
vscode-icons
ファイルの名前に言語のアイコンを表示してくれます。大量にファイルがあっても、直感的に何の言語ファイルか分かるようになります。
アイコン系の拡張機能は他にもありますが、シンプルな見た目が気に入っているので僕はこれを使っています。
DartJS Sass Compiler and Sass Watcher
この拡張機能には2つの機能が搭載しています。
- Sassのコンパイル
- Auto Prefix（CSSのベンダープレフィックス自動付与）
メインはSassのコンパイラですが、オートプリフィクサ機能もセットになった便利なプラグインです。
最新の「Darts Sass」にも対応しているので、Sassの勉強はこれからという方は入れておいていいと思います。
ちなみに、一番有名なSassコンパイルプラグインは「Live Sass Compiler」かと思います。こちらも便利ではありますが、Darts Sassに対応してないので、その点は注意しておいたほうがいいでしょう。
Sassはエディタ機能ではなく別のツール（GulpやPrepros など）でコンパイルするという方は、そちらのツールで同様の機能があったりするので、中身は確認してから導入することをオススメします。
Autoprefixer
>> Autoprefixer
「DartJS Sass Compiler and Sass Watcher」をインストールしない方は、こちらを入れておいたほうがいいです。
CSSに自動でベンダープレフックスをつけてくれます。いちいちプロパティのブラウザ対応状況を確認して手書きするのは効率悪いですし、そもそも間違いも起こるので、とりあえず必要になる機能と思っておいていいと思います。
入力補助のための拡張機能
コード入力の効率化を図るための機能です。これらがあるのと無いので、入力スピードがかなり変わります。
Path Autocomplete
hrefやimgなど、パス入力中にワークスペース内のディレクトリ名やファイル名を予測で出してくれます。これがあればディレクトリの打ち間違いでファイルが読み込めない、といった初歩的なミスも防げます。
また階層が深くなると記述も面倒になってくるので、入力スピードがかなりアップする拡張機能です。
Auto Rename Tag
ペアになっている開始タグと終了タグ名を同時編集できる機能です。どちらか一箇所の記述で良くなるので、大幅な効率化が図れるようになります。
※閉じタグが自動補完される「Auto Close Tag」という拡張機能があり、セットで紹介されることもありますが、VSCodeにはそもそも自動補完機能が備わっているので不要です。
HTML CSS Support
Class名入力時に、CSS側でスタイル適用しているClass名を候補に出力させる補完機能です。
使い回しするスタイルのブロックがある場合、クラス名の打ち間違いを防げたり、時短にも繋がるのでオススメです。
似たような拡張機能で「IntelliSense for CSS class names in HTML」というのがありますが、こちらはエディタ内のワークスペースに加え、link要素を介して参照される外部ファイルで見つかった予測も表示させます。
なので、Font Awesomeなど外部サービスをlink読み込みしている場合、そのクラス名（fa-など)も候補に出てくるようになります。
個人的にそこまでは不要かなと思っているので、予測補完はHTML CSS Supportだけで十分かと思っています。また、公式ページのSupported Languagesにもある通り、js(jQuery)やPHPでも予測変換が出てくれます。
コード整形のための拡張機能
読みやすいコードは、インデントやCSSプロパティの並びが整っていますが、こういったコード整形を自動で行ってくれる拡張機能もあります。
ちなみに、有名どころだと「Prettier」というフォーマッターがありますが、色々あって僕の環境だと上手く使えなかったので今回は紹介から省いています。
VSCodeのデフォルト設定でも、保存時に自動でインデント整形する機能はあるので、またの機会にでも紹介できればと思っています。
CSScomb
>> CSScomb
CSSのフォーマッターで、ファイル保存時に自動で整形してくれます。こちらも種類が沢山あり、色々と試しましたが今はこの拡張機能に落ち着いています。
基本デフォルトでもある程度設定されていますが、プロパティの並びをABC順にしたり、任意の法則に設定することもできますし、インデントや段落なども調整できます。
これがあるか無いかで、コードの美しさがかなり変わってくるので、コーディングの仕事をするなら必須かと思います。
視認性向上のための拡張機能
記述中どこに何を書いているのかが把握しやすくなるように、エディタの視認性を上げる（見やすくする）ことができる拡張機能を紹介します。
indent-rainbow
インデントを色分けしてくれるので、階層の違いが視認しやすくなります。
Highlight Matching Tag
開始タグと閉じタグにアンダーラインで目印をつけてくれます。HTMLでタグの相互位置を掴みやすくなります。
（サポート終了）Bracket Pair Colorizer 2
開始タグと閉じタグを色付きの線で結んでくれる拡張機能ですが、こちらはサポートが終了しました。
しかし、2021年のVScodeのアップデートにより同様の機能がデフォルトで実装されましたので、そちらの導入方法をここで触れておきます。
- 設定を開き検索窓に「bracket」と入力し検索
- 「Bracket Pair Colorization」にチェックを入れる
- 「Bracket Pairs」を「true」にする
コーディングを少し楽にする便利な拡張機能
コマンドを入力して発動させることで、コーディングの更なる効率化を図ることができる拡張機能を紹介します。
CSS Peek
>> CSS Peek
HTMLファイルから適用しているCSSを表示、その場で編集 or ファイル先へ飛ぶことができます。
ファイルを探す手間が省くことができるので、CSSやSCSSのファイル数が多くなった時は特に効果を発揮します。
gif画像だとちょっと見づらいとは思いますが、Macだったら⌘、WindowsだったらCtrlを押しながらclass名をホバーするとクラス名の色が変わり、クリックすると適用されているスタイルが確認でき、そのまま編集できます。
右側に対象ファイルも表示されるので、そちらをクリックするとファイルに飛ぶことができます。
対象ファイルが少ないとgif画像のような表示にはならず、ワンクリックでcssのファイル先に飛ぶこともあります。
htmltagwrap
>> htmltagwrap
選択した要素に対して、コードを記述せずに親要素を作成しラップすることができます。
タグを指定して、Macだったら⌥（オプション）、WindowsだったらAltを押しながら w をタイプするとタグで囲むことができます。
初期設定ではpタグになっていますが、僕は設定からdivタグに変えています。
FlexBoxなど階層が重要なスタイリングをしている最中に、親要素を増やす必要がありそうな時など、さっと使えると便利になります。
バリデーション・構文チェックのための拡張機能
英単語のスペルが間違っていないか、コーディングのルールに誤りが無いかなど、精度を上げることに役立つ拡張機能を紹介します。
特にコーダーとして仕事をするなら入れておきたい機能が揃っています。
W3C Validation
HTMLの構文をW3Cに準拠したチェックをしてくれる拡張機能です。
間違っている箇所に波線を引いて教えてくれます。エディタ下には警告表示と問題パネルにエラー一覧を出してくれるので、エラー内容はもちろん、該当の行番号をクリックするだけでエラー箇所に移動できます。
間違っている箇所は赤バツで警告、怪しい箇所は黄色で注意マークの表示になります。
僕が英語弱者なので仕方が無いですが、そのまま翻訳するとちょっと意味分からない警告文になりがちです。
ただ、この拡張機能を使用するために「Java SE Development Kit（JDK）」というJavaのプログラミングツールをPCにインストールする必要があります。
初めは少し面食らうと思うので導入方法を別記事にまとめてます。使う際は参考にしてください↓
HTMLHint
>> HTMLHint
怪しい構文箇所を注意してくれます。
W3C Validationと同時に使うと、エラー内容が重複する部分も出てきたりするので、どちらか一つでもいいとは思います。ただ、W3C基準では見つからない細かい異変を見つけてくれることもあるので僕は一応入れてます。
ちなみにこちらはW3C Validationのように外部ツールのインストールは不要です。インストール作業がどうしても分からない、という方はHTMLHintだけでもいいかもしれません。（実はW3Cのバリデーションサイトもあります。）
あと、こちらで吐き出される警告文は翻訳通しても理解しやすい文章です（安心）
CSSTree validator
W3Cに基づいたCSSの構文チェックをしてくれる拡張機能です。
間違っている箇所に波線を引いてくれます。他バリデーションツール同様、エディタ内で警告表示もしてくれて、問題パネルから該当の行番号もわかるようになります。
こちらはインストールしたらすぐ使えます。
Code Spell Checker
英単語のスペルチェックをしてくれる拡張機能です。
怪しい単語を検知した場合はファイル上で青い波線が引かれます。また、エディタ下に注意マークが表示され、クリックするとリスト表示されるのでそこから辿ることもできます。
クラス名に造語をつけたり単語の区切り位置を変えるだけで認識されたりしますし、人名などもこれに検知されるので、あまり神経質に見る必要も無いですが、普段なら気付きにくいポイントを抑えることはできます。
VSCode拡張機能の追加方法
ここからは実際に追加方法について説明をしていきます。
拡張機能を追加するときは、左下の歯車をクリックする拡張機能という項目があるのでそこをクリックして拡張機能の検索をできるページを表示させましょう！
あとは、今回紹介している拡張機能を１つずつコピペして検索していき、installを行うだけで使用ができます。
まとめ
VSCodeの拡張機能は数が非常に多く、似たようなものも多いです。
ただ拡張機能を探すのに時間をかけるのは勿体ないので（その時間あるならコード書きたい）、こういった紹介記事にある内容を参考に、とりあえず試してみるのがいいと思います。
自分が使いやすそうだと思ったやつをどんどん試してみて、コーディングのストレスを無くしつつ、効率化を図っていきましょう！
VSCodeの拡張機能設定時に触れることもあるjsonファイルについて簡単にまとめた記事もあるので、設定で何か迷うことがあればこちらもご覧ください！
また、上では紹介しませんでしたが、VSCodeにはGitHubと自動連携させて簡単にGitが扱えるようになる拡張機能もあります。そちらの紹介や導入手順などは別記事でまとめているのでこちらをご覧ください。
ついでに、コーディングの開発環境に適しているブラウザ「Chrome」のお勧め拡張機能をまとめた記事もあるので、良かったらこちらもご覧ください！
当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください！
PENGIN無料コーディング課題
オススメ書籍紹介
オススメUdemy講座紹介
