質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

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

genking0111
genking0111

総合スコア1

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2回答

0グッド

0クリップ

262閲覧

投稿2022/12/04 04:44

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

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

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

実現したいこと

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

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

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

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

エラーメッセージ

該当のソースコード

ソースコード

試したこと

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

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

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/12/04 05:05

こちらの質問が他のユーザーから「問題・課題が含まれていない質問」という指摘を受けました。

回答2

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

投稿2022/12/04 06:11

編集2022/12/04 06:23
Crimson_Tide

総合スコア506

genking0111👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

genking0111

2022/12/04 08:28

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

1

ベストアンサー

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」で検索すればすぐ出てくるので省略します。

投稿2022/12/04 05:19

編集2022/12/04 06:39
qnoir

総合スコア7889

genking0111👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

genking0111

2022/12/04 08:29

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

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。