home
twitter
ページトップへ
目次
  • 「マルチカーソル」とは何か?
  • 3つの方法がある!
  • 「Ctrl + Alt + (↑or↓)」 カーソルの追加。
  • 「Alt + 左クリック」 好きな場所にカーソルの追加。
  • 「Ctrl + d」「Shift + Ctrl + L」  同じような箇所の選択。
  • 具体的な使用例を紹介!
  • 「Shift + Alt + →」を使って一部だけコピーして書きだす。
  • 「Ctrl + d」でカーソルが乗っている箇所をいい感じに選択できる。
  • 具体的な使用例は「随時」追加していきます!
  • まとめ!
about
categories
page
archive
皇帝ペンギンブログ

2024/11/07 (更新日:2024/11/08)

【Vscode】「マルチカーソル」を使って複数行の同時編集する方法。【作業効率の大幅UPショートカット】

Categories > VScode
こんばんは!初めましての方は初めまして!
しゅーた(@chibasyuta)です!

この記事では「VScode」の「マルチカーソル」の使い方の解説をします!

「マルチカーソル」を使ってるのと、使っていなのでは、コードを書くスピードが変わってくるので、ぜひ使いこなして「爆速コーディング」しましょう!!

ということで、さくっと「マルチカーソル」の使い方をまとめますねっ。

また、下の動画でも「VScode」の「マルチカーソル」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ!
目次
非表示
  • 「マルチカーソル」とは何か?
  • 3つの方法がある!
  • 「Ctrl + Alt + (↑or↓)」 カーソルの追加。
  • 「Alt + 左クリック」 好きな場所にカーソルの追加。
  • 「Ctrl + d」「Shift + Ctrl + L」  同じような箇所の選択。
  • 具体的な使用例を紹介!
  • 「Shift + Alt + →」を使って一部だけコピーして書きだす。
  • 「Ctrl + d」でカーソルが乗っている箇所をいい感じに選択できる。
  • 具体的な使用例は「随時」追加していきます!
  • まとめ!

「マルチカーソル」とは何か?

「VScode」で「マルチカーソル」を使う

「マルチカーソル」とは、通常は1つしかないカーソルを増やして、複数の行を同時に編集することができる、という「爆速コーディング」に大きく貢献するテクニックのことです。

わー!すごい!

3つの方法がある!

「VScode」で「マルチカーソル」を使う方法は大きく分けて3つあります。

細かいテクニックも含めると、もっとたくさんありますが、いろんなテクニックを紹介しても、それらを使いこなせなかったら意味がない訳なので、今回は「めっちゃ使える」テクニックに絞って解説します。

3つの「マルチカーソル」の使い方!

  • 「Ctrl + Alt + (↑or↓)」 カーソルの追加。
  • 「Alt + 左クリック」 好きな場所にカーソルの追加。
  • 「Ctrl + d」「Shift + Ctrl + L」  同じような箇所の選択。

これら3つは使いこなすべき!だと個人的に思っています。

「Ctrl + Alt + (↑or↓)」 カーソルの追加。

「VScode」で「マルチカーソル」を使う

「Ctrl + Alt + (↑or↓)」でカーソルを追加することができます。

これが基本形だと思っています。手っ取り早くよく使います。

「Alt + 左クリック」 好きな場所にカーソルの追加。

「Alt + 左クリック」 好きな場所にカーソルの追加。

「Alt + 左クリック」で好きな場所にカーソルの追加ができます。

「Altキー」はおしっぱなしで、ぽちぽちクリックしたら、その分カーソルを増やせるので、直感的に使えますし、「追加したいカーソルの位置がずれている」ときに非常に役立ちます。

「Ctrl + d」「Shift + Ctrl + L」  同じような箇所の選択。

「Ctrl + d」「Shift + Ctrl + L」  同じような箇所の選択。

「Ctrl + d」を使うと選択した箇所と同じようなところを1つずつ選択することができます。

「const」を「var」に書き換える際などに使えますね。レッツ リファクタリング!

因みに、選択をやり直す場合は「Ctrl + u」です。

選択のスキップは「Ctrl + k」です。

「Shift + Ctrl + L」を使うと、一括で全ての同じような箇所を選択することができます。全て選択したい場合は「Ctrl + d」よりも効率的ですね。

具体的な使用例を紹介!

具体的な使用例を紹介しますね!
わーい!

「Shift + Alt + →」を使って一部だけコピーして書きだす。

「Shift + Alt + →」を使って一部だけコピーして書きだす。

