効率大幅アップ！VS Code のショートカットを社内勉強会で学習しました
MSEN では月に一度程度、社内勉強会を開催し、持ち回りや立候補で技術発表を行うことでスキルレベルの向上を図っています。
今回はソフト開発にもインフラ系にも文書作成にも役立つように 「VS Code のスキルアップ」 を目指し、ショートカットの紹介と練習を行いました。
概要
開発者向けのテキストエディター／開発環境として一躍有名となった VS Code (Visual Studio Code) 、弊社では出始めのころから業務に使用しています。
オープンソースで改良が進められ、どんどんと便利な機能が増えているにも関わらず、実行速度自体はほとんど低下していないのも人気の要因ではないかと思います。
そんな VS Code ですが、 「知っておけば超便利なショートカット」が数多く存在します。各自断片的に知っているかもしれませんが、幅広く知っておくことで組み合わせで使うことができ、より効率アップを図ることができます。
カラダになじんでくると自然と効率のいい編集ができますので、仕事全体の高速化・ストレス軽減につながると思います。
内容
発表内容は下記の GitHub リポジトリにまとめています。
今回はマルチカーソル・複数選択系を駆使して複雑な編集をミスなく高速でできるようになるように考えてショートカットを抜粋しました。
資料について
余談ですが、今回のスライドは Markdown からプレゼンに変換できる Marp を利用しました。
これまで reveal.js を使っていましたが、 VS Code では Marp のほうが便利なので、乗り換えました。
発表資料抜粋
編集系
以下、リポジトリにある 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 キャッシュの削除
- before:
課題10 のショートカット
- 選択されている文字列と一致する文字列をすべて選択に追加:
Ctrl+Shift+L
発展系
課題11
- 63 行目の
redhat_yum_confをRedhatYumConfに変更してください。
課題11 のショートカット
redhat_yum_confの一部にカーソルを移動Ctrl+Dで単語選択Ctrl+Shift+Pでコマンドパレットを開くpascalと入力して (Change Case pascalが選択される)Enter
課題12
- 63 行目の
RedhatYumConfをredhat-yum-confに変更してください。
課題12 のショートカット
redhat_yum_confの一部にカーソルを移動Ctrl+Dで単語選択Ctrl+Shift+Pでコマンドパレットを開くkebabと入力して (Change Case kebabが選択される)Enter
複雑なファイルの編集
sample.vue を開き、下記のように () 内の手数を目安に編集してください。
※複数箇所の選択は1手、カーソル移動も1手として数えます
- すべての
divタグを選択し、pタグに変更する (3手) methods(L127) の中にある関数をスネークケースに変更する (3手)- (
speakText()→speak_text()など)
- (
//からはじまるコメントをすべて削除する (4手)data(L116) のreturnの各値をすべてnullに書き換える (6手)
