Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

VSCodeでhtmlを書いてるときにLiveプレビュー

More than 1 year has passed since last update.

VSCodeでhtmlをLivePreviewしたい!!!

LivePreviewとは?

Webpackなどで普段フロントの開発をしている人はお馴染みだと思うのですが、エディターでSaveした瞬間にブラウザのプレビューが更新される事です。勝手に呼んでます。
Webpack等の環境がない状態でもその機能を使いたい!という方向け(only VSCode)

使い方

VSCodeの拡張機能、LiveServerを使用します。
1. 拡張機能の検索からLive Serverをインストール
2. VSCodeを再起動
3. プレビューしたいファイルを開き右下のGoLiveをクリック
4. 終わり!

簡単!

(VSCodeではフォルダごと開かないと動作しないみたいです。)

unotovive
Web系の技術に興味を持ってちょこちょこと触っていきます. https://twitter.com/unotovive
http://unotovive.me
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away