クロピグログ

職業訓練で学んだことまとめ

【VScode】便利なショートカット集(忘れそうなやつ抜粋)

【HTML】div要素にクラス名つけた状態で書く効率いい方法

.box

Enter押すとこうなる↓

<div class="box"></div>

 

●このクラスの中にさらにクラス入れるときは「>」つける

.box>.grop

Enter押すとこうなる↓

<div class="box">
  <div class="grop"></div>
</div>

 

コードをコピーする効率いい方法

 いちいちコードを選択してコピーしなくても

下の動画のようにマウスポインターを置いて「Ctrl+C」でコピーし

その状態で「Ctrl+V」で貼り付けするだけで下にコピーされていく

f:id:chromiumpig:20200816000115g:plain

 

コードを移動する効率いい方法

 いちいちコードを選択して切り取りコピーしなくても

下の動画のようにマウスポインターを置いて「Alt+上下キー」で移動できる

f:id:chromiumpig:20200816000953g:plain

 

複数ある文字を選択して変更する効率いい方法

●選択した文字を全部一気に変更するとき

変更したい文字を選択し「Ctrl+D」で同じ文字を選択してくれる

その後、文字を消したり追加したりすると全部一気に変わる

f:id:chromiumpig:20200816003607g:plain

 

●選択した文字を一個一個違う文字に変更するとき

検索して置換の「Ctrl+H」を使えば、変更したい文字を検索し置換してくれる

検索スタートはマウスポインターで指定したところからになるので注意

f:id:chromiumpig:20200816004012g:plain

 

 すでに書いたコードをdivで囲みたい時の効率いい方法

Emmet: Wrap with Abbreviationは、

選択した範囲全体を囲むコマンド

自分は「Ctrl+F1」に割り当て

 

Emmet: Wrap Individual Lines with Abbreviationは、

選択した範囲の各行をタグで囲むコマンド

自分は「Ctrl+F2」に割り当て

 

f:id:chromiumpig:20200816005801g:plain

この記事で詳しく書いてる↓

 https://qiita.com/MToyokura/items/da4fb3477affd0278506