この記事は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ファイルも
色分けされてわかりやすくなりましたね！
最後に
弊社では、経験の有無を問わず、社員やインターン生の採用を行っています。
興味のある方はこちらをご覧ください。