VSCodeの使い方｜初心者のフォルダー・編集・検索と確認の基本

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

VSCodeの使い方で最初に覚えたいのは、フォルダーを開く、ファイルを編集する、保存する、結果を別の場所で確認するという流れです。拡張機能や便利なショートカットを先に増やすより、「どこにある何のファイルを変えたか」を見失わないことが大切です。小さなHTMLファイルを一つ作り、文字を変更してブラウザーへ反映するところから始めましょう。

この記事では、架空の「読書メモ」ページを題材に、画面の役割、フォルダーとファイル、検索と置換、整形、ターミナル、設定の切り分けを練習します。プログラミング言語の詳しい学習や、インターネットへの公開までは行いません。自分のPCにある練習用ファイルで、基本の編集作業を一巡することが目標です。

仕様は2026年10月3日に確認したVisual Studio Code公式資料を基にしています。デスクトップ版を中心に説明し、OS、バージョン、キーボード配列、設定によって表示や操作が変わる箇所には注意点を添えます。図版は説明用に生成したイメージで、公式の操作画面そのものではありません。仕事のコードや社内データを個人の練習へ持ち出さないでください。

VSCodeでできること｜準備と画面の役割を理解する

エディターと実行環境の役割を分ける

Visual Studio Codeは、コードや文章を編集するためのエディターです。ファイルを開き、入力を補助し、検索や整形を行い、開発に必要な道具を呼び出すことができます。ただし、VSCodeを入れればすべての言語をそのまま実行できるという意味ではありません。PythonやJavaなどを動かすには、目的に合う実行環境や設定が別途必要になる場合があります。

今回の練習は単純なHTMLなので、作ったファイルをブラウザーで開いて表示を確認できます。Node.jsやPythonを使うプログラムとは条件が違います。教材を読むときは、エディターの導入手順と、言語を動かすための導入手順を分けて見てください。「同じVSCodeなのに実行ボタンがない」という疑問は、使用言語や拡張機能、開いているフォルダーの違いで起きることがあります。

Visual Studioという別の開発ツールもあるため、名前を取り違えないようにします。導入するときは公式サイトからVisual Studio Codeの対象OS向け配布物を選び、会社のPCではアプリ導入の規則を守ります。検索で見つけた設定一式をそのまま取り込むより、まず標準状態で一つのファイルを編集できるか確かめる方が、後から原因を調べやすくなります。

画面を「見る場所」と「書く場所」に分ける

画面の中心はファイルの内容を編集する場所です。Explorerには開いたフォルダーと中のファイルが表示され、検索のビューでは複数ファイルを探せます。下部のパネルにはターミナル、出力、問題などが表示されますが、同じ下部の領域でも役割は異なります。エラー一覧を見ているのにコマンドを入力しようとしても、期待した操作にはなりません。

左右のサイドバーやパネルの位置は変更できるため、解説画像と完全に同じ配置でなくても使えます。アイコンへマウスを合わせて名前を確認し、必要なビューを開いてください。レイアウトを動かして見失った場合も、ファイルが消えたとは限りません。まず表示メニューと、開いているウィンドウのフォルダー名を見て、見え方の問題かデータの問題かを分けます。

公式エディターチュートリアルでは、フォルダー、画面の領域、コマンドパレットなどの入口を確認できます。公式教材の中にはAI機能を利用する課題もありますが、本記事の小さな手入力の練習にAI契約や外部連携は必須ではありません。まず自分で変更を確認できる状態を作り、支援機能は必要に応じて使いましょう。

※表は横にスクロールできます。

コマンドパレットを、機能を探す入口にする

コマンドパレットは、機能名を入力して操作を探すための入口です。WindowsやLinuxでは通常Ctrl＋Shift＋P、macOSではCommand＋Shift＋Pで開けます。キーが効かない場合は表示メニューから開いてください。キーボード配列や変更済みの設定によって違うことがあるため、使えなかったときに同じキーを何度も押し続ける必要はありません。

