Visual Studio Codeとは

Visual Studio CodeはMicrosoftが開発しているWindows、Linux、macOS、web用のソースコードエディタである。
– 中略
カスタマイズ性が高く、テーマやキーボードショートカット、環境設定を変更できたり、機能を追加する拡張機能をインストールすることができる。
Visual Studio Code – Wikipedia

vscode.devとは

2021年10月よりインストール不要のコードエディタとしてリリースされ、機能に制限はあるものの、気軽にコードを書くことができるようになりました。

※現在は英語版のみです。
また画像のようにMarkdownファイル(.md)も編集・表示可能です。

さっそく動かしてみる

まずはデスクトップにフォルダを作成し、左カラムのOpen Folderでフォルダを開きます。この時ブラウザによっては画像のような警告がでますが、ファイルを表示するをクリック。

左カラムの＋をクリックしてindex.htmlを作成します。なにか文字を入力して保存しておきます。

書いたコードをブラウザで表示させる

Visual Studio CodeではLive ServerやOpen with Browserといったワンクリックでブラウザで表示させる拡張機能が利用できるのですが、vscode.devには対応していません。以下の手順で表示させます。

1.Finderで作成したhtmlファイルが入ったフォルダを開き、ブラウザの検索バーにドラッグします。

2.ブラウザの再読み込み🔃をクリックします。

ブラウザで表示させることができました。

その他vscode.devでできること

HTMLにCSSを読み込ませると反映されるのはもちろん

コマンドパレットによるコードの差分表示も可能なので、模写の際の答え合わせなどにも使えます。

vscode.devでできないこと

利用できる拡張機能が非常に少ない
前述の通り、使える拡張機能が制限されています。
検索をかけて白文字になっているものは使用可能です。
デバッグ・ターミナルの使用が不可
機能としては用意はされていますが現在の所(2022年4月)使用できません。
その為ターミナルでサーバーを立ち上げてブラウザに表示させることはできないようです。

メニューアイコン⇒View⇒Terminalで選択はできるが…

not availableとなっている

まとめ

今回はあまり知られていないVisual Studio CodeのWeb版・vscode.devをご紹介しました。
今後はダウンロード版に関する記事を作成しますので参考にして頂けると幸いです。

最後までご覧いただきありがとうございました。