8/30〜|ライターのダイチが運営している個人メディア「ダイブログ」とPENGIN BLOGを統合しました

【2021年】Web制作で使えるVSCodeオススメ拡張機能18選!

お知らせ

当記事の元サイト「ダイブログ」は「PENGIN BLOG」と統合しました。
※元ドメイン(https://daib-log.com/〜)からはリダイレクト処理されます。

どうも、ダイチです。今回はVSCodeで使っている拡張機能を紹介します。

他記事では利用シーンや用途分けがされてないことも多く、とりあえず入れてみたもののどんな機能だったのか忘れた、、、なんてこともよくあると思うので、この記事ではザックリと用途別にカテゴリ分けしています。

基本的には紹介する拡張機能全て入れてしまってもいいとは思うんですが、個人的な優先度を星マークでつけています。導入する順番の参考にしてみてください!

環境構築のための拡張機能

VSCodeの利用環境全体に影響する拡張機能です。拡張機能デビューする人もとりあえずインストールしておいていいと思います。

Japanese Language Pack for Visual Studio Code

VSCodeの日本語化に必要な拡張機能です。初めてVSCodeを立ち上げる人も即入れマストの拡張機能ですね。

優先度
 (5)
【初心者必見】VScodeインストール方法や日本語化の流れをバッチリ解説!

Live Server

liveserver拡張機能

ファイル保存と同時に修正内容をブラウザに自動反映させられるもので、コーディング時には必須の機能です。

優先度
 (5)

vscode-icons

ファイルの名前に言語のアイコンを表示してくれます。大量にファイルがあっても、直感的に何の言語ファイルか分かるようになります。

アイコン系の拡張機能は他にもありますが、シンプルな見た目が気に入っているので僕はこれを使っています。

優先度
 (3.5)

DartJS Sass Compiler and Sass Watcher

この拡張機能には2つの機能が搭載しています。

  • Sassのコンパイル
  • Auto Prefix(CSSのベンダープレフィックス自動付与)

メインはSassのコンパイラですが、オートプリフィクサ機能もセットになった便利なプラグインです。

最新の「Darts Sass」にも対応しているので、Sassの勉強はこれからという方は入れておいていいと思います。

詳しくはこちらの記事で解説しています!

【DartsSass対応】Preprosの使い方徹底解説!手軽にSassをコンパイル!

ちなみに、一番有名なSassコンパイルプラグインは「Live Sass Compiler」かと思います。こちらも便利ではありますが、Darts Sassに対応してないので、その点は注意しておいたほうがいいでしょう。

Sassはエディタ機能ではなく別のツール(GulpやPrepros など)でコンパイルするという方は、そちらのツールで同様の機能があったりするので、中身は確認してから導入することをオススメします。

優先度
 (4.5)

Autoprefixer

「DartJS Sass Compiler and Sass Watcher」をインストールしない方は、こちらを入れておいたほうがいいです。

CSSに自動でベンダープレフックスをつけてくれます。いちいちプロパティのブラウザ対応状況を確認して手書きするのは効率悪いですし、そもそも間違いも起こるので、とりあえず必要になる機能と思っておいていいと思います。

優先度
 (4)

入力補助のための拡張機能

コード入力の効率化を図るための機能です。これらがあるのと無いので、入力スピードがかなり変わります。

Path Autocomplete

Path Autocomplete

hrefやimgなど、パス入力中にワークスペース内のディレクトリ名やファイル名を予測で出してくれます。これがあればディレクトリの打ち間違いでファイルが読み込めない、といった初歩的なミスも防げます。

また階層が深くなると記述も面倒になってくるので、入力スピードがかなりアップする拡張機能です。

優先度
 (5)

Auto Rename Tag

Auto Rename Tag

ペアになっている開始タグと終了タグ名を同時編集できる機能です。どちらか一箇所の記述で良くなるので、大幅な効率化が図れるようになります。

※閉じタグが自動補完される「Auto Close Tag」という拡張機能があり、セットで紹介されることもありますが、VSCodeにはそもそも自動補完機能が備わっているので不要です。

優先度
 (5)

HTML CSS Support

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でも予測変換が出てくれます。

優先度
 (4)

コード整形のための拡張機能

読みやすいコードは、インデントやCSSプロパティの並びが整っていますが、こういったコード整形を自動で行ってくれる拡張機能もあります。

ちなみに、有名どころだと「Prettier」というフォーマッターがありますが、色々あって僕の環境だと上手く使えなかったので今回は紹介から省いています。

VSCodeのデフォルト設定でも、保存時に自動でインデント整形する機能はあるので、またの機会にでも紹介できればと思っています。

CSScomb

CSScomb

CSSのフォーマッターで、ファイル保存時に自動で整形してくれます。こちらも種類が沢山あり、色々と試しましたが今はこの拡張機能に落ち着いています。

基本デフォルトでもある程度設定されていますが、プロパティの並びをABC順にしたり、任意の法則に設定することもできますし、インデントや段落なども調整できます。

これがあるか無いかで、コードの美しさがかなり変わってくるので、コーディングの仕事をするなら必須かと思います。

優先度
 (5)

視認性向上のための拡張機能

記述中どこに何を書いているのかが把握しやすくなるように、エディタの視認性を上げる(見やすくする)ことができる拡張機能を紹介します。

Bracket Pair Colorizer 2

Bracket Pair Colorizer 2

開始タグと閉じタグを色付きの線で結んでくれる拡張機能です。記述量が多いjsで特に役立ちます。

優先度
 (4)

indent-rainbow

indent-rainbow

インデントを色分けしてくれるので、階層の違いが視認しやすくなります。

優先度
 (4)

Highlight Matching Tag

Highlight Matching Tag

開始タグと閉じタグにアンダーラインで目印をつけてくれます。HTMLでタグの相互位置を掴みやすくなります。

優先度
 (4)

コーディングを少し楽にする便利な拡張機能

コマンドを入力して発動させることで、コーディングの更なる効率化を図ることができる拡張機能を紹介します。

CSS Peek

HTMLファイルから適用しているCSSを表示、その場で編集 or ファイル先へ飛ぶことができます。

ファイルを探す手間が省くことができるので、CSSやSCSSのファイル数が多くなった時は特に効果を発揮します。

gif画像だとちょっと見づらいとは思いますが、Macだったら⌘、WindowsだったらCtrlを押しながらclass名をホバーするとクラス名の色が変わり、クリックすると適用されているスタイルが確認でき、そのまま編集できます。

CSS Peek1

右側に対象ファイルも表示されるので、そちらをクリックするとファイルに飛ぶことができます。

CSS Peek2

対象ファイルが少ないとgif画像のような表示にはならず、ワンクリックでcssのファイル先に飛ぶこともあります。

優先度
 (4.5)

htmltagwrap

htmltagwrap

選択した要素に対して、コードを記述せずに親要素を作成しラップすることができます。

タグを指定して、Macだったら⌥(オプション)、WindowsだったらAltを押しながら w をタイプするとタグで囲むことができます。

初期設定ではpタグになっていますが、僕は設定からdivタグに変えています。

FlexBoxなど階層が重要なスタイリングをしている最中に、親要素を増やす必要がありそうな時など、さっと使えると便利になります。

優先度
 (3)

バリデーション・構文チェックのための拡張機能

英単語のスペルが間違っていないか、コーディングのルールに誤りが無いかなど、精度を上げることに役立つ拡張機能を紹介します。

特にコーダーとして仕事をするなら入れておきたい機能が揃っています。

W3C Validation

W3C Validation

HTMLの構文をW3Cに準拠したチェックをしてくれる拡張機能です。

間違っている箇所に波線を引いて教えてくれます。エディタ下には警告表示と問題パネルにエラー一覧を出してくれるので、エラー内容はもちろん、該当の行番号をクリックするだけでエラー箇所に移動できます。

間違っている箇所は赤バツで警告、怪しい箇所は黄色で注意マークの表示になります。

僕が英語弱者なので仕方が無いですが、そのまま翻訳するとちょっと意味分からない警告文になりがちです。

優先度
 (4)

ただ、この拡張機能を使用するために「Java SE Development Kit(JDK)」というJavaのプログラミングツールをPCにインストールする必要があります。

初めは少し面食らうと思うので、別記事にまとめました。使う際は参考にしてください↓

HTMLHint

怪しい構文箇所を注意してくれます。

W3C Validationと同時に使うと、エラー内容が重複する部分も出てきたりするので、どちらか一つでもいいとは思います。ただ、W3C基準では見つからない細かい異変を見つけてくれることもあるので僕は一応入れてます。

ちなみにこちらはW3C Validationのように外部ツールのインストールは不要です。インストール作業がどうしても分からない、という方はHTMLHintだけでもいいかもしれません。(実はW3Cのバリデーションサイトもあります。)

あと、こちらで吐き出される警告文は翻訳通しても理解しやすい文章です(安心)

優先度
 (3.5)

CSSTree validator

W3Cに基づいたCSSの構文チェックをしてくれる拡張機能です。

間違っている箇所に波線を引いてくれます。他バリデーションツール同様、エディタ内で警告表示もしてくれて、問題パネルから該当の行番号もわかるようになります。

こちらはインストールしたらすぐ使えます。

優先度
 (4)

Code Spell Checker

英単語のスペルチェックをしてくれる拡張機能です。

怪しい単語を検知した場合はファイル上で青い波線が引かれます。また、エディタ下に注意マークが表示され、クリックするとリスト表示されるのでそこから辿ることもできます。

クラス名に造語をつけたり単語の区切り位置を変えるだけで認識されたりしますし、人名などもこれに検知されるので、あまり神経質に見る必要も無いですが、普段なら気付きにくいポイントを抑えることはできます。

優先度
 (3)

まとめ

VSCodeの拡張機能は数が非常に多く、似たようなものも多いです。

ただ拡張機能を探すのに時間をかけるのは勿体ないので(その時間あるならコード書きたい)、こういった紹介記事にある内容を参考に、とりあえず試してみるのがいいと思います。

自分が使いやすそうだと思ったやつをどんどん試してみて、コーディングのストレスを無くしつつ、効率化を図っていきましょう!

VSCodeの拡張機能設定時に触れることもあるjsonファイルについて簡単にまとめた記事もあるので、設定で何か迷うことがあればこちらもご覧ください!

JSONとは?VSCode設定時に知っておきたい基礎知識まとめ

また、上では紹介しませんでしたが、VSCodeにはGitHubと自動連携させて簡単にGitが扱えるようになる拡張機能もあります。そちらの紹介や導入手順などは別記事でまとめているのでこちらをご覧ください。

バージョン管理の図 【VSCode×GitHub】連携手順解説(準備編)

ついでに、コーディングの開発環境に適しているブラウザ「Chrome」のお勧め拡張機能をまとめた記事もあるので、良かったらこちらもご覧ください!

【2021年】Web制作に使えるchrome拡張機能おすすめ19選

当記事を読まれている方の中にはWeb制作初学者の方もいるかと思います。デザインやコーディングの基礎知識を学びたい方向けの記事を用意しているので是非見ていってください!

PENGIN無料コーディング課題

【デザインカンプ無料配布】未経験からのコーディング学習ステップ

オススメ書籍紹介

Web制作のおすすめ本25選!(コーディング・Webデザイン)

オススメUdemy講座紹介

【2021年10月】Udemy×Web制作!オススメ優良講座15選!