ファイルを名前で探すQuick Openと、コマンドを探すコマンドパレットは似た見た目ですが、目的が違います。WindowsやLinuxのCtrl＋P、macOSのCommand＋Pはファイルを探す出発点です。「保存」「整形」などの操作を探したいのか、index.htmlというファイルを開きたいのかを区別すると、検索欄を取り違えにくくなります。

最初から多くのショートカットを暗記するより、よく使う保存、検索、Quick Openだけを少しずつ覚えます。メニューで意味を確認し、その操作を繰り返すようになったらキーを使う順番でも十分です。効率を上げる前に、正しい対象へ操作できることを優先してください。間違ったファイルへ速く入力しても、やり直しの時間が増えてしまいます。

言語表示と見やすさを必要な範囲で調整する

日本語表示にしたい場合は、表示言語の設定と公式の言語パックを確認します。拡張機能を探すときは名前だけでなく発行元も見てください。使い方の記事に載る英語名と日本語名が違う場合でも、機能の役割を対応させれば読み進められます。困ったときに英語名でも検索できるよう、主要な機能名を控えておくと役立ちます。

文字の大きさ、テーマ、折り返しは、自分が読める範囲へ調整して構いません。ただし、文字が折り返されて見えることと、実際に改行が入っていることは違います。長いHTMLの行を読みやすくする表示設定を使っても、ファイルの内容が勝手に複数行へ分かれるとは限りません。この違いは、あとで検索や差分を確認するときにも重要になります。

フォルダーとファイルを開く｜保存場所を見失わない進め方

練習用フォルダーを一つ作って開く

PCの分かりやすい場所へ「reading-page-practice」というフォルダーを作り、VSCodeのFileからOpen Folderで開きます。個別のファイルだけを開くこともできますが、関連するHTMLやCSSをまとめて扱うなら、親となるフォルダーを開く方が位置関係をつかみやすくなります。Explorerの一番上に、今の作業フォルダー名が表示されているか確認してください。

ダウンロードしたファイルをそのまま開くと、後からどのフォルダーにあるか分からなくなることがあります。最初に練習用の場所へコピーし、そこで作業を始めると整理しやすくなります。同じ名前のファイルをデスクトップ、ダウンロード、別フォルダーに複数置くと、編集したものとブラウザーで見ているものが違う原因になります。課題ごとに場所を一つ決めましょう。

フォルダーを開く際に信頼に関する表示が出たら、その内容を読みます。自分で空のフォルダーを作った場合と、出所が分からないコードを入手した場合は条件が違います。公式Workspace Trust資料では、不明な内容はRestricted Modeで確認する考え方が説明されています。警告を消すためだけに、すべてのフォルダーを信頼する設定へ変えないでください。

index.htmlを作り、拡張子まで確認する

Explorerで新しいファイルを作り、index.htmlという名前を付けます。Untitledのまま入力を始めた場合は、保存時に練習用フォルダーを選び、名前と拡張子を指定します。Windowsのエクスプローラーなどで拡張子が非表示になっていると、index.html.txtのような名前を見落とす場合があります。VSCode側のファイル名やプロパティでも確認しましょう。

ファイル名の大文字と小文字、空白、似た記号にも注意します。手元の環境で開けても、別の環境へ移したときに大文字小文字の違いが問題になることがあります。最初は英小文字とハイフンなど、見分けやすい命名にそろえると管理しやすくなります。名前を変えた後は、そのファイルを参照する箇所も確認する必要があると覚えておいてください。

エディター下部の言語モードがHTMLになっているかを見ます。拡張子が正しければ通常は対応する表示になりますが、違う場合は言語モードの選択を確認します。言語モードは色分けや補助の動作に関わり、ファイルを保存することとは別です。モードを変えただけで、任意の文章が正しいHTMLへ変換されるわけではありません。

保存済みか、画面上だけの変更かを見分ける

入力した後はFileのSave、または保存のショートカットで保存します。未保存の変更があるときは、タブなどの表示に印が出ます。印の見え方はテーマや設定で変わる場合があるので、一度短い変更を入れて保存前後を比較してください。自動保存を設定していない標準状態では、入力しただけではディスクへ反映されないことがあります。

