Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い

Visual Studio Codeの拡張機能「HTML Preview」でリアルタイムプレビューをする

私は現在テキストエディターをWindowsとMacの両端末とも、Microsoftから無償で提供されている「Visual Studio Code」に統一しています。

なぜなら、どちらのOSでも同じように利用でき、とっても便利で拡張性があるから。

先日「VScode×Markdownで【仕事効率化】を図る!」で紹介したMarkdown活用は勿論のこと、htmlもリアルタイムプレビューを見ながら書くことができます。

今回は html コーディングを Visual Studio Code で効率良くする方法を紹介します。勿論無料!

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

「HTML Preview」という拡張機能を入れる

Visual Studio Codeの拡張機能「HTML Preview」
2次元のルイ

追記です。

以前まで ” Thomas Haakon Townsend ” さんの HTML Preview を利用するのが一般的だったのだけれど、更新されなくなり非推奨のマークがついてしまうようになりました。そのため今は ” George Oliveira ” さんの HTML Preview が推奨されています。アイコンがまったく同じなので引き継がれてたりするのかな、なんていう予想。推奨されていない以前からの方でも問題なく使えるけれど、今は新しく更新されている方をインストールするのが良さそうですね。

リアルタイムプレビューをできるようにするため、「HTML Preview」という拡張機能をインストールします。

インストール方法はいたって簡単。

サイドバーのVisual Studio Codeの拡張機能ボタンマークのアイコンをクリックし、拡張機能タブを表示させ、検索窓に「html preview」と入力します。

そうすると今求めている拡張機能が出てくるので、インストールをクリック。
これだけで導入完了です。

「HTML PREVIEW」でリアルタイムプレビューをする方法

Visual Studio Codeの拡張機能「HTML Preview」のプレビュー画面
Visual Studio Codeの拡張機能「HTML Preview」のプレビュー画面

これまた簡単です。

htmlファイルを開いて、

  • Mac:Cmd + K → V
  • Windows:Ctrl + K → V

と入力するだけ。

新規ファイルでhtmlとして保存する前にコマンド入力してもプレビュー表示されないので注意です。

CHECK

他の拡張機能とショートカットがバッティングしている場合、

  • Mac:Cmd + Shift + P
  • Windows:Ctrl + Shift + P

と押してから、「HTML: Open Preview to the Side」を選択すれば横にプレビュー表示されます。

はじめてのときは、htmlと打ち込んだら部分一致で該当項目が見えてくると思います。

私は Markdown のリアルタイムプレビューを入れるとそちらも同じコマンドでバッティングし、htmlの方をこの方法でプレビュー表示させるようにしています。

Visual Studio Codeでコーディングすると何が良いのか

VS Codeでコーディングをすると何が良いのか、まとめておきましょう。

主にコーディングフォローをしてくれる機能と、整形してくれたりとか見えやすいというところですね。

効率がぐんと上がります。

閉じタグ自動入力

最近のエディターはよくついている機能になりましたね。

例としては、<div>の>まで入力すると、自動で</div>が生成されます。

文字を少し打つとコードの提案をしてくれる

Visual Studio Codeはコードの提案をくれる
Visual Studio Codeはコードの提案をくれる

<をタイプしただけで昇順でたくさんのコードを提案してくれます。

ここから文字を打つと、そこからまたアルファベット昇順にて提案してくれます。

インデントが見えてわかりやすい

Visual Studio Codeのインデントは見てわかりやすい
Visual Studio Codeのインデントは見てわかりやすい

何気にかなり便利。

長いhtmlを書いているとよくわからなくなってしまうことが多々あるので、この機能はとてもありがたい。

コマンド1つで自動整形ができる(すごい!)

Visual Studio Codeで一発インデント
Visual Studio Codeで一発インデント
  • Mac:Shift + Option + F
  • Windows:Shift + Alt + F

のコマンド一発で整形できます。

インデントが見えることもあり、かなり重宝しますよこれ。

その他

大体のエディターがそうだけれど、CSSとかHTMLのコードごとにハイライトされて、色味が単調にならなくなっているのもやはり好印象。

こんな風に欲しい機能はしっかりついています。

もしサーバー同期をしたい方は「SFTP」という機能拡張があります。

私はまだ利用していないので使い勝手がわからないのですが、利用してみたときはまた紹介してみますね。

そういうのがあるよという紹介だけ今はしておきます。

ファイルを保存すると自動でファイルがFTPへアップロードされるようです。

Extension for Visual Studio Code – SFTP/FTP sync

VS Codeでhtmlコーディング時リアルタイムプレビューする方法についてまとめ

Visual Studio Codeの拡張機能「HTML Preview」でリアルタイムプレビューをする

「Visual Studio Codeでhtmlコーディングはリアルタイムプレビューがすごく良い」ということで最近ハマっているエディター「VS Code」のhtmlリアルタイムプレビューがめっちゃ良いということを紹介しました。

Adobe の Dreamweaver は何かと重かったりしてあまり好きではないので、VS Codeでリアルタイムプレビューもできるのは大変ありがたい。

私の中でhtmlコーディングにはかかせないエディターとなりました。

別用途だけれど、Markdownも超便利!

まだ見ぬ拡張機能として「SFTP」というFTPへの自動アップロード拡張機能も名前だけ紹介しましたが、そのような超便利な拡張機能がてんこ盛りのVisual Studio Code。

色々使ってみて、こりゃ便利だという拡張機能を見つけたら随時紹介しますね!

Visual Studio Codeはコーダーの方やプログラマーの方、フロントエンジニアの方、ECサイト運営者の方と色んな方にオススメできるツールです。

良きWEBデザインをっ!

『VSCode』関連の記事をチェック

関連記事

あわせて読みたい
VScode×Markdownで【仕事効率化】を図る! 「Visual Studio Code(VSCode)」はMicrosoftが提供している無償で高機能なエディタです。豊富な拡張機能で自分好みのエディタカスタマイズ可能。Markdownで書いてpdfやhtmlで出力もできる!
あわせて読みたい
VSCode 拡張機能おすすめ19選 VSCodeの拡張機能って何入れたらいいんだろう?何入れたっけ?となることはよくある話。そこで、現在私の利用しているVSCodeの拡張機能をまとめて紹介します。

本格的に勉強してエンジニアになりたいならTechAcademy

Visual Studio Codeの拡張機能「HTML Preview」でリアルタイムプレビューをする

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