マガジンのカバー画像

Visual Studio Code

7
本
運営しているクリエイター
なかしまぁ先生

#JavaScript

VSCodeでプレビュー

通常、VSCodeで作成したファイルはブラウザで確認するように指導していますが、それを自動的に素早く表示できる機能拡張がいくつかあります。なかなか希望のものが少ないのですが、「Live Server」は使えるかもですのでご紹介します。 １.Live Server次の機能拡張をインストールしてみましょう。 ２.作業フォルダとファイル以下のように任意のフォルダ(=作業フォルダ。例:ws)の中にファイル(=test.html)がないとうまくいかないようです。 エクスプローラの

なかしまぁ先生

VSCodeからブラウザへのドラッグ&ドロップ

1. 困った現象のあらまし私の科目では、HTML・CSS・JavaScriptの演習の際、 テキストエディタ(=Visual Studio Code)でファイル作成し、 上部タブをドラッグ&ドロップして、 ブラウザ上で確認するように指導していました。 2023年12月の後期授業中盤のころ、VSCodeからドラッグ&ドロップしたらVSCodeの別ウインドウが開いてしまうという困った現象が発生したとのご連絡が学生のかたからありました。 こちら(=Mac)では確認できず

なかしまぁ先生

Visual Studio Codeの扱い方

Webページを作るときには、 ・制作物を作るためにテキストエディタ、 ・制作物を確認するためにブラウザ が必要になります。 エディタと言うとMicrosoftのWordなどを連想するかもしれませんが、あちらはリッチエディタと呼ばれ、文字の大きさ、装飾などもできる機能の豊かなエディタです。 コードを書くときはそれらリッチな機能は必要ないため、コード（≒文字・数字・記号）だけを入力するテキストエディタが必要になります。 Mac付属のソフト「テキストエディット」もよくありません。

なかしまぁ先生