Auto Saveを使う場合も、何をきっかけに保存する設定かを理解します。ウィンドウのフォーカスが外れたとき、一定時間後など、条件によって反映のタイミングが違います。自動保存が便利でも、変更内容を確認せずに大量の置換をしてよい理由にはなりません。練習の最初は手動保存とブラウザーの再読み込みを組み合わせ、反映の流れを目で追うと理解しやすいです。

VSCodeを閉じて再び開いたときに入力内容が残る場合がありますが、それを外部のアプリも読める保存済みファイルと同じだと思わないでください。未保存の編集が復元されていることもあります。人へ渡す前や別のプログラムで読む前には、保存先のファイルとして内容を確認します。作業画面が残ることと、成果物を保存したことは別の確認です。

※表は横にスクロールできます。

フォルダーの入れ子を必要以上に増やさない

今回の最初の段階は、練習フォルダーの直下にindex.htmlを一つ置けば十分です。CSSを分ける練習へ進むなら同じ場所にstyle.cssを追加し、画像を使うならimagesなどのサブフォルダーへ整理できます。最初から複雑な構成を作ると、相対パスを理解する前に参照先を見失いやすくなります。ファイルが増える理由ができてから分けましょう。

Explorerでフォルダーを閉じたり、別のフォルダーを開いたりしても、元のファイルを削除したことにはなりません。一方、ファイルを削除する操作は実際のデータに影響します。見た目を片付けたいだけなら、タブを閉じる、フォルダーを折りたたむといった操作を使います。閉じる、作業場所を変える、削除するという三つを区別してください。

編集・検索・整形を使う｜小さなHTMLファイルで練習する

最小のページを入力し、ブラウザーで開く

index.htmlへ、次の短いHTMLを入力します。これは編集練習用の架空のページで、フォーム送信や外部通信をする機能はありません。タグの形を確かめながら入力し、保存してください。記事から貼り付ける場合も、画面上の装飾や説明文まで混ざっていないかを確認します。コードの中の半角記号を、日本語の似た記号へ置き換えないようにしましょう。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>読書メモ</title>
</head>
<body>
<h1>今日の読書メモ</h1>
<p>一段落を読み、気になった言葉を残します。</p>
</body>
</html>

保存したindex.htmlを、PCのファイル管理画面からブラウザーで開きます。この単純なページなら、ファイルを直接開いて表示を確かめられます。ブラウザーには見出しと一文が表示され、タブの題名にはtitleの内容が使われます。エディターでタグが見えることと、ブラウザーで整形した結果が見えることの違いを確認してください。

見出しを「週末の読書メモ」へ変え、保存し、ブラウザーを再読み込みします。この三つの操作を一度ゆっくり行って、どの段階で表示が変わるかを見ます。ブラウザーの再読み込みだけで未保存の編集が反映されるわけではありません。反対に、ファイルを保存しても、いま開いているブラウザーが自動更新されるとは限りません。

補完は候補を確かめて使う

入力途中に候補が表示される機能は、タグ名や属性などを補う助けになります。便利ですが、選んだ候補が自分の書きたい内容かを確認してください。候補を確定した結果、閉じタグや引用符が増えたときは、同じものを手で重ねて入力しないようにします。入力支援が何を追加したかを見れば、記号の重複を減らせます。

エラーらしい下線が出たときは、内容を読んでから直します。下線を消すことだけを目標にすると、正しい記述を削ってしまう場合があります。Problemsパネルの指摘、対象のファイル名と行を見て、何を問題としているのか確認しましょう。すべての論理的な間違いや表示の問題を、エディターが自動で見つけてくれるわけではありません。

今回のページで、見出しの閉じタグを誤って消した場合を考えます。ブラウザーはある程度解釈を補うため、何かが表示されることがあります。しかし、表示されたから文法も意図も正しいとは限りません。タグの対応を確認し、元の小さな例へ戻してから、一箇所ずつ変更する方法が切り分けに役立ちます。大きなコードへ進む前に、この往復を経験しておきましょう。

