VSCode（Visual Studio Code）では、エクスプローラーやショートカットキー、メニュー、統合ターミナルなど、さまざまな方法で新しいファイルを作成できます。
もっとも分かりやすいのは、画面左側のエクスプローラーからファイルを作成する方法です。
一方、作業に慣れてきたら、ショートカットキーやターミナルを利用すると、より効率的にファイルを作成できます。
ここでは、VSCodeで新しいファイルを作成する代表的な方法から、保存方法、フォルダー内への作成方法、ファイルが作成できない場合の対処法まで詳しく解説します。
エクスプローラーから新しいファイルを作成する方法
「新しいファイル」ボタンを使用する
VSCodeで新しいファイルを作成する基本的な方法は、エクスプローラーを利用する方法です。
まず、VSCodeで作業するフォルダーを開きます。
画面左側にあるエクスプローラーアイコンをクリックすると、現在開いているフォルダーやファイルが一覧表示されます。
エクスプローラー上部にある「新しいファイル」のアイコンをクリックすると、ファイル名を入力できる状態になります。
HTMLファイルを作成する場合は、たとえば次のように入力します。
index.htmlファイル名を入力してEnterキーを押すと、新しいファイルが作成され、そのままエディターで開きます。
対象フォルダーを右クリックして作成する
特定のフォルダー内にファイルを作成したい場合は、対象フォルダーを右クリックして「New File…」を選択する方法が分かりやすいです。
たとえば、次のようなフォルダー構成があるとします。
project
├─ index.html
├─ css
└─ jscssフォルダー内にstyle.cssを作成する場合は、エクスプローラー上でcssフォルダーを右クリックし、「New File…」を選択します。
その後、
style.cssと入力してEnterキーを押します。
これで、cssフォルダー内にstyle.cssが作成されます。
ショートカットキーで新しいファイルを開く方法
Windows・LinuxではCtrl + Nを使用する
WindowsやLinuxでは、次のショートカットキーを使用できます。
Ctrl + Nこのショートカットを押すと、新しい未保存ファイルがエディターに表示されます。
macOSではCommand + Nを使用する
macOSの場合は、次のショートカットキーを使用します。
Command + Nこちらも、新しい未保存ファイルを開く操作です。
Ctrl + Nではすぐに保存されるわけではない
注意したいのは、Ctrl + NやCommand + Nを押した時点では、通常はディスク上に正式なファイルが作成されていないことです。
まず未保存のファイルが開き、その後保存操作を行います。
操作の流れは次のようになります。
Ctrl + N
↓
未保存ファイルを開く
↓
内容を入力する
↓
Ctrl + S
↓
ファイル名と保存場所を指定するそのため、厳密には「新しいファイルを作成する」というより、「新しい未保存ファイルを開く」操作と考えると分かりやすいでしょう。
新しいファイルを保存する方法
Windows・LinuxではCtrl + Sを使用する
作成した未保存ファイルを保存する場合は、次のショートカットキーを使用します。
Ctrl + S保存先を選択し、ファイル名を入力します。
HTMLファイルであれば、たとえば次のようにします。
index.htmlmacOSではCommand + Sを使用する
macOSの場合は、次のショートカットキーで保存できます。
Command + Sファイル名と保存場所を指定すれば、正式なファイルとして保存されます。
メニューから新しいファイルを作成する方法
Fileメニューから新しいファイルを開く
ショートカットキーを使用せず、メニューから新しいファイルを作成することもできます。
画面上部のメニューから、
File
↓
New Fileのように、新しいファイルを作成する項目を選択します。
VSCodeのバージョンや環境によって表示される項目名が若干異なる場合がありますが、「New File」や「New Text File」に相当する項目から新規ファイルを開けます。
ショートカットキーを覚えていない場合にも使いやすい方法です。
フォルダー階層を指定してファイルを作成する方法
パスを含めてファイル名を入力する
VSCodeのエクスプローラーでは、新しいファイルを作成するときに、フォルダー名を含めたパスを入力することもできます。
たとえば、
css/style.cssと入力すると、cssフォルダー内にstyle.cssを作成できます。
さらに、
src/components/Header.jsのように複数階層を指定することもできます。
必要な中間フォルダーが存在しない場合でも、VSCodeのエクスプローラーでは階層をまとめて作成できます。
そのため、
src
└─ components
└─ Header.jsのような構成を一度の入力で作成できます。
プロジェクトのファイル構成を効率よく作りたい場合に便利な方法です。
コマンドパレットから新しいファイルを作成する方法
コマンドパレットを開く
VSCodeには、さまざまな機能を検索して実行できる「コマンドパレット」があります。
Windows・Linuxでは、
Ctrl + Shift + PmacOSでは、
Command + Shift + Pで開けます。
New Fileを検索する
コマンドパレットを開いたら、
New Fileなどと入力します。
新しいファイルに関するコマンドが表示されるため、目的のものを選択して実行します。
コマンドパレットはファイル作成以外にも、設定変更や拡張機能の操作、フォーマットなど、VSCodeのさまざまな機能を実行できるため、覚えておくと便利です。
統合ターミナルからファイルを作成する方法
VSCodeの統合ターミナルを開く
VSCodeにはターミナルが組み込まれています。
Windows・Linuxでは、標準設定で次のショートカットを利用できます。
Ctrl + `このショートカットは、統合ターミナルの表示を切り替える操作です。
新しいターミナルを作成する場合は、Windows・Linuxでは次のショートカットも利用できます。
Ctrl + Shift + `メニューから開く場合は、「View」から「Terminal」を選択します。
PowerShellでファイルを作成する
WindowsでPowerShellを使用している場合は、次のようなコマンドで新しいファイルを作成できます。
New-Item index.html -ItemType File短縮形として、
ni index.htmlを使用することもできます。
コマンドプロンプトでファイルを作成する
Windowsのコマンドプロンプトを使用している場合は、次のような方法があります。
type nul > index.htmlこれで空のindex.htmlを作成できます。
macOS・Linuxではtouchを使用する
macOSやLinuxでは、touchコマンドを利用できます。
touch index.html複数のファイルをまとめて作成する場合は、次のように記述できます。
touch index.html style.css main.js複数のファイルを一度に作成したい場合に便利です。
echoでファイルを作成するときは上書きに注意する
次のようにechoとリダイレクトを使用してファイルを作成することもできます。
echo "Hello, VS Code" > greetings.txtただし、>を使用すると、同じ名前のファイルがすでに存在する場合に内容が上書きされる可能性があります。
既存ファイルを誤って上書きしないよう注意しましょう。
codeコマンドから新しいファイルを作成する方法
codeコマンドでファイル名を指定する
VSCodeのCLIであるcodeコマンドを利用できる環境では、ターミナルから次のように入力できます。
code index.html指定したファイルが存在しない場合は、新しいファイルとしてVSCodeで開かれます。
さらに、
code src/components/Header.jsのようにパスを指定することもできます。
codeコマンドが利用できない場合もある
codeコマンドを使用するには、VSCodeのコマンドがPATHに登録されている必要があります。
環境によっては、
codeと入力してもコマンドが見つからない場合があります。
その場合は、VSCodeの設定やPATHの設定を確認する必要があります。
特にmacOSでは、コマンドパレットからcodeコマンドをPATHに追加する操作が必要になる場合があります。
HTML・CSS・JavaScriptファイルを作成する例
Webサイト用のファイル構成を作る
簡単なWebサイトを作成する場合は、たとえば次のようなファイル構成を使用できます。
sample-site
├─ index.html
├─ style.css
└─ main.jsVSCodeでsample-siteフォルダーを開き、エクスプローラーから順番に、
index.html
style.css
main.jsを作成します。
HTMLからCSSとJavaScriptを読み込む
index.htmlには、次のように記述できます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルサイト</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello VSCode</h1>
<script src="main.js"></script>
</body>
</html>index.html、style.css、main.jsが同じフォルダーに保存されていれば、CSSとJavaScriptを読み込めます。
ファイルを作成するときは拡張子を確認する
用途に合った拡張子を付ける
VSCodeでファイルを作成するときは、ファイル名だけでなく拡張子も重要です。
代表的な拡張子には、次のようなものがあります。
| 用途 | ファイル名の例 | 拡張子 |
|---|---|---|
| HTML | index.html | .html |
| CSS | style.css | .css |
| JavaScript | main.js | .js |
| TypeScript | main.ts | .ts |
| Python | main.py | .py |
| PHP | index.php | .php |
| JSON | data.json | .json |
| Markdown | README.md | .md |
| C | main.c | .c |
| C++ | main.cpp | .cpp |
たとえば、HTMLファイルを作成するなら、
index.htmlとします。
indexだけでは、VSCodeがHTMLファイルとして自動判定しない場合があります。
適切な拡張子を付けることで、VSCodeが言語を認識しやすくなり、シンタックスハイライトや入力補完、フォーマットなどの機能を利用しやすくなります。
拡張子がなくても言語モードは変更できる
拡張子がないファイルでも、VSCodeの言語モードを手動で変更できます。
そのため、拡張子がないからといって編集できないわけではありません。
ただし、通常は用途に合った拡張子を付けたほうが管理しやすくなります。
新しいファイルが作成できない場合の対処法
保存先のフォルダーを確認する
ファイルを保存できない場合は、まず保存先を確認します。
システムフォルダーや、書き込み権限がないフォルダーでは、ファイルを作成できないことがあります。
別のフォルダーに保存できるか確認すると、原因を切り分けやすくなります。
ファイル名に使用できない文字がないか確認する
Windowsでは、ファイル名に次のような文字を使用できません。
\ / : * ? " < > |これらが含まれていると、正常に保存できないことがあります。
また、
CON
PRN
AUX
NUL
COM1
LPT1など、一部の名前はWindowsで予約されているため、ファイル名として利用できません。
ファイルが作成できない場合は、シンプルな半角英数字のファイル名で試してみるとよいでしょう。
フォルダーを開いていなくてもファイルは作成できる
VSCodeでは、必ずしもプロジェクトフォルダーを開く必要はありません。
たとえば、
Ctrl + Nで未保存ファイルを開き、
Ctrl + Sで任意の場所に保存できます。
ただし、Webサイトやアプリケーションなど、複数のファイルを管理する場合は、最初に作業フォルダーを開いておくほうが管理しやすくなります。
VSCodeで新しいファイルを作成するおすすめの方法
初心者はエクスプローラーから作成する
VSCodeを使い始めたばかりの場合は、エクスプローラーからファイルを作成する方法がおすすめです。
どのフォルダーにファイルが作成されるのかを画面上で確認できるため、保存場所を間違えにくいメリットがあります。
作業に慣れたらショートカットを活用する
VSCodeの操作に慣れてきたら、
Windows / Linux：Ctrl + N
macOS：Command + Nを利用すると、新しい未保存ファイルをすばやく開けます。
保存するときは、
Windows / Linux：Ctrl + S
macOS：Command + Sを利用できます。
ショートカットを覚えると、マウス操作を減らせるため作業効率が向上します。
複数ファイルを作成するならターミナルも便利
プログラミングに慣れている場合は、統合ターミナルからファイルを作成する方法も便利です。
macOS・Linuxであれば、
touch index.html style.css main.jsWindowsのPowerShellなら、
New-Item index.html -ItemType Fileなどを利用できます。
特に複数のファイルやフォルダーをまとめて準備する場合は、ターミナル操作を覚えておくと効率よく作業できます。
まとめ
VSCodeで新しいファイルを作成する方法はいくつかあります。
もっとも分かりやすいのは、エクスプローラーの「新しいファイル」から作成する方法です。
一方、Windows・LinuxではCtrl + N、macOSではCommand + Nを使用すると、新しい未保存ファイルをすばやく開けます。
また、統合ターミナルからtouchやNew-Itemなどのコマンドを使ったり、codeコマンドから新しいファイルを開いたりすることも可能です。
初心者のうちはエクスプローラーを中心に使用し、操作に慣れてきたらショートカットキーやターミナルを活用するとよいでしょう。
ファイル名を付けるときは、index.htmlやmain.jsのように用途に合った拡張子を指定することも重要です。
VSCodeには複数のファイル作成方法があるため、自分の作業スタイルに合った方法を使い分けることで、より効率的に開発を進められます。
以上、VSCodeで新しいファイルを作成する方法についてでした。
最後までお読みいただき、ありがとうございました。
