VScodeでコーディングしたファイルを、アプリを閉じずにボタンひとつで保存したい！

Question

VScodeでコーディングの勉強をし始めたのですが、、、

MacBookユーザーです。
セイト先生のYouTubeでJavascriptの勉強をしはじめ、使用しているエディタがVScodeなのですが、htmlファイルを作ってそこにコーディングしても結果が反映されません。
コーディングには何一つ問題がないので試しにfinderからもう一度htmlファイルを開いてみたら結果が反映されました。

皆さんはVScodeでコーディングして、結果を確認するために一度VScodeを閉じて保存して、もう一度finderからhtmlファイルを開いて結果を確認するなどという面倒臭い工程を繰り返しているのでしょうか？

実現したいこと

・VScodeでコーディングしたものをExcelやWordのようにボタンひとつで更新・保存したい。
・VScodeでコーディングした結果をすぐにブラウザを更新して知りたい。

ここに実現したいことを箇条書きで書いてください。

• ▲▲機能を動作するようにする

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

ソースコード

試したこと

保存機能の拡張機能とか、「VScode 保存と出力　同時」とか調べましたが、当方ガチガチの初心者で何が何やらわかりません。。。
ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

更新

Live Previewという拡張機能を使えば、保存しなくても変更がリアルタイムで確認できます
Live Preview

Live Refreshing
See the changes as you make them. By default, changes appear as you make them in the editor. You can also change this in settings to refresh the preview on save or not at all.

(変更した内容をそのまま表示デフォルトでは、エディターで変更を加えたときに、その変更が表示されます。保存時にプレビューを更新するか、全く更新しないかは、設定で変更することもできます。)

保存

保存はショートカットを覚えてキーボードでショートカットキー押下がいいと思いますが、保存用ボタンを作成する拡張機能があるようです。
Save Button
もしくは自動保存機能があります。
Save / Auto Save

Comments

[genking0111]

ありがとうございます、自分の検索のしかたが下手でその拡張機能にたどり着くことができませんでした汗
ありがとうございます！！

Answer 2

htmlファイルを作ってそこにコーディングしても結果が反映されません。

保存するために VS Code を閉じる必要はなく Command＋S キーを押せば VS Code を開いた状態のまま、アクティブになっているファイルを保存できます。

アクティブなタブ以外も一括して保存したい場合は、（特に設定をいじっていなければ）Option + Command + S キーで全部保存できるはずです。

保存した結果が自動的にブラウザに反映されるようにしたいなら、VS Code の拡張機能に Live Server をインストールすればいいのではないでしょうか。
https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

インストールの仕方や使い方は「VSCode LIVE SERVER」で検索すればすぐ出てくるので省略します。

Comments

[genking0111]

わかりやすい説明ありがとうございます！早速拡張機能をインストールして使ってみたいと思います！！