「VS Codeで新しいファイルを作りたいけど、どうやって作るのが一番速い？」
「フォルダごと管理したいときはどうすればいい？」
「プロジェクトに新しいファイルを追加する効率的な方法は？」
プログラミングをしていると、新しいファイルを作成する機会は非常に多いです。しかし、毎回同じ操作で時間をかけていては、開発効率が下がってしまいます。
VS Codeでは、マウス操作でもショートカットでも簡単に新しいファイルが作れます。さらに、状況に応じて最適な作成方法を選ぶことで、より効率的に開発を進められます。
この記事では、VS Codeで新しいファイルを作る基本方法から、知っておくと便利な小技まで、わかりやすく詳しく解説します。
VS Codeでファイルを作る基本的な方法
ショートカットキーで新しいファイルを開く
空のファイルをすぐ作る
Ctrl + N（Windows・Linux）
Cmd + N（Mac）
これで一時的な新規ファイルが開きます。ファイル名は「Untitled-1」のような形になり、内容を入力後にCtrl + S（MacはCmd + S）を押せば好きな場所に保存できます。
こんなときに便利：
- 急いでメモを取りたいとき
- アイデアをすぐに書き留めたいとき
- 一時的なテストコードを書くとき
コマンドパレットから作成
Ctrl + Shift + P（Windows・Linux）
Cmd + Shift + P（Mac）
を押して、File: New Fileと入力して選択すると、同様に新しいファイルが開きます。
サイドバーから新しいファイルを作成
エクスプローラーで作る
- 左のサイドバー（エクスプローラー）を開く
- ワークスペース名の右にある「新しいファイル」アイコン（?）をクリック
- ファイル名を入力してEnterを押す
この方法なら、現在開いているプロジェクトのルートディレクトリに直接ファイルが作成されます。
特定のフォルダ内に作る場合
- エクスプローラーで目的のフォルダを右クリック
- 「新しいファイル」を選択
- ファイル名を入力してEnterを押す
フォルダ内でのファイル作成のコツ：
- フォルダを展開してから作業すると、ファイルの場所がわかりやすい
- 深い階層のフォルダでも、右クリック一発で作成可能
ターミナルからファイルを作成
VS Codeのターミナル機能を使って、コマンドでファイルを作成することもできます。
Windows
type nul > newfile.txt
echo. > newfile.txt
Mac・Linux
touch newfile.txt
ターミナルでの作成が便利な場面：
- 複数のファイルを一度に作成したいとき
- ファイル名に規則性があるとき
- スクリプトで自動化したいとき
ファイル作成の効率的な使い分け
状況別の最適な方法
| やりたいこと | 最適な方法 | 理由 |
|---|---|---|
| とりあえずメモ書き | Ctrl + N | 最速で開ける |
| プロジェクトにファイル追加 | サイドバーの新しいファイルアイコン | プロジェクト構造が見える |
| 特定フォルダにファイル作成 | フォルダ右クリック → 新しいファイル | 場所を間違えない |
| 複数ファイルの一括作成 | ターミナルコマンド | 効率的 |
| テンプレートから作成 | 拡張機能使用 | 雛形が自動で入る |
ファイル名の付け方のコツ
推奨されるファイル名の規則
JavaScript/TypeScript
camelCase.js（キャメルケース）PascalCase.tsx（パスカルケース、コンポーネント用）
Python
snake_case.py（スネークケース）
CSS
kebab-case.css（ケバブケース）
HTML
index.html、about.html（小文字推奨）
避けるべきファイル名
- スペースを含む名前：
my file.js→my-file.js - 日本語名：
テスト.js→test.js - 特殊文字：
file#1.js→file1.js
ファイル拡張子の自動認識と言語モード
拡張子による自動判定
VS Codeは拡張子を見て、自動で言語モードを設定します：
.js→ JavaScript.py→ Python.html→ HTML.css→ CSS.md→ Markdown
言語モードの手動変更
もし自動判定が間違っている場合は：
- 画面右下の言語表示部分をクリック
- 正しい言語を選択
または
Ctrl + K, Mを押す- 言語一覧から選択
便利な拡張機能とテンプレート
ファイルテンプレート拡張機能
File Templates
プロジェクト固有のテンプレートを作成できる拡張機能です。
設定例：
{
"fileTemplates.templates": [
{
"name": "React Component",
"template": [
"import React from 'react';",
"",
"const {{componentName}} = () => {",
" return (",
" <div>",
" <h1>{{componentName}}</h1>",
" </div>",
" );",
"};",
"",
"export default {{componentName}};"
]
}
]
}
Snippet Generator
よく使うコードのスニペットを簡単に作成できます。
プロジェクト構造の自動生成
Project Manager
複数のプロジェクトを効率的に管理できる拡張機能です。
Yeoman Generator
プロジェクトの雛形を自動生成できるツールです。
ファイル作成時のよくある問題と解決法
ファイルが作成できない場合
権限の問題
症状： 「権限がありません」エラーが出る 解決法：
- VS Codeを管理者権限で起動
- フォルダの書き込み権限を確認
- 別の場所に作成してから移動
ワークスペースが開かれていない
症状： サイドバーにプロジェクトが表示されない 解決法：
File > Open Folderでプロジェクトフォルダを開くFile > Open Workspaceでワークスペースを開く
ファイル名の文字化け
症状： 日本語ファイル名が正しく表示されない 解決法：
- ファイル名は英数字で付ける
- VS Codeのエンコーディング設定を確認
- システムの言語設定を確認
拡張子が表示されない
症状： ファイルの拡張子が見えない 解決法：
- Windowsの場合：エクスプローラーの「表示」→「ファイル名拡張子」にチェック
- VS Codeの設定：
files.simpleDialog.enableをfalseに設定
ファイル管理のベストプラクティス
プロジェクト構造の整理
フォルダ構成の例（React プロジェクト）
src/
├── components/
│ ├── Header/
│ │ ├── Header.jsx
│ │ └── Header.css
│ └── Footer/
│ ├── Footer.jsx
│ └── Footer.css
├── pages/
│ ├── Home.jsx
│ └── About.jsx
├── styles/
│ ├── global.css
│ └── variables.css
└── utils/
├── helpers.js
└── constants.js
ファイル命名規則の統一
チーム開発では、ファイル命名規則を統一することが重要です：
設定例（.vscode/settings.json）
{
"files.defaultLanguage": "javascript",
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
効率化のための追加設定
自動保存の設定
{
"files.autoSave": "afterDelay",
"files.autoSaveDelay": 1000
}
デフォルトの改行コードの統一
{
"files.eol": "\n"
}
ファイル除外設定
{
"files.exclude": {
"**/node_modules": true,
"**/.git": true,
"**/.DS_Store": true
}
}
まとめ
VS Codeで新しいファイルを作る方法をまとめると：
基本的な方法
- 最速：
Ctrl + N（MacはCmd + N） - プロジェクト内：サイドバーの新しいファイルアイコン
- 特定フォルダ内：フォルダ右クリック → 新しいファイル
- コマンド：ターミナルで
touchやtype nul >
効率化のポイント
- 状況に応じた方法の使い分け
- ファイル命名規則の統一
- テンプレート機能の活用
- 拡張機能による自動化
コメント