search
LoginSignup
1157
Organization

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

この記事はNuco Advent Calendar 2022の14日目の記事です。


VSCodeに必須の機能20個を紹介していきます。
インストール数と星の数は記事作成時点(2022年11月時点)のものです。

Japanese Language Pack for Visual Studio Code

インストール数:約470万 評価:☆4.5
日本語話者にとって間違いなく必須の拡張機能です。
VSCodeの言語を日本語に変換してくれます。
スクリーンショット 2022-11-18 18.09.21.png

vscode-icons

インストール数:約1250万 評価:☆5.0
アイコンでフォルダやファイルの種類がひと目でわかりやすくなる必須機能です。
見た目のわかりやすさは作業効率に直結します。
スクリーンショット 2022-11-18 18.20.23.png
このように分かりづらいフォルダの中身も
スクリーンショット 2022-11-18 17.29.25.png
この通り何万倍も見やすくなりました!vscode-iconsすごい!
スクリーンショット 2022-11-18 17.34.22.png

Code Spell Checker

インストール数:約560万 評価:☆4.5
英単語などのタイプミスを教えてくれる超ありがたい機能です。
私はタイプミスが多いので良くお世話になっています。
スクリーンショット 2022-11-18 18.19.31.png
このようにタイプミスを青線で指摘してくれます。
スクリーンショット 2022-11-18 18.36.43.png

zenkaku

インストール数:約29万 評価:☆4.5
全角と半角のスペースの違いが一目瞭然になります。
zennkakuhannkaku.png
このように全角スペースは黄色くハイライトされています。分かりやすい!
全角半角比較.png

Path Autocomplete

インストール数:約124万 評価:☆4.5
パスを途中まで入力すれば自動で補完してくれます。
作業効率が上がること請け合いです。
スクリーンショット 2022-11-18 18.08.06.png
このようにPathの予測を出してくれます。
スクリーンショット 2022-11-18 18.43.20.png

Prettier - Code formatter

インストール数:約2643万 評価:☆4.0
HTML、JavaScript、Markdownなどをきれいに整えてくれます。
スクリーンショット 2022-11-18 18.18.31.png
汚いMarkdownも
整形前のファイル.png
このように自動で整えてくれます。便利!
スクリーンショット 2022-11-20 10.03.55.png

indent-rainbow

インストール数:約419万 評価:☆5.0
インデントが色付けされて見やすくなります。
PythonやHTMLなどを書くときは欠かせません。
スクリーンショット 2022-11-18 18.21.47.png
格段にインデントが見やすくなります。
indent-rainbow_jissen.png

GitLens

インストール数:約1866万 評価:☆4.0
gitを用いた共同開発でコードを行単位でいつ誰がどこを書いたかわかるようになります。
スクリーンショット 2022-11-18 18.53.53.png
このように誰がいつどこを変えてどんなコミットメッセージを残したかが分かりやすくなります。
git_lens_author_2.jpg

Git History

インストール数:約717万 評価:☆4.5
gitのログをファイル単位で見やすくしてくれます。
githitory.png
コミット履歴を検索することができたりファイルの更新履歴を一覧にしてくれて非常に便利です。
githistory.png

HTML CSS Support

インストール数:約1236万 評価:☆3.5
CSSの定義を参照してHTMLの入力を自動で補完してくれます。
html-css-support.png
このようにclassの部分をCSSを参照して予測してくれます。タイプミス防止にもなりますね!
スクリーンショット 2022-11-24 19.16.31.png

Output Colorizer

インストール数:約63万 評価:☆5.0
VSCodeの出力を分かりやすく色付けしてくれます。
outputcolorizer.png
エラー文もこの通り読みやすくなりました!
output_colorizer.png

TODO Highlight

インストール数:約301万 評価:☆4.5
なにか後で処理を入れなきゃいけないけど忘れそうなとき便利です。
todohighlight.png
TODOが色付けされて分かりやすいですね!
スクリーンショット 2022-11-22 11.33.04.png

vscode-random

インストール数:約4.5万 評価:☆5.0
ランダムな数字、名前を自動で生成します。
ダミーデータ作成に重宝しています。
スクリーンショット 2022-11-22 11.09.07.png
例えば国名をランダムに入力してほしいとき
vscode-random-#1.png
コマンドパレットからRandom:Country nameを選べば
vscode-random-#2.png
ランダムに国名を入力してくれます。便利!
vscode-random-#3.png

Atom One Dark Theme

インストール数:約375万 評価:☆5.0
目に優しい配色にしてくれる拡張機能です。
スクリーンショット 2022-11-22 13.02.53.png
元々のVSCodeの色合いはこんな感じです。
スクリーンショット 2022-11-22 13.06.20.png
Atom One Dark Themeを適用するとこんな感じになります。
地味かもれませんが長時間作業することを想定するとこういったデザインの違いも侮れません。
スクリーンショット 2022-11-22 13.04.05.png

Trailing Spaces

インストール数:約119万 評価:☆5.0
コードの端っこの無意味なスペースがわかりやすくなります。
trailing_space.png
このように赤色にハイライトされます。
コーディング時のストレスが少し緩和されます。
スクリーンショット 2022-11-22 12.58.55.png

REST Client

インストール数:約288万 評価:☆5.0
VSCode上でhttpリクエストができるようになる拡張機能です。
rest_client.png
リクエストの結果がわかりやすく表示されていますね!
スクリーンショット 2022-11-22 13.46.20.png

Live Server

インストール数:約2815万 評価:☆4.5
ローカルホストを起動してHTMLファイルをサーバーに上げた時の様子を事前に逐一チェックできます。
スクリーンショット 2022-11-24 17.12.10.png
コードの修正とプレビューを同時の行うことができます。
スクリーンショット 2022-11-24 17.09.40.png

Jupyter

インストール数:約5137万 評価:☆2.5
JupyterNotebookをVSCode上で開くことができます。
スクリーンショット 2022-11-24 17.57.59.png
ブラウザを立ち上げずともNotebookを使うことができてストレスフリーです。
スクリーンショット 2022-11-24 18.04.20.png

Dev Container

インストール数:約1559万 評価:☆4.5
VSCodeのコマンドパレットを拡張してDockerのためのコマンドが追加されます。
Dockerを用いたリモート開発をするなら必須の拡張機能です。
スクリーンショット 2022-11-24 17.38.39.png
追加されたコマンドを使えばリモートコンテナ作成がお手軽になります。
またdevcontainer環境でVSCodeの他の拡張機能を使うことができます。
スクリーンショット 2022-11-25 16.45.12.png

Rainbow CSV

インストール数:約230万 評価:☆5.0
CSVファイルのそれぞれの要素がどのカラムに属するかが色付けされてわかりやすくなります。
スクリーンショット 2022-11-24 16.49.13.png
ゴチャゴチャして分かりにくいCSVファイルも
スクリーンショット 2022-11-24 16.52.30.png
色分けされてわかりやすくなりましたね!
スクリーンショット 2022-11-24 16.53.04.png

最後に

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

興味のある方はこちらをご覧ください。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
1157