Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説
![](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1200,h_675/https://susanweblog.com/wp-content/uploads/2023/12/2478fa146f8f8e7fd60030b8307557f3-1.webp)
Visual Studio Code(VS Code)は多くのWeb開発者に愛用されているエディタです。
VS Codeには様々なプラグイン・拡張機能が存在し、それらを利用することで、開発作業をより簡単に効率的することができます。
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
本記事では、そんなVS Codeのプラグイン・拡張機能の中でもおすすめの10個を厳選し紹介していきたいと思います。
DMM WEB CAMP
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_436/http://susanweblog.com/wp-content/uploads/2023/08/Screenshot-2023-07-31-at-12.40.24-pm-1-1024x436.webp)
未経験者のために開発されたカリキュラムで、現役エンジニアによる充実したサポート体制。最短3ヶ月でITエンジニアへ転職を目指すことが可能。
入学金 | 0円 |
料金 | 169,800円(税込)〜 |
学び方 | オンライン(自習形式) |
校舎 | ー |
保証制度 | 8日間返金保証 早期卒業返金保証 |
就職サポート | ○ |
運営会社 | 株式会社インフラトップ |
初心者におすすめのプログラミングスクールに関しては【初心者用】フリーランスも目指せる!おすすめのプログラミングスクール16選で詳しく紹介していますので、興味ある方はぜひチェックしてみてください。
![【初心者用】フリーランスも目指せる!おすすめのプログラミングスクール16選 【初心者用】フリーランスも目指せる!おすすめのプログラミングスクール16選](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/08/99abdd42afc69bb509ba6a0720dc7196-320x180.webp)
レバテックフリーランス
![レバテックフリーランス レバテックフリーランス](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_490/http://susanweblog.com/wp-content/uploads/2023/07/Screenshot-2023-07-30-at-12.51.29-pm-1024x490.webp)
業界最大級の案件数を誇るフリーランスITエンジニア向けのサービス。専門アドバイザーによる案件提案と全面的なサポートを提供。
案件数 | 50,000件以上 |
リモート | ○ (半分くらいがリモート対応) |
単価 | 45万 〜 195万円 |
稼働日数 | 週5日が多め |
福利厚生 | ◎ |
運営会社 | レバテック株式会社 |
その他のおすすめのフリーランスエンジニアエージェントに関してはフリーランスエンジニア・プログラマー用エージェントでおすすめはどこ?12社を徹底比較でも詳しく解説していますので、興味ある方はぜひチェックしてみてください。
![フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ?12社を徹底比較 フリーランスエンジニア・プログラマー用エージェントでおすすめはどこ?12社を徹底比較](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/07/2389c115e02bd445f90b54d0b9c64c4e-320x180.webp)
VS Code(Visual Studio Code)とは
VS Code(Visual Studio Code)は、Microsoftが開発したオープンソースのコードエディターです。
VS Codeは、軽量でありながら強力な機能を備えており、さまざまなプログラミング言語のサポート、デバッグ機能、Gitの統合、拡張機能のサポート、シンタックスハイライト、コードの自動補完、リファクタリングツールなどを提供してくれます。
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_109/https://susanweblog.com/wp-content/uploads/2024/01/microsoft-windows.png)
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_512,h_120/https://susanweblog.com/wp-content/uploads/2024/01/macOS.png)
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_256,h_295/https://susanweblog.com/wp-content/uploads/2024/01/linux-tux.png)
また、VS Codeはクロスプラットフォームであり、Windows、Mac、Linuxの各環境で使用することができます。
拡張機能をインストールすることで、さらに多くの機能を追加でき、ユーザーのニーズに合わせてカスタマイズすることが可能です。
このような特性により、VS Codeは多くの開発者から支持を得ています。
その他のおすすめの無料コードエディタに関しては無料のコードエディタ!初心者におすすめの6つのツール!Visual Studio Code他で詳しく紹介していますので、ぜひチェックしてみてください。
![【無料】初心者におすすめのテキストエディタ6選!Visual Studio Code他 【無料】初心者におすすめのテキストエディタ6選!Visual Studio Code他](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_128,h_72/https://susanweblog.com/wp-content/uploads/2023/07/d1e450f552fddf874fc277c70554a6c2-320x180.webp)
VS Codeでプラグインをインストールする方法
VS Codeでプラグインをインストールする方法は以下の手順に従ってください。
1. Visual Studio Codeを開きます。
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_482,h_256/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-21-at-6.52.58-pm.png)
まずはデスクトップからVisual Studio Codeを開いてください。
2. 拡張機能(Extensions)アイコンをクリック
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-21-at-6.56.19-pm-1024x689.png)
Visual Studio Codeを開いたら左側のメニューバーで、拡張機能(Extensions)アイコンをクリックします。
アイコンは、正方形で四角いパズルピースのような形状です。
3. プラグインの検索
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-21-at-6.56.39-pm-1024x689.png)
拡張機能パネルが表示されたら、検索バーにインストールしたいプラグインの名前またはキーワードを入力します。
例えば、”html”と入力してhtml用のプラグインを検索します。
4.インストールしたいプラグインをクリック
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-21-at-6.57.17-pm-1024x689.png)
検索結果が表示された後、インストールしたいプラグインをクリックします。
5.プラグインをインストール
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-21-at-7.00.14-pm-1024x689.png)
プラグインの詳細ページが表示されますので、”Install”(または “インストール”)ボタンをクリックします。
6. インストールの完了
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-21-at-6.57.56-pm-1024x689.png)
インストールが開始され、完了するとボタンの表示が変わります。
表示が “Uninstall”(または”アンインストール”)に変わったら、プラグインのインストールが完了しています。
特定の言語やフレームワークに特化したプラグインを探す場合は、言語やフレームワーク名を検索キーワードに追加すると効果的です。
例えば、”JavaScript lint”と検索するとJavaScriptのリントツールに関連するプラグインが表示されます。
VS Codeのおすすめプラグイン・拡張機能10選
本記事でご紹介するプラグインは以下の10個です。
- Prettier – Code formatter
- ESLint
- Live Server
- Auto Close Tag
- Auto Rename Tag
- Bracket Pair Colorizer
- Japanese Language Pack for Visual Studio Code
- vscode-icons
- Code Spell Checker
- Color Highlight
![すーさん すーさん](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_72,h_72/http://susanweblog.com/wp-content/uploads/2023/06/FFAB46C1-3DF8-417A-88FA-2F731079CAC2.jpg)
それでは、それぞれのプラグインについて詳しく見ていきましょう。
Prettier – Code formatter
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.55.21-am-1024x689.png)
まずご紹介するのは、Prettier – Code formatterです。Prettierはコードを自動的に整形してくれるプラグインです。
これさえあれば、全てのコードをワンクリックで整然とした形式に整えることが可能。手動で整形する手間が省けます。
ESLint
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.43.31-am-1024x689.png)
次にご紹介するのは、ESLintです。JavaScriptのコードに存在する問題を見つけて指摘してくれるプラグインです。
これにより、コードに潜むミスを早期にキャッチし事前に修正することが可能となります。
Live Server
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.43.48-am-1024x689.png)
Live Serverは、ローカル開発サーバーを手軽に立ち上げることができるプラグインです。
これを使えば、リアルタイムでページの変更を見ることができ、変更の影響をすぐに確認できます。
Auto Close Tag
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.44.05-am-1024x689.png)
Auto Close Tagは、HTMLやXMLの閉じタグを自動的に生成してくれるプラグインです。
このプラグインのおかげで、タグの閉じ忘れによるエラーを未然に防ぐことが可能となります。
これこそが、Web制作における真の便利さと言えるでしょう。
Auto Rename Tag
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.44.18-am-1024x689.png)
Auto Rename Tagは、開始タグの名前を変えると、同時に対応する終了タグの名前も自動で変えてくれるすばらしいプラグインです。
この機能のおかげで、コードの一貫性を保つことが簡単になります。
Zenkaku
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/https://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.53.01-am-1024x689.png)
Zenkakuは、全角スペースを可視化してくれるプラグインです。
半角スペースと全角スペースを見分けることができるため、入力ミスを簡単に見つけることができます。
Japanese Language Pack for Visual Studio Code
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.46.16-am-1024x689.png)
Japanese Language Pack for Visual Studio Codeは、日本語に対応した言語パックの一つで、これをVS Codeに追加することでエディタのメニューやメッセージ、ヘルプファイルなどのユーザーインターフェースが日本語に変更されます。
これにより、日本語を母語とするユーザーや、英語に不慣れなユーザーでもVS Codeを快適に使用することが可能になります。
vscode-icons
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.47.03-am-1024x689.png)
vscode-iconsは、ファイルとフォルダに対して、視覚的に識別しやすいアイコンを表示することができます。
これにより、異なる種類のファイルやフォルダを一目で区別することが可能になり、プロジェクトのナビゲーションが容易になります。
Code Spell Checker
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.48.03-am-1024x689.png)
Code Spell Checkerは、英語のスペルミスを見つけてくれるプラグインです。
これにより、英語のコメントや変数名でのスペルミスを防ぐことができ、プログラム全体の品質を高めることができます。
Color Highlight
![Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説 programming-tips, coding-programming - Visual Studio Codeのおすすめプラグイン10選!インストール方法も解説](https://sp-ao.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_1024,h_689/http://susanweblog.com/wp-content/uploads/2023/06/Screenshot-2023-06-22-at-12.42.57-am-1024x689.png)
Color Highlightは、色を表す文字列(例えば”#FF0000″、”rgb(255, 0, 0)”、”red”など)に背景色やアウトラインでその色を表示してくれるプラグインです。
これにより、実際の色を直接確認することができるため、色のコードを視覚的に理解することが容易になります。
まとめ
VS CodeでのWeb制作を効率化するためのプラグイン・拡張機能を紹介しました。
役立つプラグインはたくさんありますが、特に「Prettier」や「Live Server」、「Visual Studio IntelliCode」などは、作業の効率化に大いに役立ちます。
これらのプラグインを利用することで、コードの可読性や作業効率を高めることが可能です。
新たにVS Codeを使い始めた方はもちろん、すでに使用している方もこれらのプラグインを導入してみることをおすすめします。