効率大幅アップ!VS Code のショートカットを社内勉強会で学習しました

MSEN では月に一度程度、社内勉強会を開催し、持ち回りや立候補で技術発表を行うことでスキルレベルの向上を図っています。

今回はソフト開発にもインフラ系にも文書作成にも役立つように「VS Code のスキルアップ」を目指し、ショートカットの紹介と練習を行いました。

概要

開発者向けのテキストエディター/開発環境として一躍有名となった VS Code (Visual Studio Code) 、弊社では出始めのころから業務に使用しています。

オープンソースで改良が進められ、どんどんと便利な機能が増えているにも関わらず、実行速度自体はほとんど低下していないのも人気の要因ではないかと思います。

そんな VS Code ですが、「知っておけば超便利なショートカット」が数多く存在します。各自断片的に知っているかもしれませんが、幅広く知っておくことで組み合わせで使うことができ、より効率アップを図ることができます。

カラダになじんでくると自然と効率のいい編集ができますので、仕事全体の高速化・ストレス軽減につながると思います。

内容

発表内容は下記の GitHub リポジトリにまとめています。

今回はマルチカーソル・複数選択系を駆使して複雑な編集をミスなく高速でできるようになるように考えてショートカットを抜粋しました。

資料について

余談ですが、今回のスライドは Markdown からプレゼンに変換できる Marp を利用しました。

これまで reveal.js を使っていましたが、 VS Code では Marp のほうが便利なので、乗り換えました。

発表資料抜粋

発表資料 の内容を紹介します。 PDF 版はこちら です。

編集系

以下、リポジトリにある sample.yml を使って step by step で進めました。


課題1

  • 7 行目の command あたりにカーソルをおいたまま、その行の下に空行を追加してください。

課題1 のショートカット

  • 現在のカーソル行の下に空行を追加: Ctrl + Enter

課題2

  • 7 行目の command あたりにカーソルをおいたまま、その行の上に空行を追加してください。

課題2 のショートカット

  • 現在のカーソル行の上に空行を追加: Ctrl + Shift + Enter

課題3

  • 22 行目の mode の行を 21 行目の remote_src の行と入れ替えてください。

課題3 のショートカット

  • 現在のカーソル行・選択行を前後の行と入れ替え: Alt + /

  • では現在のカーソル行・選択行を コピー するには?


課題4

  • 10 行目をコピーして 15 行目の下にペーストしてください。

課題4 のショートカット

  • 現在のカーソル行をコピー: (非選択状態で) Ctrl + C
  • 現在のカーソル行を切り取り: (非選択状態で) Ctrl + X
  • クリップボードの行をペースト: (非選択状態で) Ctrl + V

選択系


課題5

  • 19 行目の /etc/zabbix の部分を選択してください。

課題5 のショートカット

  • 単語単位で選択を拡張/縮小: Ctrl + Shift + /

課題6

  • 26 行目の lineinfile の部分を先ほどとは違う方法で選択してください。

課題6 のショートカット

  • 単語単位で選択: Ctrl + D

課題7

  • 27 行目の全体を選択してください。

課題7 のショートカット

  • 行単位で選択: Ctrl + L

マルチカーソル系


課題8

  • 27 行目から 30 行目の先頭をまとめて選択して # を挿入してください。

課題8 のショートカット

  • マルチカーソルを上/下に広げる: Ctrl + Alt + /
  • Shift を足すと矩形選択が可能

課題9

  • 26 行目の lineinfile を選択したまま 34 行目の lineinfile も選択してください。

課題9 のショートカット

  • 選択されている文字列を選択に追加: Ctrl + D

課題10

  • ファイル内のすべての - name: を選択し、直後に Zabbix と追加してください。
    • before: - name: yum キャッシュの削除
    • after: - name: Zabbix yum キャッシュの削除

課題10 のショートカット

  • 選択されている文字列と一致する文字列をすべて選択に追加: Ctrl + Shift + L

発展系


課題11

  • 63 行目の redhat_yum_confRedhatYumConf に変更してください。

課題11 のショートカット

  1. redhat_yum_conf の一部にカーソルを移動
  2. Ctrl + D で単語選択
  3. Ctrl + Shift + P でコマンドパレットを開く
  4. pascal と入力して (Change Case pascal が選択される) Enter

課題12

  • 63 行目の RedhatYumConfredhat-yum-conf に変更してください。

課題12 のショートカット

  1. redhat_yum_conf の一部にカーソルを移動
  2. Ctrl + D で単語選択
  3. Ctrl + Shift + P でコマンドパレットを開く
  4. kebab と入力して (Change Case kebab が選択される) Enter

複雑なファイルの編集

sample.vue を開き、下記のように () 内の手数を目安に編集してください。
※複数箇所の選択は1手、カーソル移動も1手として数えます

  • すべての div タグを選択し、 p タグに変更する (3手)
  • methods (L127) の中にある関数をスネークケースに変更する (3手)
    • (speakText()speak_text() など)
  • // からはじまるコメントをすべて削除する (4手)
  • data (L116) の return の各値をすべて null に書き換える (6手)

SNSでもご購読できます。

コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください