HTMLコーディングで地味に手間のかかる作業を、VS Codeのコマンドパレットから便利な機能を呼び出して、サクッと対応する方法を2つご紹介します！
目次
imgタグのwidthとheightを自動入力
imgタグのwidthとheightは、レイアウトシフトを防ぐためにも重要な属性となっています。
また、WordPressにおいては、この属性があることで画像のLazy Loadが付与されるようになります。
画像一つひとつの幅と高さを確認して入力していくのはかなりの手間ですが、コマンドパレットで自動入力することができます。
※レイアウトシフトについて、詳しくは下記の記事で紹介しているので、ご参考ください。
【2022年2月版】WordPressの自動画像遅延読み込み機能について
自動入力の手順
- VS Codeでimgタグにカーソルを合わせる
画像のパスは正しく入力すること
- 「command + Shift + P」またはメニューの「表示」からコマンドパレットを呼び出して、「image」と入力
- 「Emmet: イメージ サイズの更新」を実行すると、widthとheightが自動入力
手順を書くと少し長く見えますが、1秒でwidthとheightが入力できます。
「Alt + 左クリック」で複数のimgを選択した場合は、一括で入力することも可能です。
参考：VS Codeでimgタグのwidth, height属性を自動入力する方法
選択範囲を任意のタグで囲む
よくあるのが、pタグ内に文章を流し込んだあと、一部を強調するために文字をspanタグ等で囲むという作業です。
対象テキストの冒頭にspanの開始タグを書いて、終了地点にカーソルを移動させて閉じタグを書く…地味に手間のかかる作業だと思います。
そこで、ラップ変換機能を利用して手間を減らします！
選択範囲をタグで囲む手順
- VS Codeでタグで囲いたいテキストを選択
- 「command + Shift + P」またはメニューの「表示」からコマンドパレットを呼び出して、「wrap」と入力。「Emmet: ラップ変換」を実行
- 表示された入力欄に囲みたいタグを入力
- 「Enter」を押すと選択範囲が入力したタグで囲まれる
width、heightの自動入力のように1秒とはいきませんが、ちりつもで結構作業時間短縮できるかと思います。
ぜひ活用してみてください。
