SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

開発用エディタのド定番「VSCode」を使いこなそう

VSCodeの豊富な機能で編集を効率化しよう!―行操作、マルチカーソル、検索と置換、エディターグループを解説

開発用エディタのド定番「VSCode」を使いこなそう 第9回

  • X ポスト
  • このエントリーをはてなブックマークに追加

マルチカーソル

 マルチカーソルとは、文字通りカーソルを複数設定し、それぞれに対して一度に編集操作を行う機能です。この機能を使うと、宣言文を一度に入力できるなどコーディングの効率がアップしますので、ぜひとも使いこなしたい機能です。

カーソルを追加する

 通常は、カーソルは1個しかありません。カーソルキーで移動、マウスクリックでカーソルが移動、それが基本です。ここで、[Option]+クリック/[Alt]+クリックで、その位置にカーソルを増やすことができます(図2)。

図2:カーソルをクリックで追加する
図2:カーソルをクリックで追加する

 シンプルで分かりやすいですが、数が多いと1箇所ずつクリックするのは面倒です。こういうときには、[Option]+[Command]+[↑][↓]/[Alt]+[Ctrl]+[↑][↓]でキー操作のみで追加できます。また、[Option]+[Shift]+ドラッグ/[Alt]+[Shift]+ドラッグでマウス操作でカーソルを追加できます(図3)。マウスが中ボタンを備える場合、中ボタンのドラッグでも同様に追加できます。

図3:カーソルを一気に追加する
図3:カーソルを一気に追加する

 慣れないうちは、シンプルなものから覚えていけばよいでしょう。なお、[Esc]キーでマルチカーソルをキャンセルできます。

一度に入力する

 カーソルを追加できたら、そこに文字を入力していけます。とりあえず変数名だけ並べておき、例えばデータ型やアクセス修飾子を入力していく、それだけでも便利に使えます(図4)。

図4:カーソル位置に一度に入力する
図4:カーソル位置に一度に入力する

カーソルを移動する

 マルチカーソルの状態でも、カーソルを移動させることができます。[↑][↓]キーでマルチカーソルの範囲を上下に移動できますし、[←][→]キーで左右に移動できます。では、図4のような状態で、行末にセミコロン(もしくは初期化式)を入力したいとしたらどうでしょう。

図5:カーソル位置を単語末に移動して一度に入力する
図5:カーソル位置を単語末に移動して一度に入力する

 識別子の長さが違うので、このような場合には単語単位の移動を使います。マルチカーソルに限定された機能ではありませんが、マルチカーソルと組み合わせるとさらに有効に使える操作です(図5)。このようなキー操作をいくつか挙げておきます。

  • 単語単位で移動:[Option]+[←]または[→]/[Ctrl]+[←]または[→]
  • 行頭へ移動:[Command]+[←]/[Home]
  • 行末へ移動:[Command]+[→]/[End]

検索と置換

 検索と置換も、多用する編集機能です。これらにも、いくつかの方法が用意されていますから、目的に応じて使い分けることができます。

検索

 検索したいと思ったときに、最も基本となる機能です。アクティブなエディターにて検索パレットを開き、指定する語の検索を実行します。検索パレットは、[編集]-[検索]か[Command]+[F]/[Ctrl]+[F]で呼び出せます。検索パレットの検索語の入力欄には、大文字小文字の区別、単語単位の検索、正規表現での検索、それぞれを切り替えるトグルアイコンがあります。トグルアイコンをクリックすることで、有効/無効を切り替えられます(図6)。

図6:検索パレット
図6:検索パレット

 検索パレットを開く前に、あらかじめテキストを選択しておくと、それをあらかじめ検索語として設定できるので便利です。また、トグルアイコンをクリックする代わりに、以下のショートカットキーも利用できます。

  • 大文字/小文字の区別:[Option]+[Command]+[C]/[Alt]+[C]
  • 単語単位の検索:[Option]+[Command]+[W]/[Alt]+[W]
  • 正規表現を用いた検索:[Option]+[Command]+[R]/[Alt]+[R]

 一致箇所へは、前の一致項目、次の一致項目、選択範囲を検索、いずれかのアイコンをクリックすることで移動できます。これらにも、以下のショートカットキーが用意されています。

  • 前の一致項目:[Shift]+[Enter]/[Shift]+[Enter]
  • 次の一致項目:[Enter]/[Enter]
  • 選択範囲を検索:[Option]+[Command]+[L]/[Alt]+[L]

 検索パレットは、[×]アイコンをクリックするか、[Esc]キーで閉じることができます。

