85
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

WebStormのマルチカーソル機能が便利すぎて鼻から牛乳が出る(IntelliJ IDEA、PhpStorm対応)

Last updated at Posted at 2016-06-29

JetBrainsのIDEWebStorm(PhpStorm、IntelliJ IDEA等)には、複数の箇所を同時に編集できる便利な「マルチカーソル機能」があります。

マルチカーソル機能の使い方

次のようなHTMLコードの「image」の文字列を「cat」に置き換える例を説明します。

<img src="image1.png">
<img src="image2.png">
<img src="image3.png">
<img src="image4.png">

[Alt]キー(Windows / macOS)を押しながら同時編集したい箇所をクリックすると、マルチカーソルモードになります。編集したい行を選択後、[Alt]キーを離してテキスト編集をすると、選択したすべての箇所に変更が反映されます。解除するには、[ESC]キーを押します。

multi_0.gif

列が同じであれば、[Alt]キーを押しながらマウスをドラッグするのが楽です。

multi.gif

長さの異なる文字列の一括編集にも便利

ここまでは一括置換でもできますが、長さの異なる文字列を一括編集したい場合にも役に立ちます。マルチカーソルで編集開始位置を選択した後、[shift]+[option]で編集位置全体を選択します。

multi_2.gif

行は同じでも良い

この機能を紹介するとたまに勘違いされますが、編集箇所は違う行である必要はありません。同じ行でも同時編集できます。

あらゆるファイルでマルチカーソルが使える

WebStormで対応しているファイルなら、CSS、JavaScript、JSON、XML等あらゆるファイルでこのマルチカーソルが使えます。次に示すのは、TypeScriptでマルチカーソルを使っている例です。

ファイルの相対パスを取得する「Copy Relative Paths」(ファイルを選択して右クリック)と連携させ、Emmetでbackground-image()を入力後に異なる複数の画像パスをCSSに記述している例です。

マルチカーソル機能を使いこなして作業時間とミスを減らそう

マルチカーソルはIntelliJPhpStormといったJetBrains製品でも利用可能です。複数箇所の同時編集は、ミスと作業時間とストレスを減らす便利な機能。是非使ってみてください。

JavaScriptのプログラミングはこれだけ効率化できる! 使用歴5年目のエンジニアが送るWebStormの厳選神業集 - ICS MEDIA」でも様々なテクニックを紹介しているのであわせて参照ください。

85
63
2

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
85
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?