「Shift + Alt + →」を使うことで、区切りのいい箇所まで全てのカーソルを移動させることができます。

これによって、文字数が違うものも、同じようにコピーして書きだすことが可能です!

「Ctrl + d」でカーソルが乗っている箇所をいい感じに選択できる。

「Ctrl + d」でカーソルが乗っている箇所をいい感じに選択できる。

「Ctrl + d」を使うことでカーソルが乗っている箇所をいい感じに選択できます。

なのでそれを利用して、同じようにコピーして書きだすことが可能です!

具体的な使用例は「随時」追加していきます!

具体的な使用例は面白いものがあったり、役立つものがあったら随時、追加していきます!

ここでまとめても、まとめ切れないくらい、細かい使用例はたくさんあると思うので、お楽しみに!追加した場合は僕のx(旧twitter)で報告すると思うので、もし興味があればフォローしてチェックしてね!

@chibasyuta

まとめ!

今回は「VScode」のマルチカーソルの使い方の解説をしました!

今後もコーディングをすることを考えると、ショートカットは早いうちに知っておくほうが得!なので、ないがしろにせず初心者ほどしっかり勉強するといいと思います!

また、知っていても使いこなさないと意味がないので、1つずつでいいので、使って身に着けていきましょう!!一度見に着くと、無意識でスッとできるようになり、「爆速コーディング」に1っ歩近づけます!

また、下の動画でも「VScode」の「マルチカーソル」の使い方について詳しく解説しているので、一緒に実際にコードを書きながら学びたい方はこちらをどうぞ!
YouTubeで専門的なプログラミングの講義を行っています!

また、YouTubeで専門的なプログラミングの講義を行っていますので、もし興味がある方は、一緒にYouTubeで学習しましょう!

https://www.youtube.com/@emperor_ch

それでは、また!

自分のロゴ!

皇帝ペンギン

全力で、書きます。
少しでもお役に立てたら幸いです。
楽しんで読んで下さい 。-_- 。
よろしくお願いします!

x(旧twitter) youtube
Categories
  • トップへ
  • ITパスポート (1)
  • programming (168)
    • CSSのアニメーション編 (26)
    • CSSのグリッドレイアウト編 (1)
    • CSSのセレクター編 (58)
    • CSSのフレックスボックス編 (1)
    • CSSのメディアクエリー編 (7)
    • CSSの基本編 (34)
    • HTMLのformタグ編 (1)
    • HTMLの基本編 (3)
    • JavaScriptの入門編 (30)
    • JavaScriptの基本編 (5)
    • Web制作をする環境を整えよう! (1)
  • Uncategorized (23)
  • VScode (1)
  • おすすめ商品! (1)
  • クラロワ (2)
  • マーケティング (17)
  • 大学生活 (7)
  • 心理学 (9)
  • 映画 (1)
  • 法学 (4)
  • 経済学 (4)
  • 読書 (7)
Pages
  • プライバシーポリシー
  • 免責事項
  • プロフィール
Archive
  • 2025年3月 (1)
  • 2025年1月 (9)
  • 2024年12月 (13)
  • 2024年11月 (5)
  • 2024年10月 (10)
  • 2024年9月 (15)
  • 2024年8月 (5)
  • 2024年7月 (6)
  • 2024年6月 (5)
  • 2024年5月 (10)
  • 2024年4月 (24)
  • 2024年3月 (11)
  • 2024年2月 (6)
  • 2024年1月 (10)
  • 2023年12月 (4)
  • 2023年11月 (3)
  • 2023年10月 (2)
  • 2023年9月 (3)
  • 2023年8月 (6)
  • 2023年7月 (3)
  • 2023年6月 (8)
  • 2023年5月 (2)
  • 2023年3月 (1)
  • 2023年2月 (1)
  • 2022年10月 (2)
  • 2022年9月 (2)
  • 2022年8月 (8)
  • 2022年7月 (2)
  • 2022年6月 (6)
  • 2022年5月 (9)
  • 2022年4月 (2)
  • 2022年2月 (4)
  • 2021年12月 (1)
  • 2021年11月 (4)
  • 2021年10月 (8)
  • 2021年9月 (14)
  • 2021年8月 (6)
  • 2021年6月 (1)
  • 2021年5月 (2)
  • 2021年4月 (1)
  • 2021年3月 (1)
  • 2021年2月 (2)
  • 2020年10月 (1)
  • 2020年7月 (1)
  • 2020年4月 (1)
  • 2020年1月 (1)
  • 2019年12月 (2)
© Copyright Syuta Chiba, 2019 All Rights Reserved.