Vsidual Studio Code の便利な使い方

Vsidual Studio Code の便利な使い方を学ぶ

まずは，ヘルプから対話型プレイグラウンド（Editor Playground）を開きます．

Editor playground の開始画面

ちなみに，ショートカットの一覧は，以下のURLから確認できます．

Mac用：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf

Windows用：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

それでは，順番に見ていきます．（Macのみの説明となりますのでご了承願います）

Multi-Cursor Editing：選択

1. 行をそのままコピペ：Shift＋Option＋矢印キー（上か下）

2. 複数カーソル選択：Option＋クリックまたはCtrl＋Shift＋上下矢印キー

3. 同じ文字を同時に選択：文字を選択後，Ctrl＋Command＋G（Groupeと覚えます）．以下，同様の表現が表示されています．

IntelliSense：コマンド入力の補助

コマンド後のドット”．”に続くオプション候補一覧を表示：Ctrl＋Space
※Macの場合，キーが効かないことがあるため，下図のように入力ソースのチェックを外してください．

Macの環境設定

Line Actions：行の編集

1. 行をコピペ：Shift＋Command＋D（Double）または　Shift＋Option+矢印（上下）

2. 行を移動：Ctrl＋Command＋矢印キー（上下）

3. 行を削除：Ctrl+Shift＋K（Kill）

Rename Refactoring：名前の一括変更

キーワード全てを一括編集：カーソルを目的の文字に置き，F2

Formatting：改行後のタブスペース自動調整

コマンドのタブを整形：Shift＋Option＋F（Format）またはCommand＋K（キー操作）の後で，Command＋F（Format）

Code Foldig：コマンドごとに折り畳む

カーソルを置き，Option +Command+ [ キーで折り畳み，] キーで折り畳んだ部分を広げる．

Errors and Warnings：エラーチェック

F8キーでコマンドのエラーチェックウィンドウが出てきます．

Emmet：コードでコマンドを展開する

例えば，以下のようにコマンドを作成し，カーソルをコマンドへ置き，編集メニューからEmmet：Expand Abbrevationを選ぶと，数式からコードへ変換されます．
サンプルコード

ul>li.item$*5

Emmetの実行後

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>

JavaScript Type Checking：コードチェックを自動で行う

以下のコマンドをファイルの1行目に入れておくと自動でエラーチェックしてくれます．

// @ts-check

（ちなみに，// @ts-nocheckとすると，エラーチェックをしません）