Visual Studio Codeを使うなら絶対に入れておきたい拡張機能Top20【2022最新版】

この記事は[Nuco Advent Calendar 2022](https://qiita.com/advent-calendar/2022/nuco)の14日目の記事です。
___
 VSCodeに必須の機能20個を紹介していきます。
インストール数と星の数は記事作成時点(2022年11月時点)のものです。
  - [Japanese Language Pack for Visual Studio Code](#japanese-language-pack-for-visual-studio-code)
  - [vscode-icons](#vscode-icons)
  - [Code Spell Checker](#code-spell-checker)
  - [zenkaku](#zenkaku)
  - [Path Autocomplete](#path-autocomplete)
  - [Prettier - Code formatter](#prettier---code-formatter)
  - [indent-rainbow](#indent-rainbow)
  - [GitLens](#gitlens)
  - [Git History](#git-history)
  - [HTML CSS Support](#html-css-support)
  - [Output Colorizer](#output-colorizer)
  - [TODO Highlight](#todo-highlight)
  - [vscode-random](#vscode-random)
  - [Atom One Dark Theme](#atom-one-dark-theme)
  - [Trailing Spaces](#trailing-spaces)
  - [REST Client](#rest-client)
  - [Live Server](#live-server)
  - [Jupyter](#jupyter)
  - [Dev Container](#dev-container)
  - [Rainbow CSV](#rainbow-csv)

## [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
**インストール数：約470万　評価：☆4.5**
日本語話者にとって間違いなく必須の拡張機能です。
VSCodeの言語を日本語に変換してくれます。
![スクリーンショット 2022-11-18 18.09.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/a8129981-6633-03b0-bdd8-7dadba46597d.png)
## [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
**インストール数：約1250万　評価：☆5.0**
アイコンでフォルダやファイルの種類がひと目でわかりやすくなる必須機能です。
見た目のわかりやすさは作業効率に直結します。
![スクリーンショット 2022-11-18 18.20.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/ced21e80-bf71-e36d-76f1-512ef83960cb.png)
このように分かりづらいフォルダの中身も
![スクリーンショット 2022-11-18 17.29.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/f8e93c02-10fd-e7d3-b4ed-9d6668bd707d.png)
この通り何万倍も見やすくなりました！vscode-iconsすごい！
![スクリーンショット 2022-11-18 17.34.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/a2b574ca-7067-74b0-0c4e-7097cf9395c0.png)
## [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
**インストール数：約560万　評価：☆4.5**
英単語などのタイプミスを教えてくれる超ありがたい機能です。
私はタイプミスが多いので良くお世話になっています。
![スクリーンショット 2022-11-18 18.19.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/4a109f6a-f0a8-f733-3800-4a6ad852e3ba.png)
このようにタイプミスを青線で指摘してくれます。
![スクリーンショット 2022-11-18 18.36.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/97d7916b-9c26-3c13-5ba9-bbb71158d09c.png)
## [zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)
**インストール数：約29万　評価：☆4.5**
全角と半角のスペースの違いが一目瞭然になります。
![zennkakuhannkaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/38ac58b2-8ba0-67b7-dff4-5b0c2ccd6ed3.png)
このように全角スペースは黄色くハイライトされています。分かりやすい！
![全角半角比較.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/a30319b2-7462-f8cd-99eb-e5c157f60816.png)
## [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
**インストール数：約124万　評価：☆4.5**
パスを途中まで入力すれば自動で補完してくれます。
作業効率が上がること請け合いです。
![スクリーンショット 2022-11-18 18.08.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/ee078314-c859-0576-2146-c9d4a9f1ec6f.png)
このようにPathの予測を出してくれます。
![スクリーンショット 2022-11-18 18.43.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/4fd8279a-907d-a876-6826-a9882604c871.png)
## [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
**インストール数：約2643万　評価：☆4.0**
HTML、JavaScript、Markdownなどをきれいに整えてくれます。
![スクリーンショット 2022-11-18 18.18.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/c4eeac80-a3b2-6a28-0297-f38e3b74d17f.png)
汚いMarkdownも
![整形前のファイル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/c3043a88-33b2-0700-fc4a-b4dfeebdfd38.png)
このように自動で整えてくれます。便利！
![スクリーンショット 2022-11-20 10.03.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/b5929a33-9713-2edf-af40-93c8d607a73f.png)
## [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
**インストール数：約419万　評価：☆5.0**
インデントが色付けされて見やすくなります。
PythonやHTMLなどを書くときは欠かせません。
![スクリーンショット 2022-11-18 18.21.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/5a94f614-ca33-e911-2bef-752219fdfdd6.png)
格段にインデントが見やすくなります。
![indent-rainbow_jissen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/a0c3f8df-eaf1-814d-008c-32a613aaea9b.png)
## [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
**インストール数：約1866万　評価：☆4.0**
gitを用いた共同開発でコードを行単位でいつ誰がどこを書いたかわかるようになります。
![スクリーンショット 2022-11-18 18.53.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/d32ff4ae-0f8c-f0a2-4b72-2e709b11a6d6.png)
このように誰がいつどこを変えてどんなコミットメッセージを残したかが分かりやすくなります。
![git_lens_author_2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/2721b68a-01ac-8d3b-79a6-334ac7144de3.jpeg)
## [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
**インストール数：約717万　評価：☆4.5**
gitのログをファイル単位で見やすくしてくれます。
![githitory.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/d046f196-30dc-43c2-800b-b03252317b22.png)
コミット履歴を検索することができたりファイルの更新履歴を一覧にしてくれて非常に便利です。
![githistory.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/6d85f682-645b-f373-3281-5e58a5fa50cc.png)
## [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
**インストール数：約1236万　評価：☆3.5**
CSSの定義を参照してHTMLの入力を自動で補完してくれます。
![html-css-support.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/fae5ae0a-be98-a0ee-eb70-6dd1d112ff71.png)
このようにclassの部分をCSSを参照して予測してくれます。タイプミス防止にもなりますね！
![スクリーンショット 2022-11-24 19.16.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/0ae2bb6f-8314-0ad8-0b20-c0a44b2dde53.png)
## [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
**インストール数：約63万　評価：☆5.0**
VSCodeの出力を分かりやすく色付けしてくれます。
![outputcolorizer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/f9de42fe-d1d6-7ee9-2d3e-d9d79212a482.png)
エラー文もこの通り読みやすくなりました！
![output_colorizer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/7437e37d-fc16-d72c-55e7-ba9275fb9849.png)
## [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
**インストール数：約301万　評価：☆4.5**
なにか後で処理を入れなきゃいけないけど忘れそうなとき便利です。
![todohighlight.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/c06897e9-c0cd-4faf-a996-5ec5c94d6902.png)
TODOが色付けされて分かりやすいですね！
![スクリーンショット 2022-11-22 11.33.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/6170db42-20f8-b808-c92e-8a9f5bd50ec3.png)
## [vscode-random](https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random)
**インストール数：約4.5万　評価：☆5.0**
ランダムな数字、名前を自動で生成します。
ダミーデータ作成に重宝しています。
![スクリーンショット 2022-11-22 11.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/44928bf4-fb14-29a9-5d44-f1a0777ebe31.png)
例えば国名をランダムに入力してほしいとき
![vscode-random-#1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/2db0ee78-4aff-e2ca-53f0-6deb6b23230a.png)
コマンドパレットからRandom:Country nameを選べば
![vscode-random-#2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/aace08d0-c43e-8862-1794-bd226733d810.png)
ランダムに国名を入力してくれます。便利！
![vscode-random-#3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/12e27b3b-b452-489e-3b20-018b8315aa32.png)
## [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)
**インストール数：約375万　評価：☆5.0**
目に優しい配色にしてくれる拡張機能です。
![スクリーンショット 2022-11-22 13.02.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/1ffa12ef-46e2-1cd1-2bf3-47b23395526d.png)
元々のVSCodeの色合いはこんな感じです。
![スクリーンショット 2022-11-22 13.06.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/e577fee5-f736-9dc0-03fc-7379071a68d4.png)
Atom One Dark Themeを適用するとこんな感じになります。
地味かもれませんが長時間作業することを想定するとこういったデザインの違いも侮れません。
![スクリーンショット 2022-11-22 13.04.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/3b82e356-fd90-5824-7415-312e7769629d.png)
## [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
**インストール数：約119万　評価：☆5.0**
コードの端っこの無意味なスペースがわかりやすくなります。
![trailing_space.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/05222292-4af5-172a-a671-6f464dd4b30f.png)
このように赤色にハイライトされます。
コーディング時のストレスが少し緩和されます。
![スクリーンショット 2022-11-22 12.58.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/f11a51f2-ba6f-5601-98f1-66b240aaf705.png)
## [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
**インストール数：約288万　評価：☆5.0**
VSCode上でhttpリクエストができるようになる拡張機能です。
![rest_client.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/6551bd3c-2af1-85be-886b-ee7f7f63d34b.png)
リクエストの結果がわかりやすく表示されていますね！
![スクリーンショット 2022-11-22 13.46.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/0c6bd4ff-60e3-bfa1-973f-1396188f7be7.png)
## [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
**インストール数：約2815万　評価：☆4.5**
ローカルホストを起動してHTMLファイルをサーバーに上げた時の様子を事前に逐一チェックできます。
![スクリーンショット 2022-11-24 17.12.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/32549ac8-8f69-21ec-5280-5413442810a3.png)
コードの修正とプレビューを同時の行うことができます。
![スクリーンショット 2022-11-24 17.09.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/cad41a41-dd04-39e0-b910-b4d7f81771a9.png)
## [Jupyter](https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter)
**インストール数：約5137万　評価：☆2.5**
JupyterNotebookをVSCode上で開くことができます。
![スクリーンショット 2022-11-24 17.57.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/a426cb81-034c-1641-5b22-8bb5dbfd187f.png)
ブラウザを立ち上げずともNotebookを使うことができてストレスフリーです。
![スクリーンショット 2022-11-24 18.04.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/2d0a565f-8b56-0297-2f81-068985113570.png)
## [Dev Container](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
**インストール数：約1559万　評価：☆4.5**
VSCodeのコマンドパレットを拡張してDockerのためのコマンドが追加されます。
Dockerを用いたリモート開発をするなら必須の拡張機能です。
![スクリーンショット 2022-11-24 17.38.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/22f9b718-78c5-5163-043a-7f7856cc5c31.png)
追加されたコマンドを使えばリモートコンテナ作成がお手軽になります。
またdevcontainer環境でVSCodeの他の拡張機能を使うことができます。
![スクリーンショット 2022-11-25 16.45.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/4f99d070-4bed-d5e2-1cce-5fb5cb23a52e.png)
## [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
**インストール数：約230万　評価：☆5.0**
CSVファイルのそれぞれの要素がどのカラムに属するかが色付けされてわかりやすくなります。
![スクリーンショット 2022-11-24 16.49.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/e6ce39af-6b8c-116a-d1b2-32c0dcff0a9d.png)
ゴチャゴチャして分かりにくいCSVファイルも
![スクリーンショット 2022-11-24 16.52.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/1f00a009-5929-1054-114f-e4f6579f9ea1.png)
色分けされてわかりやすくなりましたね！
![スクリーンショット 2022-11-24 16.53.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2957254/f5a350a9-5443-fb8a-4e79-c25d02cf4681.png)
## 最後に

弊社では、経験の有無を問わず、社員やインターン生の採用を行っています。

興味のある方は[こちら](https://www.recruit.nuco.co.jp/)をご覧ください。