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.
なので、Brackets のライブプレビューのように、記述している状況で、ブラウザがリアル更新してくれるわけではありません。
ある意味、この仕様の方が健全なのかもしれませんが、僕は、Brackets のライブプレビューのようにリアルな方がいいので、以下の自動保存設定を併用して、なんちゃってライブプレビューをしています。
ちなみに、ライブプレビューするには、設定後に、ウインドウ右下に表示されている 「Go Live」をクリックすると、ブラウザが起動して保存するたびに、ブラウザが更新されます。
■ 自動保存の設定
自動保存を設定しておけば、Brackts のライブプレビューみたいな機能を実装可能です。
自動保存の設定
ファイル ⇒ ユーザー設定 ⇒ 設定 ⇒ 検索窓で「auto save」
Auto Save の種類を 「afterDelay」にする
ちなみに４種あるけど意味的には、
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
【使う場合】
・ 複数行を１つとしてタグで囲むときは、入力欄に<>を除いた要素を入力
例）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
■ その他
※設定を完全リセットする方法
１、Visual Studio Code をアンインストール
２、以下の２つのフォルダを削除する
C:\Users\ユーザ名\.vscode
C:\Users\ユーザ名\AppData\Roaming\Code
これでOK。
再度インストールし直せば、初期状態で使える。
トラブった時の忘備録。
■ 知っておきたい入力方法
! を入力してエンターすると
ul>li.list$*3 を入力してエンターすると