まず Visual Studio Code でファイルを編集してみよう

Visual Studio Code を使い始めることのハードルは限りなく低いです。
プログラム開発などの高度な利用例を見て、
「自分には理解できないのではないか」と考えるのは誤解です。
そのような高度な使い方をしなくても、
まずはテキストエディターとして使う習慣を身につければよいのです。

リモートで開発するための Visual Studio Code 講座 目次にもどる

テキスト形式のファイルを準備しよう

まず、編集してもよいテキスト形式のファイルを用意します。
テキスト形式であれば、どんなファイルでも構いません。
めぼしいファイルが準備できない場合は、
簡単な HTML ファイルを用意しましたので、ダウンロードしてお使いください。

テキスト形式のファイルを開いてみよう

テキスト形式のファイルを右クリック → [Open with Code] をクリック

テキスト形式のファイルを右クリック → [Open with Code] をクリック
テキスト形式のファイルを右クリック → [Open with Code] をクリック

すると、Visual Studio Code が起動し、ファイルが開かれます。
ステータスバーが紫色になっていることに注意してください。

ステータスバーが紫色
ステータスバーが紫色

ただし、この開き方は Visual Studio Code の機能を有効に利用できません。
Visual Studio Code の機能を有効に利用するためには、
「ファイル」ではなく「フォルダー」を開きます。

フォルダーを開いてみよう

テキスト形式のファイルを含むフォルダーの空いているところで右クリック
→ [Open with Code] をクリック

空いているところで右クリック → [Open with Code] をクリック
空いているところで右クリック → [Open with Code] をクリック

すると、今度はステータスバーが青くなり、
画面左側に [EXPLORER] が表示されます。

ステータスバーが青くなり、 画面左側に [EXPLORER] が表示されます
ステータスバーが青くなり、 画面左側に [EXPLORER] が表示されます

[EXPLORER] には現在開いているフォルダーと
その中のファイルが表示されています。

[EXPLORER] でテキスト形式のファイルをクリックすると、
ファイルの内容が表示されます。

[EXPLORER] でテキスト形式のファイルをクリックすると、 ファイルの内容が表示されます
[EXPLORER] でテキスト形式のファイルをクリックすると、 ファイルの内容が表示されます

ファイルを編集して保存しよう

ファイルの内容の編集したい位置をクリックして、
キーボードで内容を編集します。
すると、[OPEN EDITORS] とタブの「×」の表示が「●」に変わります。

ファイルを編集すると、[OPEN EDITORS] とタブの「×」の表示が「●」に変わります
ファイルを編集すると、[OPEN EDITORS] とタブの「×」の表示が「●」に変わります

この「×」や「●」は、
クリックすると、開いているファイルを閉じることができます。
ただし、「●」の状態でクリックすると警告ダイアログが表示されます。

「●」の状態でクリックすると警告ダイアログが表示されます
「●」の状態でクリックすると警告ダイアログが表示されます
[Save]保存して閉じます
[Don’t Save]保存せずに閉じます
[Cancel]閉じる操作を取り消します

つまり、「●」になっている状態は
まだ編集内容がファイルに保存されていないことを示しています。

ここでは、一旦 [Cancel] をクリックして、閉じる操作を取り消します。

ファイルを閉じずに保存する場合は
メニューバーの [File] → [Save] をクリック
または、 Ctrl + S

ファイルを閉じずに保存する場合は メニューバーの [File] → [Save] をクリック または、 Ctrl + S
ファイルを閉じずに保存する場合はメニューバーの [File] → [Save] をクリックまたは、 Ctrl + S

ほとんどのアプリケーションで
Ctrl + S は編集中のファイルやプロジェクトの保存に割り当てられており、
ショートカットを使えないと生産性に影響が出るので、
ファイルを保存するときはショートカットで行う習慣を付けましょう。

まとめ

さあ、これでちょっとしたテキスト形式のファイルの編集であれば
Visual Studio Code で作業できるようになりました。
今日から、テキスト形式のファイルを編集するときは
Visual Studio Code を使うようにして、習慣にしましょう。

  • Visual Studio Code を開くときは、ファイルではなくフォルダーを開きます
  • [EXPLORER] でファイルをクリックすると内容を表示できます
  • Ctrl + S で保存できます

リモートで開発するための Visual Studio Code 講座 目次にもどる

タイトルとURLをコピーしました