はじめに
JavaScriptの基礎を理解するにあたって、まずは Vanilla を使ってかんたんなWEBページを作成してみよう！
※Vanilla :ライブラリを全く使わない超シンプルなJavaScriptのこと！
問題
クラウドIDE（CodeSandboxやStack Blitz）のVanillaテンプレートを使いたかったが、
アップデートの影響で無くなってしまった。
解決方法
VSCode を使ってVanillaのテンプレートを作成する
必要なファイルはこちら!
１．index.html:
プロジェクトのメインのHTMLファイル。
ページの構造や基本的なマークアップを定義する。
CSSとJavaScriptファイルを読み込むためのリンクが存在する。
index.html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Vanilla Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="index.js"></script>
</body>
</html>
２．styles.css:
プロジェクトのスタイルを定義するCSSファイル。
ページの外観やスタイルを設定する。
styles.css
/* styles.css */
body {
font-family: cursive, sans-serif;
margin: 10;
padding: 0;
}
３．index.js (または app.js や main.js など):
プロジェクトのメインのJavaScriptファイル。
DOMのイベントリスナーやページの初期化コードがここに書かれる。
ページが読み込まれたときに実行されるコードや、ユーザーのアクションに対する応答などが含まれる。
index.js
// index.js
document.addEventListener('DOMContentLoaded', function () {
// "Hello, world"を表示する
document.body.textContent = 'Hello, Vanilla!';
});
おわりに
「ファイルの中身どうやって書くんだっけ?」ってときは、VSCodeの拡張機能（Emmet）を使うとコマンド一発で作成してくれるみたいです。便利ですね！
参考