MENU
カテゴリー
アーカイブ
だいち
このブログの管理者
異業種で仕事をしながら、副業でWeb制作をしているアラサーリーマンです。
日々の勉強の記録や、お役立ち情報を発信していきます。
ホームページ制作などのお仕事に関するご依頼やご相談は、運営者情報のお問い合わせフォームかSNSのDMにて宜しくお願いします。

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

Web制作で使えるVSCodeオススメ拡張機能

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

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

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

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

あわせて読みたい
JSONとは?VSCode設定時に知っておきたい基礎知識まとめ
JSONとは?VSCode設定時に知っておきたい基礎知識まとめどうも、ダイチです。今回はデータフォーマットのJSONについてまとめました。僕はエディタ(VSCode)の設定をいじろうとした時に初めてjsonファイルという存在を知りま...
目次

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

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

Japanese Language Pack for Visual Studio Code

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

優先度 

vscode-icons

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

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

優先度 

Live Sass Compiler

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

  • Sassのコンパイル
  • Live Server(ファイル保存時に自動でブラウザに反映)
  • Auto Prefix(CSSのベンダープレフィックス自動付与)

基本的にはSassのコンパイラとして存在しています。こちらの使い方についてはまた別記事でまとめられたらと思っていますが、コーディングにほぼ必須な機能がパックになっているので、Sassの勉強はこれからという方も入れておいていいと思います。

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

優先度 

下記2つの拡張機能は単独でもインストールできるので、Sassを使わないという方は、先にそれぞれ入れておくのもアリです。

Live Server

Image from Gyazo

※Live Sass Compilerをインストールしたら自動でインストールされます。

ファイル保存時に、ブラウザに自動反映させられる、コーディングには必須で欲しい機能です。

Autoprefixer

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

Live Server同様、Live Sass Compilerをインストールしない方は、これを入れておいたほうがいいです。

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

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

Path Autocomplete

Image from Gyazo

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

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

優先度 

Auto Rename Tag

Image from Gyazo

ペアになっている開始タグと終了タグ名を同時編集できる機能です。どちらか一箇所の記述で良くなるので、大幅な効率化が図れるようになります。
※閉じタグが自動補完される「Auto Close Tag」という拡張機能があり、セットで紹介されることもありますが、VSCodeにはそもそも自動補完機能が備わっているので不要です。

優先度 

HTML CSS Support

Image from Gyazo

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

Image from Gyazo

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

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

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

優先度 

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

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

Bracket Pair Colorizer 2

Image from Gyazo

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

優先度 

indent-rainbow

indent-rainbow

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

優先度 

Highlight Matching Tag

Image from Gyazo

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

優先度 

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

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

CSS Peek

Image from Gyazo

HTMLファイルから適用しているCSSを表示、その場で編集 or ファイル先へ飛ぶことができます。CSSやSCSSのファイルが多くなった時は特に、スタイルの変更をしたい場合にファイルを探す手間が省けます。

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

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

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

優先度 

htmltagwrap

Image from Gyazo

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

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

スタイリング中に親要素を増やす必要がありそうな時など、閉じタグの移動が不要になるので、さっと使えると便利になります。

優先度 

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

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

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

W3C Validation

Image from Gyazo

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

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

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

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

優先度 

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

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

あわせて読みたい
【JDKインストールの流れ】VSCodeでW3Cバリデーションチェック
【JDKインストールの流れ】VSCodeでW3Cバリデーションチェックどうも、ダイチです。VSCodeにはW3Cに準拠したバリデーションチェックができる「W3C Validation」という拡張機能があります。この拡張機能はただインストールしただけだ...

HTMLHint

Image from Gyazo

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

これらを同時に走らせることで、適切なコードかどうか常に確認しながらコーディングができます。

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

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

優先度 

CSSTree validator

Image from Gyazo

W3Cに基づいたCSSの構文チェックをしてくれる拡張機能です。間違っている箇所に波線を引いてくれます。他バリデーションツール同様、エディタ内で警告表示もしてくれて、問題パネルから該当の行番号もわかるようになります。

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

優先度 

Code Spell Checker

Image from Gyazo

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

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

優先度 

まとめ

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

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

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

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

あわせて読みたい
【VSCode×GitHub】かんたん連携手順解説 1/2
【VSCode×GitHub】かんたん連携手順解説 1/2どうも、ダイチです。この記事ではVSCodeからGitHubに連携する手順についてまとめてみました。Gitを学ぶには時間と労力がかかりますし、最適な連携方法(できれば簡単な...

当記事を読んでいる方の中には環境構築をこれからしようとしている初学者の方もいるかと思いますので、開発に適しているブラウザ「Chrome」のお勧め拡張機能をまとめた記事も良かったらこちらもご覧ください!

あわせて読みたい
【2021年】Web制作に使えるchrome拡張機能おすすめ22選
【2021年】Web制作に使えるchrome拡張機能おすすめ22選どうも、ダイチです。今回はWeb制作、Webデザインで使用すると作業が捗るchrome拡張機能を紹介します。開発環境がしやくなる拡張機能がたくさんあるChromeですが、たく...

初学段階で教材選びに悩んでいる方がいれば、動画コンテンツサービスUdemyのオススメ教材をまとめた記事もあるので是非参考にしてみてください!

あわせて読みたい
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】
【Udemy】Web制作関連のオススメ講座紹介!【2021年5月】当記事では動画学習教材「Udemy」について、Webデザイン・Web制作に関連する優良講座を紹介します!世の中には学習教材が数多くあるので、特に独学の方はどれを選んだら...

それでは今回はこのへんで!

Web制作で使えるVSCodeオススメ拡張機能

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

コメント

コメントする

CAPTCHA


目次
閉じる