行の入れ替え(VSCode の絶対覚えておきたい便利なショートカット)

 VSCode (Visual Studio Code)のショートカットやプラグインの紹介する記事はたくさんあるけど一気にたくさんは覚えられないので、劇的に作業効率があがるものを1記事で1つづつ紹介していきます。

行を入れ替えるショートカット!

最初のショートカットはこちら
※Mac=option Windows=alt で読み替えてください

option + ↑ or ↓

<ul>
  <li>AAAAA</li>
  <li>BBBBB</li>
 |<li>CCCCC</li>
</ul>

この状態で option + ↑  すると...

<ul>
  <li>AAAAA</li>
 |<li>CCCCC</li>
  <li>BBBBB</li>
</ul>

になります。

実際にこのショートカット使わないで同じ事やろうとすると

  1. 行の選択
  2. カット
  3. カーソル上に移動
  4. 改行
  5. ペースト

って感じでそこそこ面倒なんですよね。このショートカットでリストの編集はかなり作業時間短縮できるのでWebページ扱う人にオススメしてます。


ついでにもう一つ

option + shift + ↑ or ↓

これで行が複製できます!

<ul>
  <li>AAAAA</li>
  <li>BBBBB</li>
 |<li>CCCCC</li>
</ul>

この状態で option + shift + ↓  すると...

<ul>
  <li>AAAAA</li>
  <li>BBBBB</li>
  <li>CCCCC</li>
 |<li>DDDDD</li>
</ul>

になります!

これでばばっと<li>要素を必要なだけ作って、中身だけ入れ替えたりします。