もた日記

くだらないことを真面目にやる

Visual Studio Codeメモ : 対話型プレイグラウンドで代表的な機能を試す

※Windows 10、Visual Studio CodeのVersion1.38で確認

Welcomeページの「Interacitve playground」または「Help」→「Interactive playground」で表示される対話型プレイグラウンドではVisual Studio Codeの代表的な機能を試すことができる。

f:id:wonder-wall:20191006163634p:plain

Multi-cursor Editing

マルチカーソルを使うことで複数個所を一気に編集できる。

  • Ctrl+Shift+Alt+↑/→/↓/← : 矩形選択
  • Shift+Alt: マウスで矩形選択
  • Ctrl+Alt+↑/↓ : 上/下にマルチカーソルを追加
  • Alt+Click : マウスでマルチカーソルを追加
  • Ctrl+Shift+L : カーソルがある文字列を全て選択(下の例ではbackground-color

f:id:wonder-wall:20191006175839p:plain

その他のマルチカーソルのキーボードショートカットはCtrl+K Ctrl+Rで表示されるリファレンスの「Multi-cursor and selection」で確認可能。

IntelliSense

JavaScriptとTypeScriptについてはプレインストールされているが、他の言語については各言語の拡張機能をインストールする必要があるとのこと。
基本的には入力に応じて表示されるが、明示的に表示したい場合は下記。

  • Ctrl+Space : IntelliSenseの表示

f:id:wonder-wall:20191006180312p:plain

Line Actions

行に対する操作としては下記がある。

  • Shift+Alt+↑/↓ : カーソルがある行を上/下にコピー
  • Alt+↑/↓ : カーソルがある行を上/下に移動
  • Ctrl+Shift+K : カーソルがある行を削除
  • Ctrl+/ : 選択中の行のコメントアウト/アンコメント

Rename Refactoring

関数名や変数名のリネームはF2または右クリックのコンテクストメニューから可能。リネームはプロジェクト内の全ファイルに対して実行されるとのこと。

  • F2 : シンボルのリネーム

f:id:wonder-wall:20191006164519p:plain

Formatting

ソースコードのフォーマット(コード整形)は下記または右クリックのコンテクストメニューから可能。追加のFormatterは拡張機能からインストールできる。

  • Shift+Alt+F : ファイル全体のフォーマット
  • Ctrl+K Ctrl+F : 選択範囲のフォーマット

Code Folding

ソースコード折り畳み操作としては下記がある。

  • Ctrl+Shift+[/] : カーソルがある範囲に対してフォールド/アンフォールド
  • Ctrl+K Ctrl+0 : 全てをフォールド
  • Ctrl+K Ctrl+J : 全てをアンフォールド

Errors and Warnings

波線が表示されているエラー、警告はF8で移動できる。

  • F8 : 次のエラー、警告を表示
  • Shift+F8 : 前のエラー、警告を表示

f:id:wonder-wall:20191006174538p:plain

Snippets

例えばtryと入力して表示されるtrycatchを選択してTabを押すとスニペットが展開される。 f:id:wonder-wall:20191006173533p:plain

try {
    
} catch (error) {
    
}

各言語のスニペットは拡張機能でインストールする必要があるとのこと。
また、ユーザー定義のスニペットはCtrl+Shift+PのコマンドパレットからConfigure User Snippetsで編集できる。

Emmet

Emmetとは既定形式の入力補完機能によりHTML、XML、XSL等を素早く編集できるテキストエディタ用プラグインのこと。
例えば下記を入力した後で「Edit」→「Emmet: Expand Abbreviation」を選択すると、

ul>li.item$*5

下記に展開できる。

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

なお、Tabキーで展開できるようにするにはemmet.triggerExpansionOnTab設定を有効にする必要がある。

参考:Emmetのチートシート

JavaScript Type Checking

ファイルの先頭に下記コメントを追加することでTypeScriptのタイプチェッカーをJavaScriptコードに対して実行できる。

// @ts-check

ワークスペース全体に適用する場合は`javascript.implicitProjectConfig.checkJs": true設定を有効にすればよいが、詳しくはJavaScript in Visual Studio Codeを参照。

以上のように対話型プレイグラウンドでは代表的な機能を試すことができる。キーボードショートカットは忘れることがあると思うのでその場合は下記でキーボードショートカットを表示できる。

  • Ctrl+K Ctrl+R : キーボードショットリファレンス