Visual Studio Code で、Brackets のライブプレビューを実現可能にする拡張機能「Live Server」

2021/04/16


Visual Studio Code で、Brackets のライブプレビューを実現可能にする拡張機能「Live Server」

Adobe が Brackets から手を引いたので、これからは、Visual Studio Code で行こうとおもうんだけど、Brackets のライブプレビューに慣れていると、このリアルタイムで確認できるプレビュー機能ってのは手放せなくなります。
Visual Studio Code には標準では、Brackets のライブプレビュー機能的なものはないので、拡張機能で追加しておきます。

■ とりあえずまず日本語化
メニューより view
command palette ⇒ configure display language
Install additional languages...
左に表示された
Japanese Language Pack for Visual Studio Code を
インストール
Visual Studio Code を再起動

■ 拡張機能名は、「Live Server」
以下に接続して、インストールする。
Visual Studio Code の左の拡張機能アイコンから、機能拡張「Live Server」を検索して、インストールすればOK。
ファイヤーウォール設定を確認してくるので、「アクセスを許可する」でOK.

スポンサーリンク

----- べんりあつめ。-----

この拡張機能「Live Server」は、ファイルを保存したタイミングでプレビューを更新してくれる機能です。
なので、Brackets のライブプレビューのように、記述している状況で、ブラウザがリアル更新してくれるわけではありません。
ある意味、この仕様の方が健全なのかもしれませんが、僕は、Brackets のライブプレビューのようにリアルな方がいいので、以下の自動保存設定を併用して、なんちゃってライブプレビューをしています。
ちなみに、ライブプレビューするには、設定後に、ウインドウ右下に表示されている 「Go Live」をクリックすると、ブラウザが起動して保存するたびに、ブラウザが更新されます。

■ 自動保存の設定
自動保存を設定しておけば、Brackts のライブプレビューみたいな機能を実装可能です。
自動保存の設定
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「auto save」
Auto Save の種類を 「afterDelay」にする
ちなみに4種あるけど意味的には、
off : 自動保存オフ
afterDelay : Auto Save Delay で指定した数値後に自動保存(1000で1秒)
※ Auto Save Delay は初期値が1000なので、特に何も変更しなければ、
1秒後に自動保存される。ま、タイムラグが気になる人はこの数値を500とかにしてもいいかもね。
onFocusChange : ファイルを切り替えた時に自動保存
onWindowChange : ウィンドウを切り替えた時に自動保存

これで、Visual Studio Code で Brackets のライブプレビューと同等の機能を実装できました。
ただし、自動保存していることを忘れないようにしておきましょう。
コードや文字列を別ファイルからコピーするときに、カットする習慣がある人は、自動保存機能は使わない方がいいかもね。
それでは、Visual Studio Code でも、快適なリアルプレビュー開発を!
後は、以下の設定もしておくと便利便利!

■ 閉じタグは、自動補完ではなく、</ を入力することで補完されるように変更する。
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「auto closing tag」
以下の設定のチェックを外す
HTML: Auto Closing Tags
JavaScript: Auto Closing Tags
TypeScript: Auto Closing Tags

機能拡張「Auto Close Tag」を導入
インストール ⇒ 歯車アイコン ⇒ 拡張機能の設定
Auto-close-tag: Activation On Language の settings.jsonで編集をクリック
8行目あたりの空白行のところに "html", を入力
"html" の後に、カンマ , を忘れずに!
念のためにセーブしておいて、上記タブ上で再び Auto Close Tag の機能拡張設定に戻る。
一番下の Auto-close-tag: Sublime Text3 Mode にチェックを入れて設定完了。

■ 保存時に行の自動整形(自動フォーマット)
  ※ 各行の行頭の揃えを自動で設定してくれる
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「format on save」
Editor: Format On Save にチェックを入れる

■ タイプ時に自動整形
  ※ コードや記号間のスペースを自動で補完してくれる
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「format on Type」
Editor: Format On Type にチェックを入れる

■ 貼り付け時に自動整形
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「format on Paste」
Editor: Format On Paste にチェックを入れる

■ Ctrl L で、カーソルを画面中央に移動(入力するとき視線を常に中央に出来る)
機能拡張で下をインストール
Center Editor Window

これで最低限それなりに使えるようになったかな。
あとは、使い込みながら、入れたい設定あったらここに追記していくようにしようっと!

■ 外部cssもフォーマッタを適用する。
機能拡張より、CSScomb(mrmlnc)をインストール
VC codeを再起動
機能拡張のCSScombの歯車より、拡張機能の設定
Csscomb: Preset の settings.json で編集
{}内に設定内容を入れる。
(@EigenPort_Mさんのフォーマット設定を使わせていただきます。)
VS CODEでCSSのフォーマットをするまで - Qiita

※設定を完全リセットする方法
1、Visual Studio Code をアンインストール
2、以下の2つのフォルダを削除する
C:\Users\ユーザ名\.vscode
C:\Users\ユーザ名\AppData\Roaming\Code
これでOK。
再度インストールし直せば、初期状態で使える。
トラブった時の忘備録。

■ 知っておきたい入力方法
! を入力してエンターすると






Document


ul>li.list$*3 を入力してエンターすると

スポンサーリンク

スマホのみ下に表示