この記事はNuco Advent Calendar 2023の3日目の記事です。
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。
はじめに
VSCodeは世界で多くの人が使っているコードエディタです。
開発の際に使用している人も多いのではないでしょうか。
今回はそんなVSCodeの拡張機能を一挙に紹介していきます。
VScodeの機能が知りたい方はこちらの記事で解説しています。
ぜひ一緒に読んでみてください。
拡張機能
VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。
機能を追加して、より自分が使いやすいコードエディタにすることができます。
拡張機能のインストール
拡張機能のインストールのやり方を説明します。
- アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです）
- インストールしたい拡張機能を検索する
- 拡張機能を選ぶ
- インストールをクリックする
この4ステップで簡単に拡張機能をインストールできます。
オススメ拡張機能
ここからは、オススメの拡張機能をカテゴリごとに紹介します。
これは絶対入れるべき！基本機能
Japanese Language Pack for Visual Studio Code
インストール数：約425万 評価：☆4.5
VSCodeの言語を日本語にしてくれる拡張機能です。VSCodeをインストールした後すぐに入れましょう。
コードの可読性を上げる！オススメ機能
indent-rainbow
インストール数：約645万 評価：☆5.0
インデントを色付けして見やすくしてくれます。
インデントが黄色と緑で色付けされているのがわかります。
インデント間違いによってミスが起こってしまう可能性を減らすことができます。
Rainbow CSV
インストール数：約440万 評価：☆5.0
CSVファイルの要素を色付けして表示してくれます。
Prettier - Code formatter
インストール数：約3883万 評価：☆3.5
コードを綺麗に整形してくれる拡張機能です。
HTML,CSS,Markdownなどを書く際にとても便利です。
Better Comments
インストール数：約588万 評価：☆5.0
コメントを色分けして表示してくれます。
また、TODOや重要なコメントなどを強調表示することもできます。
コードの品質を上げる！オススメ機能
zenkaku
インストール数：約42万 評価：☆4.5
全角スペースを強調して表示してくれます。
この機能を入れれば、半角スペースと全角スペースを間違えることはなくなるでしょう。
このように全角スペースが枠付きで表示され、一目瞭然です。
IntelliCode
インストール数：約3640万 評価：☆4.0
AIを使用したコード補完拡張機能です。
コードの文脈によって、常に最適なコードを候補として表示してくれます。
Path Intellisense
インストール数：約1153万 評価：☆5.0
コード内のファイルパスを自動補完してくれる機能です。
ファイルパスの入力ミスが劇的に少なくなります。
Auto Rename Tag
インストール数：約1600万 評価：☆3.5
開始タグ、終了タグのどちらかを変更した際に、タグの名前を自動で変換してくれるタグです。
これを使うと、タグの閉じ忘れやタグの変更ミスがなくなります。
Code Spell Checker
インストール数：約885万 評価：☆4.5
コードのスペルミスを指摘してくれる拡張機能です。
スペルミスによってコードが動かなくなってしまうというミスを防いでくれます。
Trailing Spaces
インストール数：約174万 評価：☆5.0
行の最後にある無駄なスペースを可視化してくれます。
このように赤く表示されるので見やすくなります。
チーム開発なら必須！
Git Lens
インストール数：約425万 評価：☆4.5
gitを使ってチーム開発をする際に、誰がどのコードを書いたかわかるようになります。
Git History
インストール数：約992万 評価：☆4.5
gitのログをわかりやすく表示してくれます。
コミット履歴を検索したりすることもでき非常に便利です。
Git Graph
インストール数：約653万 評価：☆5.0
gitのコミット履歴をグラフ表示してくれる機能です。
このように誰がいつコミットしたか視覚的にわかりやすくなります。
複数人で作業する場合は色分けされて表示されるため、便利です。
Remote - SSH
インストール数：約1815万 評価：☆4.0
SSHでリモートサーバーに接続し、VSCode上でコードを編集できる拡張機能です。
Dev Containers
インストール数：約2135万 評価：☆4.5
Dockerを用いたリモート開発をする場合に重宝する拡張機能です。
Live Share
インストール数：約1491万 評価：☆4.0
リモートでも、リアルタイムで共同編集やデバッグなどができます。ターミナルやサーバーの共有もできてしまう優秀拡張機能です。
Live Server
インストール数：約4213万 評価：☆4.5
簡易的なローカルサーバを立てることができ、HTMLファイルをサーバーに上げた時の様子を確認できる拡張機能です。
ここまで進化した!AI機能
GitHub Copilot
インストール数：約1050万 評価：☆3.5
AIがコードを自動生成してくれるサービスです。
コードを書いている途中に、AIが予測したコードを出してくれるので、開発効率が上がること間違いなしです。
利用は有料で、個人用アカウントで月10ドルで利用できます。
Tabnine AI Autocomplete
インストール数：約661万 評価：☆4.0
AIを活用した自動補完拡張機能です。
様々な言語に対応しており、非常に便利です。
コード書くのが楽になる！フロントエンド向け機能
HTML CSS Support
インストール数：約1765万 評価：☆3.5
CSSの定義を参照し、HTMLコードを補完してくれる機能です。
classやIDの名前を自動で補完してくれるため、ミスが少なくなります。
JavaScript (ES6) code snippets
インストール数：約1400万 評価：☆4.5
JavaScriptのコードを書く際に使えるコードスニペットが揃った拡張機能です。
ES7+ React/Redux/React-Native snippets
インストール数：約1050万 評価：☆4.0
Reactで開発を行うときに、重宝するスニペットが揃っています。
Vetur
インストール数：約1317万 評価：☆4.5
Vue.jsの開発するときの定番拡張機能です。
ESLint
インストール数：約311万 評価：☆4.5
JavaScriptとTypeScriptのコードエラーを検出して、コードの質を高めてくれます。
バックエンド向け機能
C/C++
インストール数：約5637万 評価：☆3.5
C言語で開発を行う際に入れておくべき拡張機能です。
コード補完やデバッグなどの機能が入っています。
Python
インストール数：約1億504万 評価：☆4.5
Pythonで開発を行う際には入れておきたい拡張機能です。
Pylance
インストール数：約7736万 評価：☆3.0
Python言語のサポート機能になります。
上記で紹介した、Pythonと一緒にインストールすると良いでしょう。
Django
インストール数：約890万 評価：☆4.0
VSCodeでDjangoフレームワークを使って開発を行う時に入れるべき拡張機能です。
Jupyter
インストール数：約425万 評価：☆4.5
VSCode上でJupyter Notebookを開くことができます。
ブラウザを開くことなく、Jupyterを起動できるので便利です。
Go
インストール数：約1111万 評価：☆4.5
Go言語のサポートを行ってくれる拡張機能です。
PHP Intelephense
インストール数：約1036万 評価：☆4.5
PHPを開発で使う際は入れておきたい拡張機能です。
見た目をカスタマイズ！配色・アイコン拡張機能
GitHub Theme
インストール数：約1047万 評価：☆4.5
One Dark Pro
インストール数：約8426万 評価：☆4.5
Dracula Official
インストール数：約627万 評価：☆5.0
Material Icon Theme
インストール数：約208万 評価：☆5.0
こんな感じになります。
好きな配色やアイコンテーマを見つけて、自分好みにカスタマイズしましょう！
vscode-icons
インストール数：約162万 評価：☆5.0
こんな感じになります。
その他おすすめ機能
Code Runner
インストール数：約232万 評価：☆4.5
プログラムを簡単に実行することができる拡張機能です。様々な言語に対応しており、便利です。
REST Client
インストール数：約400万 評価：☆5.0
VSCode上でHTTPリクエストを簡単に行えるようになる拡張機能です。
TODO Highlight
インストール数：約405万 評価：☆4.5
TODOコメントをハイライトで目立たせてくれる拡張機能です。
TODOがどこにいったかわからなくなった!という事態を防げますね。
このように色付けして目立たせてくれます。
まとめ
本記事では、VSCodeの拡張機能を紹介しました。
拡張機能を駆使して、快適なコーディング生活を送りましょう！
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。
また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。