概要
Visual Studio Code(以下VSCode)のショートカットチュートリアルを作成しています。
現状Windows版のみ対応ですが、ショートカットの練習・勉強にお役に立てれば幸いです。
モチベーション
Visual Studio Code (以下VSCode)はマイクロソフトが提供するクロスプラットフォームなエディタです。
VSCodeは軽量で動作しながら、IDEと同じような開発を可能にする強力なエディタです。
2019年12月11日現在、Qiita Advent Calender 2019ランキングでも購読者数が全体の2番目であり、とても人気が高まっています。
VSCodeはショートカットを学ばなくとも使うことはできます。しかしプロフェッショナルな開発者たるもの、エディタは手足のように使えるものだと思っています。
ですが私のような初心者には、ただチートシートやドキュメントを見ていても中々身につかなかったり、どういう時にこのショートカットを使うといいのか分からないということがあります。
そこで、かの有名なVimtutorを参考に、手を動かしてショートカットを練習できるチュートリアルを作成しようと思いたちました。
作成物
チュートリアルはファイルごと編集を試せるようにGithubで公開しています。
以下はチュートリアルの一部になります。
VSCode_tutor.txt
====================================================
VS Code ショートカット チュートリアルへようこそ!!!!
Ver 0.5.0
====================================================
Visual Studio Code(以下VSCode)はマイクロソフトが提供するクロスプラットフォームなエディタです。
VSCodeは軽量で動作しながら、IDEと同じような開発を可能にする強力なエディタです。
詳細に操作を学ばなくとも使うことはできます。しかしプロフェッショナルな開発者たるもの、エディタは手足のように使えるようになることが必要だと思いませんか?
そこで、より効率的に扱う為に様々なショートカットやコマンドを体験・習得することを目的として、このチュートリアルを作成しました。一緒に頑張りましょう!
ATTENTION:
以下の練習用コマンドにはこの文章を変更するものもあります。練習を始める前にコピーを作成しましょう。
言語モードはプレーンテキストで開いているものとして説明していきます。また、コマンドは半角英数の状態で入力することに注意してください。
では、十字キーの下↓で進みましょう。
(集中をしたい方はZenモード[Ctrl + K Z]にすると良いでしょう。ZenモードはEscで解除されます)
(1) 移動編
VSCodeのファイルを開き、ソースコードを編集するメインエリアをエディタ(エディタグループ)と呼びます。
まずは、エディタにおける移動ショートカットから始めましょう。
1-1 カーソル移動(↑/↓/←/→)
カーソルの基本移動は十字キーです。1文字単位で移動します。
1-2 便利な移動(1)
## Ctrl + ↑/↓
カーソルを動かさずに画面をスクロールします
## Ctrl + ←/→
単語単位で移動します
レッスン 1-2-1
カーソルを動かさずに、このファイルの先頭のタイトルをみて、!マークの数がいくつあるか確認しましょう
レッスン 1-2-2
単語単位で移動してみましょう
aaa bbbb ccc dddddddd ccc dddd eee ffff ggggggg hhhhhhh iiiiiiii j kkkkkkkkkkkk llllllllllll mmmmmmmmm nnn ppppp qqqqqqqqqqqq rrr
1-3 便利な移動(2)
## Ctrl + Home
ファイルの先頭に移動します
## Home
行の先頭に移動します
折り返しがある場合は、折り返しからその行の先頭へ移動します
## Ctrl + End
ファイルの末尾に移動します
## End
行の末尾に移動
折り返しがある場合は、折り返しの位置まで移動します
レッスン 1-3-1
ファイルの末尾に移動してみましょう
レッスン 1-3-2
以下の行の末尾に移動して戻ってみましょう
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
(2) コマンド編
VSCodeをキーボードで操作するコツはパレット(コマンドパレット)を使いこなすことです。
パレットを使いこなす練習をしていきましょう!
2-1 パレットの表示とデフォルト
## Ctrl + P
ファイルへ移動するパレット(一番デフォルトのパレット)。
最近開いたファイルを開く、もしくはファイルをワークスペースから検索して開くことができます。
ファイル名、シンボルなどで検索できます。
Enterでそのファイルを開いてパレットを閉じます。
→でパレットを開いたままファイルを開くことができ、複数ファイルを開けることもできます。
Escもしくは、エディタの範囲をクリックで閉じます。
レッスン 2-1
パレットを開いてReadme.mdを開いてみましょう
2-2 パレットのコマンド
パレットにコマンドを使うことで、様々な機能が扱うことができます。それを練習してみましょう。
2-2-1 パレットのコマンド(1)
## パレットで> でコマンドパレット
コマンドパレットは Ctrl + Shift + P でも開けます。
ショートカットコマンドの検索や、言語ごとのコマンドを検索し、実行できます。
レッスン 2-2-1-1
さきほど開いたReadMe.mdを開き、コマンドパレットを使ってMarkdownのプレビューを表示してみましょう
(markdownのファイルを開いた状態で、コマンドパレット内でmarkdownと打てばでてきます)
## パレットで# でワークスペース内のシンボルへ移動
Ctrl + T でも開けます
ここでいうシンボルとはシンタックスハイライトで色付けされる単語・キーワードと考えておきましょう
レッスン 2-2-1-2
さきほど開いたReadMe.mdにあるsymbol command testシンボルを検索してみましょう
## パレットで@ でファイル内のシンボルへ移動
Ctrl + Shift + O で開くこともできます。
調べる範囲で使いわけましょう。
## パレットで: 数値を入れてで行移動
Ctrl + Gでも開けます。
エラー表示の行数へ移動する時などに役に立ちます。
レッスン 2-2-1-3
50行目に行って戻ってきてみましょう
## パレットで? でパレットで利用できる機能のヘルプ
ここまでのコマンドを覚えていなくてもヘルプをみることができます。
2-2-2 パレットのコマンド(2)
先ほどのヘルプの残りであった、単語を入力することで利用できる機能でよく使うものを紹介します。
パレットで規定の単語 + Space で機能を利用することができます。
## edt
今のウィンドウで開いているファイルから選択し、フォーカスを変えることができます。
## edt active
今のエディタグループ(エディタを分割したときの単位)で開いているファイルを選択し、フォーカスを変えることができます。
似た機能に Ctrl + Tabでエディタグループ内のフォーカスを変えることができます
レッスン 2-2-2-1
別のファイルを開き、フォーカスを切り替えてみましょう
## view
表示可能なサイドバー・パネルを選んで表示できます。
各項目ごとによっては、それを表示するショートカットが存在します。
レッスン 2-2-2-2
ターミナルをパレットから開いてみましょう
(ターミナルは Ctal + @でも開閉できます)
まとめ
VSCodeのショートカットチュートリアルを作成しています。
現状Windows版のみ対応ですが、ショートカットの練習・勉強にお役に立てれば幸いです。
いいね！やリポジトリにスターがもらえると励みになるのでよろしければお願いします。