ファイル内検索と、フォルダー全体の検索を使い分ける

一つのファイルで言葉を探すときは、エディター内の検索を使います。WindowsやLinuxでは通常Ctrl＋F、macOSではCommand＋Fで開けます。今回は「読書メモ」を探し、titleと見出しの両方へ一致することを確認します。何件見つかったか、どの箇所を見ているかを把握すると、一箇所だけ変更してもう一方を残すミスを減らせます。

複数のファイルをまとめて探したいときは、検索ビューを使います。検索範囲は開いているフォルダーや除外設定の影響を受けます。探している語が見つからない場合は、文字の打ち間違いだけでなく、違うフォルダーを開いていないかも見てください。対象ファイルを含める条件、除外する条件、大文字小文字の区別などが結果を変えることがあります。

置換は、まず一件だけ試します。「読書」をすべて「映画」に変えると、タイトル以外の説明まで変わるかもしれません。一括置換する前に一致した箇所を読み、今回の目的に合うかを確認してください。正規表現のボタンがオンだと、記号が特別な意味を持つことがあります。普通の文字列を探す練習では、意図せず有効になっていないかを見ます。

整形は読みやすくする操作で、動作の保証ではない

Format Documentは、コードの字下げや配置を整えるために使います。コマンドパレットで機能名を探す方法なら、OSごとのキーの違いを覚える必要がありません。HTMLには標準の整形機能がありますが、複数の拡張機能を入れている場合は、使うフォーマッターを選ぶ場面が出ることもあります。どれが実行されたか分かるようにしてください。

公式Basic editing資料では、検索、編集、整形などの基本を確認できます。整形で見た目がそろっても、リンク先が正しい、表示が意図どおり、プログラムに不具合がないという保証にはなりません。整形後は保存して表示を確認し、変更した意味まで読み直します。書式を整える作業と、内容を検証する作業を分けて考えましょう。

※表は横にスクロールできます。

CSSを一行足すときも、保存と参照先を確認する

