VSCode CSS Peekで、HTMLに適用されてるスタイルを確認
https://baapuro.com/VScode/twelve/
https://wp-load.in/html-css/vscode-plugin
「CSS Peek」は、HTMLタグに適用されているCSSを確認することができるプラグインです。HTMLファイルからCSSを確認できるのが大きな特徴です。
「CSS Peek」の使い方は以下です。
Mac：Optionを押しながらカーソルを置く
Wiondows：Altを押しながらカーソルを置く
CSS Peekの使い方
CSS Peekの使い方は非常に簡単である。確認したいクラスにカーソルを合わせ、「Alt（Option）」+「F12」を押すだけでよい。 また、「マウスの右クリック」→「ピーク」→「定義をここに表示」を順に押しても同じ操作ができる。 参照（他にも同じクラスが使われている場所）を表示したい場合は、「マウスの右クリック」→「ピーク」→「参照をここに表示」を押そう。 定義や参照をその場で確認できるため、コードから移動せずにCSSを確認できるので非常に効率的だ。
この機能はVue、React、PHPなどの様々な言語やフレームワークでも使えるので、その点は安心して欲しい。
-----------------------
「CSS Peek」が反応しないときはVSCodeの「設定」を確認する
「CSS Peek」をインストールしてもマウスカーソルが反応しないときはVSCode上の「hover」の設定を見直してみてください。
※classに対してCSSが書かれていないときはマウスカーソルは反応しません。
①VSCodeの左下部のメニューバーの歯車アイコン（管理）をクリックし、「設定」を選択
②「editor.hover」と入力して検索する
赤枠の「Editor > Hover: Sticky」にチェックが入っていなければチェックを入れてください。
チェックを入れることでclass名にマウスカーソルを置いたときに反応するようになります。