新しいファイルを作成する/ファイルを保存する

Visual Studio Code を使って新しいファイルを作成する方法、および作成したファイルを保存する方法について解説します。初めてファイルを保存したり、別の名前で保存したい場合には「名前を付けて保存」、同じファイルに上書き保存する場合は「保存」を使用します。

(Last modified: )

新しいファイルを作成する

Visual Studio Code で新しいファイルを作成する手順です。「ファイル」メニューの中の「新規ファイル」をクリックしてください。

新しいファイルを作成する(1)

新しいエディターが開き、編集可能な状態となります。

新しいファイルを作成する(2)

まだファイルに名前は付けられていないので、タブには「Untitled-xx」と表示されています。

ファイルを名前を付けて保存する

新規にファイルを作成したあとファイルを編集してまだ一度も保存していない場合、また既存ファイルの場合でも内容を編集して保存していない場合、ファイルのタブに ● が表示されます。

ファイルを名前を付けて保存する(1)

新規作成したファイルを保存するには「ファイル」メニューの中の「名前を付けて保存」をクリックしてください。(新規ファイルの場合は「保存」をクリックした場合も同じです)。

ファイルを名前を付けて保存する(2)

次のようなダイアログが表示されるので、ファイルを保存したいディレクトリへ移動しファイル名を入力してください。そのあとで「保存」をクリックしてください。

ファイルを名前を付けて保存する(3)

ファイルが保存されました。ファイルが保存されるとタブには保存したファイルの名前が表示され、また保存されていない内容を含むことを表す ● が表示されなくなります。

ファイルを名前を付けて保存する(4)

またファイルを保存すると、ファイルが何の言語(英語や日本語の言語ではなく、 HTML や JavaScript など記述している内容に関する言語です)について書いているのか判別できるようになるので、エディター上でシンタックスハイライトされて表示されるようになります。今回は HTML に関するファイルなので、ファイルに含まれるタグ名が色分けされて表示されています。

ファイルを名前を付けて保存する(5)

※ 新しいファイルを保存する前に言語モードを手動で設定することもできます。「ファイルの保存前に言語モードを設定する」を参照されてください。

※ ファイルを自動的に保存するように設定することもできます。詳しい手順については「エディターの自動保存の設定」を参照されてください。

開いているフォルダに新しいファイルを作成する

Visual Studio Code でフォルダを開いている場合、フォルダやサブフォルダに対して新しいファイルを作成することができます。例として次のようにフォルダを開いている状態で試してみます。

開いているフォルダに新しいファイルを作成する(1)

フォルダ名の右側に表示されているアイコンの中の「新しいファイル」アイコンをクリックしてください。

開いているフォルダに新しいファイルを作成する(2)

現在のフォルダの中にファイルが作成されます。作成する新しいファイル名を入力したあと Enter キーを押してください。

開いているフォルダに新しいファイルを作成する(3)

開いているフォルダに新しいファイルを作成する(4)

作成されたファイルがエディターで表示され、編集できる状態となります。

開いているフォルダに新しいファイルを作成する(5)

入力したファイル名の拡張子から、ファイルで編集している言語について自動的に判断され、シンタックスハイライトされて表示されます。

開いているフォルダに新しいファイルを作成する(6)

サブフォルダにファイルを作成する

なお現在開いているフォルダのサブフォルダにファイルを作成するには、サブフォルダを選択した状態で「新しいファイル」アイコンをクリックしてください。

開いているフォルダに新しいファイルを作成する(7)

選択していたサブフォルダに新しいファイルを作成することができます。

開いているフォルダに新しいファイルを作成する(8)

開いているフォルダに新しいファイルを作成する(9)

ファイルを上書き保存する

一度保存されたファイルを編集したあと、同じファイルに上書き保存するには「ファイル」メニューの中にある「保存」をクリックしてください。

ファイルを上書き保存する(1)

ファイルが上書き保存されました。

ファイルを上書き保存する(2)

-- --

Visual Studio Code を使って新しいファイルを作成する方法、および作成したファイルを保存する方法について解説しました。

( Written by Tatsuo Ikura )

Profile
profile_img

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。