【2021年最新】Web制作における「VSCode」おすすめ拡張機能20選


Web制作におけるプログラミングをするために使用する代表的なソフト「Visual Studio Code」。

プログラミングの手間を省ける様々な拡張機能があり、より実用性のある機能はどれなのか、拡張機能選びに悩む方も多いのではないでしょうか?

今回は人気・実用性の高い20種類のおすすめ拡張機能をマークアップ言語別に紹介したいと思います。

フロントエンド開発にはこれから紹介する拡張機能の使用をおすすめします!

目次

VSCodeの拡張機能とは

拡張機能とは、プログラミングの効率を上げたり、規約通りのコードに修正してくれるような便利な機能の事です。

インストールすることで、自分専用のよりプログラミングしやすいエディタにすることが出来ます。

拡張機能をインストールする方法

Marketplaceを開く

拡張機能を導入するために、Marketplace(左列5番目のマーク)を開きます。

検索ホームページから開くこともできます。

拡張機能を有効にする

Marketplaceの検索欄から導入したい拡張機能を検索し、【インストール】をクリックします。

インストールの完了後、自動で有効化して拡張機能が使用できるようになります。

拡張機能をアンインストールする方法

導入した拡張機能を検索し、【アンインストール】をクリックします。

おすすめの拡張機能20選

共通

Japanese Language Pack

VSCodeを日本語表記にしてくれる拡張機能。

なっつ

リア友に話したところ、あえて英語表記にしているんだと
豪語していました(笑)

おすすめ度

bracket pair colorize2

カッコ()などを色付きで表示してくれる拡張機能です。とても見やすい。

おすすめ度

indent-rainbow

インデント(左の間隔)を虹色に表示してくれる拡張機能です。カラフル。

おすすめ度

Code Spell Checker

スペルミスを検出してくれる拡張機能です。不適切な単語をチェックしてくれるので、とても助かります。

おすすめ度

Live Server

ローカルサーバを立てることができる拡張機能です。必須級。

サーバーを立てる方法は以下から好きな方法を選んでください。

  • サイドバーのファイルを右クリックして「Open with Live Server」を選択
  • 起動したいファイルを開いた状態で「Command + L, O」
  • 右下にある「Go Live」クリック
おすすめ度

Path Intellisense

パスの入力を自動検索してくれる拡張機能です。link、script、imgタグを使うときに便利です。

閲覧・ダウンロード履歴やCookieなども消去できます。

おすすめ度

Prettier

コードのフォーマットは自動で整えてくれる拡張機能です。

おすすめ度

Trailing Spaces

行末の空白を強調表示してくれる拡張機能です。

ファイル保存時に、自動で末尾の空白を削除してくれる設定もあります。

おすすめ度

Zenkaku

全角スペースを強調して表示してくれる拡張機能です。

おすすめ度

HTML

Auto Rename Tag

HTML/XMLの開始・閉じタグを自動的に変更する拡張機能です。タグ名を変えたくなった時に便利です。

おすすめ度

HTMLHint

HTMLファイルをリアルタイムで文法チェックする拡張機能です。

おすすめ度

W3C Validation

HTMLコードをW3C世界標準規約によるチェックする拡張機能です。

Java Runtime Environment(JRE)をローカルにダウンロード後、適用されます。

おすすめ度

Highlight Matching Tag

閉じタグをハイライトする拡張機能です。

おすすめ度

CSS/Sass

CSScomb

CSSを『オートフォーマット』してくれる拡張機能です。

手間のかかる作業を効率化して、きれいで見やすいコードを作成できます。

おすすめ度

CSSTree validator

CSSコードをW3C世界標準規約によるチェックする拡張機能です。

おすすめ度

HTML CSS Support

HTMLタグの属性値に、CSSを表示する拡張機能です。

主にクラス・ID属性の補完、css・scssファイルの検索をしてくれます。

おすすめ度

Live Sass Compiler

Sassを手軽にコンパイルしてくれる拡張機能です。

おすすめ度

JavaScript(jQuery)

Regex Previewer

正規表現を好きな文字でチェックできる拡張機能です。

おすすめ度

PHP

php cs fixer

PHPコードを整形してくれる拡張機能です。フォーマットのチェック・訂正をしてくれます。

おすすめ度

PHP Intelephense

PHPのコードチェック・補完をしてくれる拡張機能です。

Stubs項目にWordPressの追加をすることで、WordPress関数も補完してくれます。

おすすめ度

VSCodeの拡張機能を導入しよう

いかがでしたか?

今回は人気・実用性の高いVSCodeのおすすめ拡張機能をご紹介してきました。

プログラミングを効率化するために、どの機能を使用するべきか検討がついたと思います。

これから拡張機能を導入する方は、ぜひ参考にしてみてくださいね。

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

シェアして頂けると嬉しいです!

この記事を書いた人

茨城出身、東京在住。
MARCH理工▶︎大手ITエンジニア▶︎フリーランスへ
1998年3月9日生まれ。
170cm、O型(なぜか綺麗好き)。
お酒、お笑い、ゲームが大好きです!

コメント

コメントする

CAPTCHA


目次
閉じる