置換

 基本的には検索機能と同じですが、検索パレットの代わりに置換パレットを開きます。置換パレットは、[編集]-[置換]か[Option]+[Command]+[F]/[Ctrl]+[H]で呼び出せます。また、検索パレットを開いた状態で左端の[>]をクリックすると置換パレットに変化します(図7)。

図7:置換パレット
図7:置換パレット

 置換パレットの構成は、検索パレットに、保持するトグルアイコン、1個置換、全て置換のアイコンが付いたものです。これらにも、以下のショートカットキーが用意されています。

  • 1件を置換:[Enter]/[Enter]
  • 全てを置換:[Command]+[Enter]/[Ctrl]+[Alt]+[Enter]

 なお、保持するトグルアイコンの機能は、置換後の文字列において検索語の文字ケース(大文字と小文字の構成)を保持するか、しないかの指定になっています。保持する場合の置換例をいくつか挙げておきます(公式サイトより)。検索語は「foo-bar」、置換語は「blim-blam」です。

  • foo-bar → blim-blam
  • Foo-Bar → Blim-Blam
  • FOO-BAR → BLIM-BLAM

 識別子がパスカルケースである場合など、大文字小文字を保持したい場合には便利です。

識別子を一括で置換

 大文字小文字を区別するとか、単語単位で検索するとか、正規表現を使いたいとか、そういうケースでない置換の場合は、シンプルな方法があります。識別子の上にカーソルを移動させて、[f2]キーを押します。すると、置換後の識別子名を入力する窓がポップアップするので、新しい識別子名を入力します。[Enter]で全て置換、[Command]+[Enter]/[Ctrl]+[Enter]でプレビューで確認しながら置換できます(図8)。なお、この機能は言語サーバに依存するので、言語によっては使用できないことや、挙動が変わることがあります。

図8:識別子を一括で置換
図8:識別子を一括で置換

フォルダーを指定して検索/置換

 ここまでの検索置換機能は、現在開いているファイルに対するものでした。これとは別に、あるフォルダー以下にある全てのファイルから検索したいことがあります。これは、いわゆるgrep検索というもので、複数ファイルから正規表現などを用いて一気に検索できるので便利です。

 まず、検索対象のフォルダーを[ファイル]-[フォルダーを開く...]で開きます。ここで、[編集]-[フォルダーを指定して検索]を選択します(虫眼鏡のアイコンか、[Shift]+[Command]+[F]/[Ctrl]+[Shift]+[F]でも開けます)。図6とは違う検索パレットがサイドバー上に開きますので、ここに検索語を入力します(図9)。表示されているボタンの機能は、図6と同じです。検索はリアルタイムで実行されるので、検索パレットに表示される一致ファイルの一覧からファイルを開くことができますし、一致件数の右にある[エディターで開く]をクリックして全部を開くこともできます。

図9:フォルダーを指定して検索
図9:フォルダーを指定して検索

 検索語の左にある[>]をクリックすると、置換語を入力できるようになります。ここの構成も、図7と同様です。アイコンをクリックして、全置換することもできます(図10)。

図10:フォルダーを指定して置換
図10:フォルダーを指定して置換

 パレットの右下にある[…]をクリックすると、含めるファイルや除外するファイルといったオプションを指定できます。[含めるファイル]には、ファイル名やフォルダー名のグロブパターン(ワイルドカードのように「*」「**」を用いて指定)を指定できます。複数指定するには、カンマで区切ります。入力欄の右にある本のアイコンをクリックすると、検索対象を開いているファイルに限定できます。

 [除外するファイル]にも、ファイル名やフォルダー名のグロブパターンを指定できます(図11)。入力欄右にある歯車のアイコンはトグルになっており、オンにすると設定のsearch.excludeで設定されているパターンを既定で使用します(「**/node_modules」などが既定で設定されている)。

図11:含めるファイルと除外するファイルを指定して検索
図11:含めるファイルと除外するファイルを指定して検索

 図11の場合、除外するファイルのパターンに「*.cpp」を指定してしまったため、すべての.cppファイルが検索対象から外れました。そのため、結果は空となっています。

次のページ
エディターグループ

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
開発用エディタのド定番「VSCode」を使いこなそう連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 山内 直(WINGSプロジェクト ヤマウチ ナオ)

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/wings(メンバーリスト) Facebook <個人紹介> WINGSプロジェクト所属のテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/20142 2024/09/30 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング