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

2021/06/07


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 にチェックを入れる
※ さらに、拡張機能で、Prettier を先に入れておいて、
Editor: Default Formatter で、Pretter を選んでおく。
(けど、これは結局今のところ外した、、、)

■ 貼り付け時に自動整形
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「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

■ 選択関係の色をもっと強調して見やすくする
ファイル ⇒ ユーザー設定 ⇒ 設定
検索窓で、settings.json ⇒ settings.jsonで編集
コピペする場所に注意が必要だけど、最後の } の前にコピペ
,
"workbench.colorCustomizations": {
// 選択中のテキスト
"editor.selectionBackground": "#c978f6",
// 選択中のテキストと同じ文字
"editor.selectionHighlightBackground": "#394285",
// 選択行の背景色
"editor.lineHighlightBackground": "#ffffff11",
// 検索で見つかった文字
"editor.findMatchHighlightBackground": "#264eff",
// 検索で見つかった文字で現在フォーカスしている文字
"editor.findMatchBackground": "#ae00ff",
// 検索で見つかった文字で現在フォーカスしている文字の枠線
"editor.findMatchBorder": "#ffffff"
}

■ 入れておきたい警告関係の拡張機能
Bracket Pair Colorzier 2
{} () カッコの色を分かりやすくする

Code Spell Checker
スペルミス対策 スペルミスじゃないかと思われるところを破線で知らせてくれる

HTMLHint
警告表示 間違ってそうなスペルの時に電球マークで警告してくれる

ESLint
JavaScript 警告対策

■ ショートカットの設定
選択範囲を任意のタグで囲むショートカットの設定
ファイル ⇒ ユーザー設定 ⇒ キーボードショートカット ⇒ 検索(emmet with)
Emmet: ラップ変換
editor.emet.action.wrapWithAbbreviation
ダブルクリックしてショートカットを設定
例)alt + i
【使う場合】
・ 複数行を1つとしてタグで囲むときは、入力欄に<>を除いた要素を入力
例)li
・ 複数行をそれぞれタグとして囲むときは、最後に*を入力
例)ul>li*

■ ショートカット
マルチカーソル選択 Ctrl + Shift + Alt + ↓
選択している部分を自動選択 Ctrl + Shift + L
離れた位置を複数任意に選択 Alt
選択部分の複写 Shift + Alt + ↓ (Excel の Ctrl + D のようなもの)
行の移動 Alt 押しながら ↑↓
選択全置換 選択状態で F2 ( Ctrl + H )
警告(波線)部分のヘルプ表示 F8
次の警告 Shift + F8
開閉 Ctrl + Shift []
コメントアウト Ctrl + /
表示上の改行 Alt + Z

■ 拡張機能のおススメサイト
VSCodeのオススメ拡張機能 24 選 (とTipsをいくつか) - Qiita

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

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

 

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

スポンサーリンク

スマホのみ下に表示