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

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

Japanese Language Pack for Visual Studio Code
vscode-icons
Code Spell Checker
zenkaku
Path Autocomplete
Prettier - Code formatter
indent-rainbow
GitLens
Git History
HTML CSS Support
Output Colorizer
TODO Highlight
vscode-random
Atom One Dark Theme
Trailing Spaces
REST Client
Live Server
Jupyter
Dev Container
Rainbow CSV

Japanese Language Pack for Visual Studio Code

インストール数：約470万　評価：☆4.5
日本語話者にとって間違いなく必須の拡張機能です。
VSCodeの言語を日本語に変換してくれます。

vscode-icons

インストール数：約1250万　評価：☆5.0
アイコンでフォルダやファイルの種類がひと目でわかりやすくなる必須機能です。
見た目のわかりやすさは作業効率に直結します。

このように分かりづらいフォルダの中身も

この通り何万倍も見やすくなりました！vscode-iconsすごい！

Code Spell Checker

インストール数：約560万　評価：☆4.5
英単語などのタイプミスを教えてくれる超ありがたい機能です。
私はタイプミスが多いので良くお世話になっています。

このようにタイプミスを青線で指摘してくれます。

zenkaku

インストール数：約29万　評価：☆4.5
全角と半角のスペースの違いが一目瞭然になります。

このように全角スペースは黄色くハイライトされています。分かりやすい！

Path Autocomplete

インストール数：約124万　評価：☆4.5
パスを途中まで入力すれば自動で補完してくれます。
作業効率が上がること請け合いです。

このようにPathの予測を出してくれます。

Prettier - Code formatter

インストール数：約2643万　評価：☆4.0
HTML、JavaScript、Markdownなどをきれいに整えてくれます。

汚いMarkdownも

このように自動で整えてくれます。便利！

indent-rainbow

インストール数：約419万　評価：☆5.0
インデントが色付けされて見やすくなります。
PythonやHTMLなどを書くときは欠かせません。

格段にインデントが見やすくなります。

GitLens

インストール数：約1866万　評価：☆4.0
gitを用いた共同開発でコードを行単位でいつ誰がどこを書いたかわかるようになります。

このように誰がいつどこを変えてどんなコミットメッセージを残したかが分かりやすくなります。

Git History

インストール数：約717万　評価：☆4.5
gitのログをファイル単位で見やすくしてくれます。

コミット履歴を検索することができたりファイルの更新履歴を一覧にしてくれて非常に便利です。

HTML CSS Support

インストール数：約1236万　評価：☆3.5
CSSの定義を参照してHTMLの入力を自動で補完してくれます。

このようにclassの部分をCSSを参照して予測してくれます。タイプミス防止にもなりますね！

Output Colorizer

インストール数：約63万　評価：☆5.0
VSCodeの出力を分かりやすく色付けしてくれます。

エラー文もこの通り読みやすくなりました！

TODO Highlight

インストール数：約301万　評価：☆4.5
なにか後で処理を入れなきゃいけないけど忘れそうなとき便利です。

TODOが色付けされて分かりやすいですね！

vscode-random

インストール数：約4.5万　評価：☆5.0
ランダムな数字、名前を自動で生成します。
ダミーデータ作成に重宝しています。

例えば国名をランダムに入力してほしいとき

コマンドパレットからRandom:Country nameを選べば

ランダムに国名を入力してくれます。便利！

Atom One Dark Theme

インストール数：約375万　評価：☆5.0
目に優しい配色にしてくれる拡張機能です。

元々のVSCodeの色合いはこんな感じです。

Atom One Dark Themeを適用するとこんな感じになります。
地味かもれませんが長時間作業することを想定するとこういったデザインの違いも侮れません。

Trailing Spaces

インストール数：約119万　評価：☆5.0
コードの端っこの無意味なスペースがわかりやすくなります。

このように赤色にハイライトされます。
コーディング時のストレスが少し緩和されます。

REST Client

インストール数：約288万　評価：☆5.0
VSCode上でhttpリクエストができるようになる拡張機能です。

リクエストの結果がわかりやすく表示されていますね！

Live Server

インストール数：約2815万　評価：☆4.5
ローカルホストを起動してHTMLファイルをサーバーに上げた時の様子を事前に逐一チェックできます。

コードの修正とプレビューを同時の行うことができます。

Jupyter

インストール数：約5137万　評価：☆2.5
JupyterNotebookをVSCode上で開くことができます。

ブラウザを立ち上げずともNotebookを使うことができてストレスフリーです。

Dev Container

インストール数：約1559万　評価：☆4.5
VSCodeのコマンドパレットを拡張してDockerのためのコマンドが追加されます。
Dockerを用いたリモート開発をするなら必須の拡張機能です。

追加されたコマンドを使えばリモートコンテナ作成がお手軽になります。
またdevcontainer環境でVSCodeの他の拡張機能を使うことができます。

Rainbow CSV

インストール数：約230万　評価：☆5.0
CSVファイルのそれぞれの要素がどのカラムに属するかが色付けされてわかりやすくなります。

ゴチャゴチャして分かりにくいCSVファイルも

色分けされてわかりやすくなりましたね！

最後に

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

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