全ては人の想いから生まれる
言葉にすることから始まる。 自然創造物以外、どんなものも、人の思考、願望の中から生み出された。
Tech

Visual Studio Codeの便利なショートカットなど最近知ったこと

テキストエディタいろいろ

ボーズあたま
ボーズあたま
テキストエディタ、何使ってますか?

 

PCで文章を書くときに使う、テキストエディタ。

Windowsであれば「メモ帳」がよく知られていますが、皆さん何を利用されていますか?

有名どころでいえば「秀丸」、「サクラエディタ」、「terapad」、「Notepad++」、「Sublime」、「Atom」、「Vim」、「emacs」などでしょうか。

このところ私がいいなと思うのがMicrosoftが開発しているオープンソースのエディタ「Visual Studio Code」です。

Visual Studio Code (VSCODE)の利用環境

Visual Studio Code(以下VSCODE)はMicrosoftが開発している、無料で配布されているエディタで、macOS、Windows、Linuxで利用可能です。

2015年にリリースされた、上記で挙げたいわゆる定番、老舗といわれるエディタと比較するとまだまだ新しいエディタです。

以下がマイクロソフトのVSCODEのサイトです(ダウンロードリンクあり)

https://azure.microsoft.com/ja-jp/products/visual-studio-code/

ボーズあたま
ボーズあたま
mac、windows、linuxどのOSでも使えるのはありがたいね。Windowsの人は使えない。macの人は使えないとかストレスだし。

Visual Studio Code (VSCODE)の利点

  • オープンソースで開発されており、現在も日々改良が続けられている
  • 文字列の補完や文字列の比較(diff)、マルチカーソル(複数個所を同時編集)など、エディタとしての基本機能が充実しており、初心者にもやさしく利用できる
  • 様々なユーザが開発した拡張機能を入れることで、自分なりにカスタマイズして利便性を簡単に上げることができる
ボーズあたま
ボーズあたま
ふーん。テキストエディタなんて今更新しいものは出てこない枯れたものと思ってたけど、勢いありそうね。

便利な機能、ショートカット

同一ファイルを左右に並べて確認しながら編集する

ボーズあたま
ボーズあたま
長いファイルを編集する際、初めの方の記述をスクロールして先頭部分まで戻って確認、コピーして、戻るなんてことありませんか?
あ~。あるある。スクロールして前まで戻って確認して、またスクロールして元の場所まで戻ってくるの、結構手間だよね。

 

そんなとき、同一のファイルを画面の左右に並べて左にファイル前半、右にファイル後半部分を置いて、ファイルの前半部分の期日を確認したり、コピーしたりしながら、右側のファイル後半を編集できたら便利ですよね。

 

以下のように画面右上の「Split Editor Right」(画面を右に分割)のアイコンを押します。

 

すると、全く同じファイルを左右に並べて、前半部分などを参照しながらファイルを編集することができます。

画面を縦に並べたり、さらには3分割したり、いろんな並べ方もできるんだね

上下での画面分割、3分割以上の分割やそれらの組み合わせも可能

行ごとカットして別行に移動

ボーズあたま
ボーズあたま
文章を書いていると一行切り取って、別の行に行ごと移動するなんてことありませんか?
文章に限らず、HTML、CSSの編集などでもよくあるね
ボーズあたま
ボーズあたま
こんなとき、該当行をコピーして、移動先にカーソル移動してからペーストしていると思うけど、VSCODEならこれがキーボードだけの簡単操作でできます
そんなことが…?

該当行にカーソルがある状態で
Alt + or

ボーズあたま
ボーズあたま
Altキーを押したまま、↑ や ↓ を複数回押すと任意の行まで行ごと移動ができます。もちろん複数行を選択しておいて、まとめて移動も可能。
これは地味に便利!!

行をコピーして前もしくは後ろの行にそのまま追加

ボーズあたま
ボーズあたま
ある行をコピーしてその後ろや前の行にペーストするなんてこともあるよね
一行コピーして、ペースト、改行してまたペーストを繰り返すなんてよくあるね
ボーズあたま
ボーズあたま
それもキーボードだけで以下のようにすれば瞬殺できます。

該当行にカーソルがある状態で
Shift + Alt  or

行削除

ボーズあたま
ボーズあたま
行ごと丸ごと削除したい場合は以下でOK

該当行にカーソルがある状態で
Ctrl + Shift + K

これもすごい使えそう。。
ボーズあたま
ボーズあたま
Vimなんかだとdd で行ごと切り取るなんてことやるけどそれに似てるかな

マルチカーソルで複数の同一文言を一括編集

ボーズあたま
ボーズあたま
ファイル内の同じ文字列を編集する場合は、検索して置換するのもいいですが、同一文字列に同時にカーソルを当てて、編集することが可能です

 

現在カーソルがある位置の単語を一括全選択

該当の文字列にカーソルがある状態で
Ctrl + Shift + L

ちなみに同一の複数文字列を選択するには以下のやり方で、1つずつ対象に選択することができます。

同一の複数文字列を1つずつ順に選択

該当の文字列を選択した状態で
Ctrl + D

複数選択した文字列の末尾にカーソルを当てる

該当の文字列を選択した状態(上記2つの例のいずれかで実施)で
Ctrl + Shift + I

ちなみに複数選択した文字列の末尾にカーソルが当たった状態になったら、
Home で行頭、End で行末に全カーソルを持っていくことができます。

矩形選択

矩形選択を行う場合は、以下で可能です。

キーボードで矩形選択を開始

Ctrl + Alt + Shift + ↑→↓←

マウスで矩形選択を開始

Alt + Shift + 左ドラッグ

参考サイト

クリックするとブラウザの別タブで開きます

↓↓↓基本機能の解説が丁寧。JIF画像で実際の画面の動きが分かりやすいです

Visual Studio Codeのうれしい機能を使いこなして、初心者を最速で脱出する!《VSCode実践入門》

↓↓↓VSCODEのインストールから丁寧に説明されている動画(初めての方にお勧め)

(全9回)Visual Studio Code入門動画一覧

【動画】Visual Studio Code入門 #01:環境設定と、VSCodeの起動方法いろいろ