Category
Archives
Cocotiie
Trial And Error!やってみよう!の精神でWeb制作をしています。初心者の方にも伝わるよう、心がけています。少しでも誰かの助けになれれば嬉しいです。宜しくお願い致します。

2006年:Web制作に関する覚書きブログをはじめる。

2018年:Cocotiie(ココッティー)として運営開始。
テーマをSWELLにしてリニューアルしましたSWELLについて

Visual Studio Code (VSC) 後からタグで囲む ショートカットキー設定

Emmet

Visual Studio Codeで、タグを簡単入力できるEmmetはお使いですか?通常はタグを書いて、テキストを後から書く流れだと思います。

では、テキストを流し込みをした場合はどうしていますか?後からタグを地道に書くのは非効率。ショートカットキーを設定して、テキストを書いた後からでも一発でタグを付けちゃいましょう!簡単なので、ぜひ使ってみて下さい。

以下の様に、複数行をリストにする事もできますし、まとめてDIVやPで囲む事もできます。

VSCode
VSCode+Emmet
INDEX

ショートカットの設定

  1. [ファイル] → [ユーザー設定] → [キーボード ショートカット] を開く。
  2. 「入力してキーバインドを内を検索」にemmetと入力。
  3. Emmet:ラップ変換の+印をクリック
  4. 開いたウィンドウに、自作のショートカットキーを入力(実際にキーを押す事で自動で入力されます)

既にあるショートカットキーと重ならない様にしなければなりません。これがかなりの難問。Ctrl+数字とか工夫するといいかもしれません。

VSCode

使い方

まず、テキストを選択し、先ほど登録したショートカットキーを押して、タグを入力するウィンドウを表示します。そこに、Emmetのシンタックスを入力します。書き方はCheat Seetをご参照下さい。

複数行を個々に

リスト化したい場合 ul>li* (*が複数行を個々にします)

リスト化

まとめて囲みたい場合

範囲を選択して divやpを入力します。

\この記事がお役にたったら/

広告を減らしサイトを見やすくする予定です

cocotiieの運営をサポートして頂ければ嬉しいです

「金額を入力」で1円から入力できます

よかったらシェアお願いします
  • URLをコピーしました!
  • URLをコピーしました!

コメント ※ハンドルネームでお願いします

コメントする

INDEX