2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【インストール不要】vscode.devでVisual Studio Codeを体験

Posted at

Visual Studio Codeとは

Group-1.png

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

vscode.devとは

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

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

さっそく動かしてみる

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

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

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

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

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

2.ブラウザの再読み込み🔃をクリックします。
preview_in_browser.jpg
ブラウザで表示させることができました。

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

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

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

vscode.devでできないこと

  • 利用できる拡張機能が非常に少ない
    前述の通り、使える拡張機能が制限されています。
    検索をかけて白文字になっているものは使用可能です。
    extension.jpg

  • デバッグ・ターミナルの使用が不可
    機能としては用意はされていますが現在の所(2022年4月)使用できません。
    その為ターミナルでサーバーを立ち上げてブラウザに表示させることはできないようです。
    terminal_open.jpg
    メニューアイコン⇒View⇒Terminalで選択はできるが…
    terminal.jpg

not availableとなっている

まとめ

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

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?