🍆

VSCode で Web アプリ開発入門のセットアップ

2023/09/24に公開

HTML

目標：
Visual Studio Code をマイクロソフトのページからダウンロードしてインストールする。
VSCode をポータブルモードに設定する。
そしてシンプルな javascript と html5 と CSS のページを作る。

１． VSCode-win32-x64-X.YY.Z.zip をダウンロード＆解凍する。かならず .zip フォーマットのものをダウンロードする。
２． Code.exe の置いてあるフォルダに /data フォルダを作るとポータブルモードになる。

参考：https://code.visualstudio.com/docs/editor/portable

３． "Visual Studio Code（以下、VS Code）はデフォルトでHTML／CSS／JavaScriptをサポートしている。" [https://atmarkit.itmedia.co.jp/ait/articles/1806/26/news032.html]

４． open folder をクリックして適当なフォルダを作ってプロジェクト・ルートにする。

５． index.html を作る。

index.html

<html>
    <head>
        <title>Hello VSCode and こんにちは HTML</title>
    </head>
    <body>
        <h1>Hello VSCode and こんにちは HTML</h1>
    </body>
</html>

６．プレビュー：２段階：
６．１．[ALT]+[Shift]+[R] で explorer.exe でファイルを表示する。
６．２．その後、ファイルを見つけてブラウザで開く。

Discussion