次の練習として、style.cssに「body { color: #243b53; }」と書き、HTMLのhead内へ「<link rel=”stylesheet” href=”style.css”>」を加える方法があります。二つのファイルを同じフォルダーへ置いた場合の例です。両方を保存し、ブラウザーを再読み込みして文字色を確認します。HTMLだけを保存し、CSSが未保存のままだと、想定した変更が見えないことがあります。

CSSが反映されないときは、色の指定を複雑に変える前に、ファイル名、拡張子、置き場所、hrefを照合します。ファイルを別のフォルダーへ移したなら、参照先も見直す必要があります。ここで学びたいのはCSSの表現を増やすことではなく、関連ファイルのつながりを把握することです。小さな構成で関係が分かれば、ページが増えたときにも確認する順番を作れます。

ターミナルと拡張機能｜実行環境とエディターを分ける

ターミナルはコマンドを送る場所

統合ターミナルは、VSCodeの中でシェルへコマンドを入力する場所です。TerminalからNew Terminalを開くと、PowerShell、コマンドプロンプト、Bashなど、環境に応じたシェルが使われます。文字を入力するという点ではエディターと似ていますが、ここで入力したコマンドは実際のファイル操作やプログラムの実行につながります。説明文や意味の分からないコマンドを試しに貼り付けないようにしてください。

いまの作業ディレクトリは、コマンドがどこを対象にするかを決める重要な情報です。Explorerであるフォルダーを見ていても、すでに開いているターミナルが別の場所へ移動していることがあります。ファイルが見つからないエラーが出たら、再インストールより先に現在の場所を確かめます。複数のターミナルを開くと、それぞれの状態も別になります。

今回の単純なHTMLは、ターミナルを使わなくても表示確認できます。教材でローカルサーバーを起動する段階になったら、どのコマンドを、どのフォルダーで、何のために実行するかを確認します。公式Terminal Basicsを参照し、コマンドの実行画面と編集画面を区別して使いましょう。

コマンドが見つからないときは、必要な環境を確認する

「command not found」や「認識されません」といった表示は、必要なプログラムが入っていない、パスが通っていない、別の環境を開いているなどの原因で起きます。VSCodeの拡張機能を入れただけで、その言語の実行本体まで必ず導入されるわけではありません。教材が要求するランタイムの名前と版を確認し、公式の導入手順に従ってください。

ローカルPC、WSL、コンテナー、リモート接続先では、見えているファイルやインストール済みの道具が違うことがあります。上部や下部の接続表示を確認し、自分がどの環境で作業しているかを把握します。今回の入門はローカルの練習フォルダーだけで進めるので、必要がないうちは複数の実行環境を同時に使わない方が、原因を追いやすくなります。

管理者権限を使えば解決すると考え、権限を上げ続ける方法は避けます。保存先が不適切、必要な依存関係がない、指定した場所が違うといった問題は、権限とは別です。ターミナルのエラーを読むときは、最初に失敗した箇所と対象を見て、一つずつ条件を確認してください。削除や強制上書きのコマンドを、復旧の定番として使わないことも重要です。

拡張機能は、足りない機能が分かってから入れる

拡張機能では、言語の補助、整形、プレビューなどを追加できます。名前、発行元、公式の説明、更新状況を確認し、必要なものだけを選びます。似た名前の拡張機能が複数ある場合、検索結果の上に出たという理由だけで決めないでください。公式Extension Marketplace資料で、検索と管理の基本を確認できます。

今回のHTML練習なら、まず標準の編集とブラウザーの手動再読み込みで十分です。自動プレビューを使いたくなった場合は、どの拡張がローカルサーバーを起動するのか、何を共有するのかを確認します。手元でのプレビューと、外部へアクセスできる公開やポート転送は別です。便利な表示を出すつもりで、意図しない共有範囲を広げないようにしましょう。

拡張機能はプログラムとして動くため、不明な発行元や出所のものを無条件に信用しないことが大切です。Workspace Trustがあるから、どんな拡張も安全になるわけではありません。組織の許可が必要な場合はそれに従います。AI支援へコードを送る機能などでは、送る内容と利用条件も別途確認してください。機密情報や認証情報を含むファイルを安易に渡さないようにします。

※表は横にスクロールできます。

設定はUserとWorkspaceのどちらかを見る

User設定は自分の環境全体に、Workspace設定は今の作業場所に適用する考え方です。同じ項目でもWorkspace側の設定などが優先される場合があるので、別のフォルダーを開くと動きが変わることがあります。フォーマッターや自動保存が予想と違うときは、アプリを壊したと考える前に、どの範囲の設定を見ているかを確かめましょう。

公式のUser・Workspace設定ガイドでは、設定画面やsettings.jsonの扱いが説明されています。初心者は設定画面から名前で検索し、変更した項目を控えると戻しやすくなります。設定を増やして解決しようとする前に、元の値へ戻す方法も確認してください。見つけた設定例を丸ごと貼り付けるより、一つずつ目的を理解して変更する方が安全です。

共同作業のフォルダー内にある.vscodeの設定は、他の人にも関わる場合があります。自分の好みの文字サイズを、共有設定へ混ぜない方がよい場面もあります。反対に、チームで統一したい整形の規則は、合意した形で共有する価値があります。個人の見やすさと、成果物の共通ルールを分けると、設定をめぐる行き違いを減らせます。

動かないときの調べ方｜保存・場所・設定と作業の引き継ぎ

ブラウザーへ反映されないときは順番を固定する

文字が変わらない場合、最初にVSCodeのファイルを保存したか確認します。次に、ブラウザーのアドレスが編集したファイルの場所と一致するかを見ます。同名のindex.htmlを別フォルダーで開いていないかを確かめ、その後に再読み込みします。この順で見れば、いきなり拡張機能やブラウザー全体の設定を変える必要を減らせます。

CSSだけが反映されないなら、HTML側の参照先とCSS側の保存を確認します。正しい場所のファイルを開けるか、ファイル名の大文字小文字が合うか、余計な.txtが付いていないかを見ます。ブラウザーの開発者ツールに慣れてきたら読み込みエラーも確認できますが、初回は小さな同一フォルダーの例へ戻して関係を整理する方法でも十分です。

自動プレビューを使っている場合は、サーバーが動いているか、現在のフォルダーを対象にしているか、表示先のURLが合うかを確認します。手動でファイルを開く方式とサーバー経由の方式を混ぜると、古い画面を見続けることがあります。どの方式で確認しているかを一つにそろえ、変更が反映される条件を記録しましょう。

検索や整形が予想と違うときの切り分け

検索が見つからない場合は、開いているフォルダー、対象ファイル、除外条件、大小文字、正規表現の状態を確認します。文章をコピーして検索しても、見えない空白や改行が違う場合があります。短い単語から探して範囲を広げると、どの条件で見つからなくなるかを調べやすくなります。最初から複雑な検索式を作る必要はありません。

整形が動かない場合は、言語モードとフォーマッターの有無、Restricted Modeや拡張の状態を見ます。保存するたびに書式が変わるなら、Format on Saveの設定や複数の整形機能を確認します。原因を調べるときは、練習フォルダーで一つの機能だけを試し、作業中の大きなプロジェクトへまとめて設定変更を加えない方が比較しやすくなります。

拡張を入れた後から問題が出るなら、一時的な無効化で変化を見る方法があります。ただし、何を無効にしたかを控え、必要な機能まで止めたままにしないようにします。削除や再インストールは、設定や作業内容を確認した後の選択肢です。トラブルのたびに初期化すると、原因と解決条件を学びにくくなります。

消えたように見える変更を、上書き前に確認する

ファイルを開き直して変更が見えない場合は、別の場所、別ウィンドウ、未保存、外部の同期などを確認します。まず新しい変更を加えるのを止め、同じ名前のファイルの保存場所と更新日時を調べます。古い内容を正しいものだと思って上書きすると、復旧の選択肢が減ることがあります。履歴やバックアップがあっても、残る範囲は設定によって異なります。

Gitを使っている場合、エディターでの保存とGitのコミットは別です。保存していても履歴へ記録していない変更がありますし、コミット済みでも外部の共有先へ送っていないことがあります。今回の課題ではGitを導入しなくても構いませんが、後で共同作業を始めるときに、この段階の違いを意識すると混乱しにくくなります。

質問や引き継ぎには、再現できる情報をそろえる

誰かに相談するときは、OS、VSCodeの版、対象フォルダーの構成、試した操作、期待した結果、実際の結果をまとめます。「HTMLを変更して保存し、ブラウザーで同じファイルを再読み込みしたが、見出しが変わらない」のように順番を示すと、確認箇所を絞れます。エラーの文字は必要な範囲で正確に残し、アカウント名や秘密情報を含むパスは伏せます。

完成した練習ページを人へ渡すなら、index.htmlだけで足りるか、CSSや画像が必要かを確認します。自分のPCの絶対パスを参照していると、相手の環境では開けない場合があります。必要なファイルを含めたコピーを別の場所で開き、内容が表示されるかを試すと、引き継ぎの不足に気づけます。外部へ公開する作業は別の工程なので、ローカルで見えたことを公開済みとは表現しないでください。

今回の到達点は、ファイルの場所を説明でき、編集・保存・表示確認を一人で繰り返せる状態です。次はCSSを分ける、ページを二つにする、リンクを追加するなど、変更を一つずつ増やしましょう。機能を大量に入れるより、変化を予測して確かめる練習の方が、道具を安定して使う力につながります。

コードの理解やレビューを継続して学びたい場合は、副業向けプログラミングスクールの料金と学習支援の比較で、必要な質問・添削の範囲を整理できます。VSCodeを使えることだけで、仕事や収入が保証されるわけではありません。まず小さなページを自分で直せるようになり、どの部分で助けが必要なのかを説明できる状態にしてから、学び方を選びましょう。