SHOEISHA iD

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

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

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

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

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

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

エディターグループ

 エディターグループとは、複数のエディター画面を開く機能です。それぞれのグループにタブバーが備わるので、エディターグループごとに複数のファイルを開いておく、といった作業が可能です。同一ファイルを複数のグループで開くことで、複数箇所を別個に表示、それぞれ編集できるので、大きなファイルの確認や編集に威力を発揮します。

エディターグループを開く

 エディターグループを開くには、[表示]-[エディター レイアウト]から操作します。基本的な分割方法として、分割(上)、分割(下)、分割(左)、分割(右)が用意されています。それぞれ、カーソルのあるエディター画面(アクティブなエディター)に対して新しいエディター画面をどの方向で開くかという指定になります。最もポピュラーと思われる「分割(上)」にはショートカットキー([Command]+[K] [Control]+[Option]+[Command]+[\]/[Ctrl]+[K] [Ctrl]+[\])が用意されています(図12)。

図12:エディターグループを開く
図12:エディターグループを開く

 タブバーにあるアイコンをクリックしても、新しいエディターグループを右に開くことができます。[Option]/[Alt]キーを押しながらクリックすると、エディターグループを下に開くことができます。

 開いているエディターグループは、プライマリサイドバーの「エクスプローラー」の「開いているエディター」で確認できます。複数のエディターグループを開いていると、「グループ1」「グループ2」のようにグループ分けしてファイルの一覧が表示されます(図13)。

図13:開いているエディターグループ
図13:開いているエディターグループ

エディターグループを閉じる

 不要になったエディターグループは適宜閉じることで、画面を有効に活用できます。エディターグループを閉じるには、タブバーの右端にあるアイコンをクリックして表示されるメニューから、[すべて閉じる]を選択します(図14)。未保存のファイルがあれば確認されますし、[保存済みを閉じる]を選択して保存が済んでいるものだけ閉じることもできます。

図14:エディターグループを閉じる
図14:エディターグループを閉じる

 それぞれ、以下のショートカットキーも使えます。

  • [すべて閉じる]:[Command]+[K][W]/[Ctrl]+[K][W]
  • [保存済みを閉じる]:[Command]+[K][U]/[Ctrl]+[K][U]

グループ内分割/統合

 エディターグループとは少し違いますが、同一のエディターグループ内で分割する機能がv1.61で追加されています。[表示]-[エディター レイアウト]から、[グループ内分割]を選択すると、新たなグループを作らずに、同一のタブ内でエディターを分割します。単に、同一ファイルの別の場所を眺めたい場合には、こちらの方が便利です。グループ内分割は、[表示]-[エディター レイアウト]から、[グループ内統合]を選択すると解除されます(図15)。ショートカットキー[Command]+[K][Shift]+[Command]+[\]/[Ctrl]+[K][Ctrl]+[Shift]+[\]も使えます(トグルになっています)。

図15:グループ内分割/統合
図15:グループ内分割/統合

 エディターグループに関する機能には、他にグループのロックがあります。ロックすると、間違ってグループを閉じてしまうことがなくなるので便利です。グループのロックは、タブバーのアイコンをクリックして表示されるメニューから、[グループをロックする]を選択します。解除も同様です。ロックされると、タブバーに鍵のアイコンが表示されますので、これをクリックしても解除できます。

今回登場のショートカットキー

今回登場したショートカットキー一覧
機能 macOS Windows
下に空行を挿入してカーソルを移動 [Command]+[Enter] [Ctrl]+[Enter]
上に空行を挿入してカーソル移動 [Command]+[Shift]+[Enter] [Ctrl]+[Shift]+[Enter]
行単位で移動 [Option]+[Shift]+[↑]または[↓] [Alt]+[Shift]+[↑]または[↓]
行単位でコピー [Option]+[↑]または[↓] [Alt]+[↑]または[↓]
行単位で削除 [Command]+[Shift]+[K] [Ctrl]+[Shift]+[K]
左方向に単語を削除 [Command]+[Backspace] [Ctrl]+[Backspace]
右方向に単語を削除 [Command]+[Delete] [Ctrl]+[Delete]
カーソルの追加(1) [Option]+クリック [Alt]+クリック
カーソルの追加(2) [Option]+[command]+[↑]または[↓] [Alt]+[Ctrl]+[↑]または[↓]
カーソルの追加(3) [Option]+[shift]+ドラッグ [Alt]+[Shift]+ドラッグ
マルチカーソルのキャンセル [esc] [Esc]
単語単位でカーソルを移動 [Option]+[←]または[→] [Ctrl]+[←]または[→]
行頭へカーソルを移動 [Command]+[←] [Home]
行末へカーソルを移動 [Command]+[→] [End]
検索 [Command]+[F] [Ctrl]+[F]
置換 [Option]+[Command]+[F] [Ctrl]+[H]
フォルダーを指定して検索 [Shift]+[Command]+[F] [Ctrl]+[Shift]+[F]
エディターグループを開く(分割(上)) [Command]+[K][Control]+[Option]+[Command]+[\] [Ctrl]+[K][Ctrl]+[\]
エディターグループをすべて閉じる [Command]+[K][W] [Ctrl]+[K][W]
エディターグループの保存済みを閉じる [Command]+[K][U] [Ctrl]+[K][U]
グループ内分割/統合 [Command]+[K][Shift]+[Command]+[\] [Ctrl]+[K][Ctrl]+[Shift]+[\]

まとめ

 今回は、VSCodeの持つ豊富な編集機能を紹介しました。自身に役立ちそうなものがあったら、ぜひ試していただいてコーディングを効率の良いものにしてください。

 次回は、VSCodeをプログラミング以外に使うための機能を紹介します。

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

  • 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」など、さまざまなカンファレンスを企画・運営しています。

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

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

メールバックナンバー

アクセスランキング

アクセスランキング