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で確認
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からダウンロードできる。