2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

VSCodeで複数行に同時カーソル:`Alt + Shift + ↑/↓` で爆速編集

Posted at

概要

変数名の修正、複数行の同時編集、縦並びのインデント調整…。
こうしたタスクでマウスや矢印キーを使っていては、生産性が大きく落ちる

Visual Studio Code(VSCode)には、複数行にカーソルを一瞬で配置できるショートカットが用意されている。
Alt + Shift + ↑/↓ を使えば、直感的かつ爆速で複数行を同時に操作できる。


対象環境

エディタ: Visual Studio Code  
OS     : Windows / Linux  

※ macOSの場合は Option + Shift + ↑/↓ で同様の動作を実現可能


基本操作

Alt + Shift + ↓   ← 下にカーソルを追加  
Alt + Shift + ↑   ← 上にカーソルを追加

使用例:連続行の変数を一括編集

以下のようなコードがあるとする:

const a = 1;
const b = 2;
const c = 3;

各行の変数名(a, b, c)を同時に value に変更したいとき:

  1. 最初の行にカーソルを置く
  2. Alt + Shift + ↓ を2回押して3行選択
  3. 変数名を一括編集
const value = 1;
const value = 2;
const value = 3;

わずか数秒で完了する。


応用:マルチカーソルで同時入力・同時削除

このショートカットで作成した複数カーソルは、同時入力・同時削除・同時インデントすべてに対応する。

Tab / Shift+Tab    → 複数行の一括インデント  
Delete / Backspace → 複数箇所の一括削除  
文字入力           → 複数位置への同時入力

補足:非連続の複数カーソルも使いこなすなら Ctrl + クリック

Ctrl + マウスクリック

で、任意の行にカーソルを追加可能。
Alt + Shift + ↑/↓ と組み合わせれば、柔軟なマルチ編集が可能になる。


結語

VSCodeはただのエディタではない。
カーソル操作だけで編集効率が10倍以上変わることを知っておくべきだ。

Alt + Shift + ↑/↓ は、あなたの編集スタイルを一段引き上げる。
マウスでカーソルをチマチマ動かす時代は終わった。

「速く、正確に、美しく」── それがプロのエディットだ。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?