最近元気なVSCode。Atom等の既存のエディタを追い抜いて、最近では、一番使われているエディタにランキングされることも珍しくありません。以前はAtom一辺倒だったぼくも今は、断然VSCode派です。そんなVSCodeでコードを書く時に知っていれば便利なショートカットをさくっと２０個ほど紹介します。
- VSCode（Visual Studio Code)
- VSCodeのショートカット
- １ 単語を選択
- ２ ターミナルを開く
- ３ リロード
- ４ カーソルの前もしくは後の全てを選択
- ５ 表示されているテキスト内での検索
- ６ 表示されているテキスト内での置換
- ７ プロジェクトディレクトリー内の全てのファイルを対象とした検索・置換
- ８ 直前に入力した単語を削除
- ９ 行を上下に移動
- １０ カーソルがある行の下もしくは上に行を挿入
- １１ 行の複製
- １２ 一番上もしくは一番下にカーソルを移動
- １３ 行の一番右もしくは左にカーソルを移動
- １４ クリックした場所にカーソルを挿入（マルチカーソルその１）
- １５ カーソルを上・下に挿入（マルチカーソルその２）
- １６ カーソルがある単語と同じ単語の場所にカーソルを挿入（マルチカーソルその３）
- １７ サイドバーの表示・非表示切り替え
- １８ コメントへの変換（コメントアウト）
- １９ 設定画面を開く
- ２０ コマンドパレットを開く
- まとめ
VSCode（Visual Studio Code)
初めに簡単に、VSCodeそのものの解説をします。VSCode（Visual Studio Code)はマイクロソフトが開発したソースコードエディタで無料で利用することができます。Windows、LinuxおよびmacOS上で利用でき、2015年11月18日にリリースされた比較的新しいエディタです。シンタックスハイライト、インテリセンス、スニペット、リファクタリング等の機能を持ち、利用者はエディタのテーマやキーボードショートカット等のカスタマイズを容易に行うことができます。
それでは、有用なショートカットを紹介していきますね。ショートカットを有効に使ってVSCodeを使い倒して、効率的に作業しましょう。
VSCodeのショートカット
１ 単語を選択
単語にカーソルを置いてダブルクリックすると単語を選択できます。ショートカットと言えるのかよくわかりませんし、皆さんご存知だと思いますが、とても便利なので一応念のため、書いときますね。
２ ターミナルを開く
「control」＋「｀」（バックコーテーション）を押すことで、VSCodeからターミナルを開くことができます。また、ターミナルを開いた状況で同じ動作をすれば、ターミナルを閉じることができます。これ、とっても便利です。
３ リロード
「command」＋「R」でリロードを行います。ぼくが最も頻繁に使っているショートカットの１つです。
４ カーソルの前もしくは後の全てを選択
「command」＋「shift」＋「上または下矢印」で、カーソルの前全部もしくは後全部を選択することができます。このショートカットはそれらを削除したいときによく使うと思います。
５ 表示されているテキスト内での検索
「command」＋「F」で表示テキスト内の検索ができます。検索対象が複数ある場合に「command」＋「G」で次の検索箇所に、「command」＋「shift」＋「G」で前の検索箇所に移動します。
６ 表示されているテキスト内での置換
「command」＋「option」＋「F」で表示テキスト内の置換ができます。
７ プロジェクトディレクトリー内の全てのファイルを対象とした検索・置換
「command」＋「shift」＋「F」でサイドバーが展開し、プロジェクトディレクトリー内の全てのファイルを対象とした検索ができます。
また、以下のスクショのように左の矢印をクリックすることにより、置換用のテキストボックスが開き、プロジェクトディレクトリー内の全てのファイルを対象とした置換ができます。
８ 直前に入力した単語を削除
「option」＋「delete」で文字単位でなく、単語単位で直前に入力した単語を削除できます。
９ 行を上下に移動
「option」＋「上または下矢印」にて、カーソルのある行を上下に移動することができます。複数行を選択すると選択した複数行を一括して移動できます。
１０ カーソルがある行の下もしくは上に行を挿入
「command」＋「enter」にて、カーソルが行末になくても、カーソルがある行の次に行を挿入することができます。
上に行を追加したい場合は「shift」を追加して、「command」＋「shift」＋「enter」を実行します。
１１ 行の複製
「option」＋「shift」＋「上または下矢印」にて、選択行を上または下の複製できます。複数行の複製も可能です。
上記の行の移動に「shift」を足すと行の複製と思えば、覚えやすいですね。
１２ 一番上もしくは一番下にカーソルを移動
「command」＋「上または下矢印」にて、カーソルを表示中のテキストの一番上もしくは一番下にカーソルを移動できます。
１３ 行の一番右もしくは左にカーソルを移動
「command」＋「上または下矢印」にて、カーソルがある行の一番右もしくは一番左にカーソルを移動できます。
１４ クリックした場所にカーソルを挿入（マルチカーソルその１）
「option」＋「クリック」でクリックした場所にカーソルが追加で挿入されます。マルチカーソルを解除するには「esc」か画面の別の部分をクリックすればOKです。
１５ カーソルを上・下に挿入（マルチカーソルその２）
「command」＋「option」＋「上または下矢印」にて、カーソルを上または下の行に複製することができます。
１６ カーソルがある単語と同じ単語の場所にカーソルを挿入（マルチカーソルその３）
「command」＋「D」にて、カーソルがある単語の同じ単語の場所にカーソルを１つづつ複数することができます。同じ単語がある限り、このショートカットを続けるとカーソルが増えていきます。
また、「command」＋「shift」＋「L」で同じ単語のある場所すべてにカーソルを複製できます。
複数個ある単語の一部を一括して同じ単語に変更したい場合に大変便利です。
１７ サイドバーの表示・非表示切り替え
「command」＋「B」にて、サイドバーの表示。非表示を切り替えます。これもぼくがよく使うショートカットの１つです。
１８ コメントへの変換（コメントアウト）
「command」＋「/」にて、選択されたコードの部分をコメント文に変換します。コメント文を選択して同じショートカットを実行するとコード文に変換されます。
１９ 設定画面を開く
「command」＋「,」（カンマ）にて、設定画面を開きます。
２０ コマンドパレットを開く
「command」＋「shift」＋「P」にて、コマンドパレットを開きます。コマンドパレットを閉じるには、「esc」かコマンドパレット以外の場所をクリックすればOKです。
また、ショートカットを忘れた時にコマンドパレットから調べることができます。
まとめ
使って便利なショートカットを２０個紹介して見ました。基本的なものばかりですが、これらを駆使できればキーボードから手を離さずにかなり作業できると思います。
それでは最後までお付き合い、ありがとうございました。さようなら。
おすすめプログラミングスクール
テックキャンプ エンジニア転職
ビジネス系YouTuberとして著名なマコなり社長が社長を務める株式会社Divが運営するTECH CAMP。
やり切れる教材と就職までのサポートが大きな強めです。
また、受講の際には各自Macを準備する必要があります。（有料でレンタルあり）就職できなければ授業料返還の保証がありますが、39才以下との条件があります。ご注意ください。
費用は短期集中で一括払いで総額税抜648,000円、夜間・休日で848,000円と安くない費用になります。
コロナの影響で閉鎖していた教室もマスク着用などの条件付きで、全室、2020年11月2日より使用可能になりました。
眺めていても何も始まりません。これを機に、まずは以下のリンクから無料カウンセリングを受けられてみてはいかがでしょうか。
■教育について ・圧倒的コミット量と網羅性 テックキャンプ エンジニア転職は600時間をかけてフロント/サーバーサイド/インフラ全てを一通り学びます。
■サポート体制について ・学習環境 オンライン問わずメンターに質問し放題なため、途中で諦めてしまうことがありません。 ・専属のトレーナーの存在 トレーナーは毎週の学習計画の作成、日々の進捗確認、 キャリアアドバイザーへのフィードバックなど期間中は二人三脚となってサポートします。 ・専属のキャリアアドバイザー 毎週のキャリア面談、面接対策や履歴書の添削、企業提案など転職が決定するまでサポートし続けます。 また、企業に入社した後も半年間であれば無料でキャリア相談を受け付けています。
受講スタイル：通学またはオンライン
場所：東京（渋谷）、大阪、名古屋、福岡
価格：
入会金不要で月々21,200円（税込）から、一括は648,000円（税抜）（短期集中）
主な学習言語：HTML/CSS、JavaScriptRuby on Rails等
期間：短期集中で10週間、夜間・休日で6ヶ月
コメント