Visual Studio Codeメモ : Tips and Tricksを確認する（2）

• Editing hacks
• IntelliSense
• Snippets
• Git integration
• Debugging
• Task runner
• Portable mode
• Insiders build

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

code.visualstudio.com

Editing hacks

Editing hacksはマルチカーソルなど編集効率を上げる方法の紹介。

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

編集関連。

• Shift+Alt+↑/↓ : カーソルがある行を上/下にコピー
• Alt+↑/↓ : カーソルがある行を上/下に移動
• Shift+Alt+←/→ : 選択範囲の縮小/拡大
• Ctrl+K Ctrl+X : 行末の空白を削除
• Ctrl+K Ctrl+F : 選択範囲のフォーマット（コード整形）
• Shift+Alt+F : ファイル全体のフォーマット（コード整形）
• Ctrl+Shift+[/] : カーソルがある範囲に対してフォールド/アンフォールド
• Ctrl+L : 現在行の選択

移動関連。

• Alt : 押しながらで高速スクロール
• Ctrl+Shift+O : ファイル内のシンボルへ移動（@:でシンボルをグルーピング）
• Ctrl+T : ワークスペース内のシンボルへ移動
• Ctrl+G : 表示されるボックスに入力した行番号に移動
• Ctrl+U : 前のカーソル位置に移動
• Ctrl+Home : ファイル先頭に移動
• Ctrl+End : ファイル末尾に移動

Markdown関連。

• Ctrl+Shift+V : Markdownファイルでプレビューを表示
• Ctrl+K V : Markdownファイルで横並びでプレビューを表示

IntelliSense

IntelliSenseはインテリセンスの使い方。定義へ移動などは右クリックのコンテクストメニューからも選択できる。

• Ctrl+Space : 候補を表示
• Alt+F12 : 定義をここに表示
• F12 : 定義へ移動
• Ctrl+click : 定義へ移動
• Alt+←/→ : 前/次のカーソル位置へ移動
• Shift+F12 : 参照をここに表示
• Shift+Alt+F12 : すべての参照を検索
• F2 : シンボルの名前変更

検索と置換。

• Ctrl+F : 検索
• Ctrl+H : 置換
• Alt+R : 検索、置換で正規表現を使用 （$1, $2なども使える）

Snippets

Snippetsはユーザー定義のスニペット作成方法について。
「File」→「Preferences」→「User Snippets」かCtrl+Shift+Pコマンドパレットの「Configure User Snippets」で言語を選択すると、各言語のJSONファイルが開くので以下のようにスニペットを定義する。
この例だとcomponentでスニペット展開できるようになる。
ユーザー定義のスニペットの詳細はSnippets in Visual Studio Codeを参照。

"create component": {
    "prefix": "component",
    "body": [
        "class $1 extends React.Component {",
        "",
        "\trender() {",
        "\t\treturn ($2);",
        "\t}",
        "",
        "}"
    ]
},

Git integration

Git integrationはGit連携の説明。Marketplaceから他のSCM Provider（SVNなど）をインストールすることもできる。

• Ctrl+Shift+G : SCMサイドバーを開く
• SCMサイドバーのファイルをクリックすると差分を表示

• 右上の「More Actions...」→「Toggle Inline View」で差分をインライン表示
• "diffEditor.renderSideBySide": falseでデフォルトをインライン表示に変更

• F7/Shift+F7 : 次／前の差分に移動
• Enter: 差分エディタで選択行を表示

• ステータスバー（左下）からブランチを変更
• サイドバーの+ボタンでStaging
• Ctrl+Shift+Pのコマンドパレットの「Git: Stage Selected Ranges」で部分的にStaging
• 「More Actions...」の「Undo Last Commit」で直前のコミットを元に戻せる
• Ctrl+Shift+UでOutputビューを表示して「Git」を選択すると実行しているGitコマンドを確認可能
• エディタに表示される差分のシンボルの意味は、
  • 「赤い三角形」：削除された行
  • 「緑のバー」：追加された行
  • 「青のバー」：編集された行
• マージコンフリクトはSCMサイドバー（Ctrl+Shift+G ）の差分エディタで解消できる
• 以下の設定でVisual Studio Codeをデフォルトのマージツールとして使用

git config --global merge.tool code

Debugging

Debuggingはデバッガの使い方の説明。

• Ctrl+Shift+Pのコマンドパレットの「Debug: Open launch.json」でデバッグ設定ファイルを編集

• エディタの行番号の横をクリックでブレークポイント設定
• ステップインなどはデバッグウィジェットで操作
• 変数の値などはデバッグパネルで確認可能
• "debug.inlineValues": true設定で変数の値をインラインで表示（キャプチャ参照。ただし、重いので遅くなる可能性あり）
• デバッグの詳細はDebuggingを参照

Task runner

Task runnerはタスクランナーの使い方の説明。

• トップメニュー「Terminal」の「Configure Tasks...」でタスク設定ファイル（tasks.json）を開く

• トップメニュー「Terminal」の「Run Task...」でタスクを実行
• トップメニュー「Terminal」の「Terminate Task...」でタスクを停止
• Ctrl+Shift+Pのコマンドパレットの「Preferences: Open Keyboard Shortcuts (JSON)」でタスクにキーボードショートカットを設定可能
  • commandにworkbench.action.tasks.runTaskを設定して、argsにタスク名を設定する

{
  "key": "ctrl+h",
  "command": "workbench.action.tasks.runTask",
  "args": "echo"
}

• "npm.enableScriptExplorer": true設定でエクスプローラからnpmスクリプトをタスクとして実行
• "npm.scriptExplorerAction": run設定でクリック時にファイルを開く代わりにタスクを実行
• タスクランナーの詳細はIntegrate with External Tools via Tasksを参照

Portable mode

Portable modeは設定やデータを同じ場所に保存してUSBメモリなどで持ち運びやすくするモード。
詳細はPortable modeに書いてあるが、ZIP圧縮されたVisual Studio Codeを使って、以下のようにdataフォルダを作成するだけでよいとのこと（dataフォルダに設定などが保存される）。

|- VSCode-win32-x64-1.25.0-insider
|   |- Code.exe (or code executable)
|   |- data
|   |- ..

Insiders build

Insiders buildsは最新機能を試したいとき用のバージョン。
Download Visual Studio Code Insidersからダウンロードできる。

wonderwall.hatenablog.com