Ceeds Academy教材アプリ教材・症状語・タグで検索
索引グラフ試す
開発ツール▸VS Code

VS Code: 導入と基本UI(install / 開く / 拡張機能)

setup所要 20分最新草稿
→次: VS Code: 必須ワークフロー(コマンドパレット・検索・統合ターミナル)
意味グラフ(この教材と内容的に近い教材・1ネスト)
例え(Analogies)
VS Code導入=作業台を整える

職人が良い作業台と道具を揃えるように、エディタを入れて拡張を足すのは「開発の作業台」を自分用に整えること。最初に整えるほど後が速い。

概要

📍 dev-tools ▸ エディタ ▸ VS Code ▸ 導入と基本UI | 種別: setup | facts_as_of 2026-06(VS Code 1.124)

公式ドキュメント — setup

🎞 スライド

VS Code = 軽量で拡張できるエディタ

入れる → フォルダを開く → 拡張を足す

ゴール状態(テキスト図)

[VS Code] ──フォルダを開く──▶ [編集できる]
──Ctrl/Cmd+Shift+P──▶ [コマンドパレットが開く]

拡張機能で育てる

言語サポート・整形・Git など
必要なものだけ足す(入れすぎない)

—
出典(sources)

code.visualstudio.com/docs (Setup) ; VS Code 1.124 / 2026-06確認

確認問題(Review-Questions)
code コマンドが使えない時の対処は?記述
基礎公式
解答・解説▾ 開く

コマンドパレットで「Shell Command: Install 'code' command in PATH」を実行する。

ターミナルからカレントフォルダをVS Codeで開くコマンドは?コード
基礎公式
解答・解説▾ 開く

code .

目次
例え概要公式ドキュメント出典確認問題
鮮度
最新
更新: 2026-06-15
次回棚卸し: 2026-09-15
周期: 3か月
版: VS Code 1.124

概要

VS Code を入れて、フォルダを開き、必要な拡張を入れるまで。ゴール状態=コマンドパレットが開き、フォルダを開いて編集できること。

公式ドキュメント準拠(VS Code 1.124)

STEP 1. インストール

  • code.visualstudio.com からDL。Mac: brew install --cask visual-studio-code。Windows: winget install Microsoft.VisualStudioCode。

出典: VS Code Setup / User Interface

🧭 誤解訂正集

よくある誤解 正しい理解
VS Code は重い IDE 軽量エディタで、拡張で機能を足す
拡張は多いほど良い 必要なものだけ(入れすぎは重さ/競合の元)
ファイル単位で開くもの 通常は**フォルダ(プロジェクト)**で開く

📖 用語

  • VS Code … 軽量で拡張可能なコードエディタ。
  • コマンドパレット … 全機能の入口(Ctrl/Cmd+Shift+P)。
  • 拡張機能 … 言語サポート/整形/Git などを足す追加部品。
  • ワークスペース … 開いているフォルダ(プロジェクト)の単位。

✅ 確認の目安(can-do)

VS Code を導入してフォルダを開き、コマンドパレットを出せる。**「この作業に必要な拡張はどれか・なぜ入れすぎないか」**を判断できる。