新社会人でエンジニアになる人たち向けに送る記事を書きました。
Visual Studio Code（VSCode）は、軽量で高機能な人気エディタです。
ただしインストール直後は英語表示になっています。
「英語でも使えるけど、日本語のほうが安心…」
「ついでにおすすめ拡張もまとめて入れたい」
そんな方向けに、
- VSCodeの日本語化手順
- 開発効率が上がるおすすめ拡張機能
をまとめました。
■ VSCodeを日本語化する方法（1分で完了）
① VSCodeを起動
まずVSCodeを起動します。
② 拡張機能を開く
左側の「四角が4つ並んだアイコン（拡張機能）」をクリック。
ショートカット：
Shift + Command + X（Mac）
Shift + Ctrl + X（Windows）③ 「Japanese Language Pack」を検索
検索欄に入力：
Japanese Language Pack表示された中から、
Japanese Language Pack for Visual Studio Code（Microsoft製）
を選びます。
※必ず「Microsoft」と書かれている公式拡張を選びましょう。
④ インストール → 再起動
「Install（インストール）」をクリック。
インストール後に表示される
Change Language and Restartを押せば日本語化完了です。
■ 自動で切り替わらない場合
- Shift + Command + P を押す
- 入力：
Configure Display Language- ja を選択
- 再起動
■ ターミナルからVSCodeを開けるようにする（おすすめ）
ターミナルで code . と打つとVSCodeを開けるようになります。
設定方法
- Shift + Command + P
- 検索：
Shell Command: Install 'code' command in PATH実行すればOK。
確認：
code --version■ おすすめ拡張機能まとめ（まず入れておきたい）
ここからが本題です。
日本語化したら、最低限これだけは入れておきましょう。
① Prettier — Code formatter
コードを自動整形してくれる拡張。
- 保存時に自動フォーマット可能
- JS / TS / HTML / CSS / JSON 対応
コードが一瞬で綺麗になります。
② ESLint
JavaScript / TypeScriptの品質チェック。
- 文法エラー検知
- コード規約チェック
- バグ予防
チーム開発ではほぼ必須。
③ GitLens
Gitの履歴を可視化。
- 誰がいつ変更したか表示
- 差分の確認が楽
- コード理解が速くなる
Gitを使うなら強くおすすめ。
④ Rainbow Brackets（括弧の色分け）
ネストした括弧を色分け表示。
読みやすさが劇的に上がります。
⑤ Path Intellisense
import文やファイルパスを自動補完。
地味ですが非常に便利。
⑥ Live Server（フロント開発者向け）
HTML/CSS/JSを自動リロード表示。
右クリック → 「Open with Live Server」で起動。
⑦ Docker（Dockerを使う人向け）
- Dockerfile補完
- docker-compose補完
- 構文チェック
コンテナ開発なら入れておきたい拡張。
■ 言語別おすすめ拡張
Web系（JavaScript/TypeScript）
- TypeScript Hero
- Debugger for Chrome
Python
- Python（Microsoft公式）
- Pylance
Go
- Go（公式）
C/C++
- C/C++（Microsoft公式）
■ VSCodeを最強環境にするコツ
- 日本語化する
- PrettierとESLintを入れる
- GitLensで履歴を見える化
- 不要な拡張は入れすぎない
拡張は入れすぎると重くなります。
まずは必要最低限から始めるのがおすすめです。
■ まとめ
VSCodeは拡張機能次第で「ただのエディタ」から「最強IDE」に変わります。
まずは、
- 日本語化
- Prettier
- ESLint
- GitLens
このあたりを入れておけば間違いありません。
ぜひ快適な開発環境を整えてみてください。
ここまで読んでいただき、ありがとうございます。もしこの記事の技術や考え方に少しでも興味を持っていただけたら、ネクストのエンジニアと気軽に話してみませんか。
- 選考ではありません
- 履歴書不要
- 技術の話が中心
- 所要時間30分程度
- オンラインOK
