Visual Studio Codeメモ : Tips and Tricksを確認する(1)
※Windows 10、Visual Studio CodeのVersion1.38で確認
Basics
Basicsは基本的な操作の説明。
- 「Help」→「Interactive playground」で代表的な機能を試すことができる
Ctrl+Shift+P
: コマンドパレットを表示- コマンドパレットには右側にキーボードショートカットも表示される
Ctrl+K Ctrl+R
: キーボードショートカットリファレンスを表示Ctrl+P
: クイックオープン(さらに?
でヘルプ表示)- クイックオープンでは
→
でバックグラウンドで表示
Command Line
Command Lineはcode
というCLIの使い方の説明。
code
というCLIで以下のような起動オプションが指定可能tasks.json
のようなWorkspace特有のファイルは.vscode
フォルダに保存される
# open code with current directory code . # open the current directory in the most recently used code window code -r . # create a new window code -n # change the language code --locale=es # open diff editor code --diff <file1> <file2> # open file at specific line and column <file:line[:character]> code --goto package.json:10:5 # see help options code --help # disable all extensions code --disable-extensions .
Status Bar
Status Barは問題(エラーと警告)の使い方の説明。言語モードもStatus Barに表示されるので変更方法の説明もあり。
Ctrl+Shift+M
: 問題(エラーと警告)の表示F8
: 次の問題(エラーと警告)を表示Shift+F8
: 前の問題(エラーと警告)を表示Ctrl+K M
: 言語モード(Python, JavaScriptなど)の変更
Customization
Change your theme
カラーテーマとアイコンテーマの変更方法。
Ctrl+K Ctrl+T
: カラーテーマの変更Ctrl+Shift+P
のコマンドパレットの「File Icon Theme」でアイコンテーマの変更- テーマは拡張機能としてMarketplaceからインストール可能
Change your keyboard shortcuts
キーボードショートカットの変更方法。
- Vimなどのキーマップ拡張機能はMarketplaceからインストール可能
Ctrl+K Ctrl+S
: キーボードショートカットのカスタマイズCtrl+Shift+P
のコマンドパレットの「Open Keyboards Shortcuts (JSON)」でオリジナルキーボードショートカットを設定可能
Tune your settings
設定の変更方法。UIで変更する方法とJSONを直接編集する方法がある。
Ctrl+,
: 設定画面UIを開くCtrl+Shift+P
のコマンドパレットの「Open Settings (JSON)」でsettings.jsonを開く
代表的な設定項目としては下記がある。
デフォルトの設定編集をJSONにする場合(UIの場合は"ui")。
"workbench.settings.editor": "json"
ペースト時にフォーマット(コード整形)する。
"editor.formatOnPaste": true
フォントサイズの変更。
// Main editor "editor.fontSize": 18, // Terminal panel "terminal.integrated.fontSize": 14, // Output panel "[Log]": { "editor.fontSize": 15 }
ズームレベルの変更。
"window.zoomLevel": 5
Fira Codeなどの合字フォントを使用する場合。
"editor.fontFamily": "Fira Code", "editor.fontLigatures": true
自動保存する場合。
"files.autoSave": "afterDelay"
保存時にフォーマットする場合。
"editor.formatOnSave": true
タブ幅の設定。
"editor.tabSize": 4
タブではなくスペースを使う。
"editor.insertSpaces": true
ホワイトスペースを表示。
"editor.renderWhitespace": "all"
非表示にするファイル、フォルダの設定(.gitなど)。
"files.exclude": { "somefolder/": true, "somefile": true }
検索から除外するファイル、フォルダの設定。
"search.exclude": { "someFolder/": true, "somefile": true }
特定の言語向けの設定は以下のように記述する。 languageid(pythonなど)についてはLanguage Identifiersを参照。
"[languageid]": { }
その他の設定についてはUser and Workspace Settingsを参照。
Add JSON validation
bower.jsonなどのJSON設定ファイルのバリデーションをsettings.json
に記述することができる。
以下はJSON Schema StoreのJSON Schemaを指定する方法。
"json.schemas": [ { "fileMatch": [ "/bower.json" ], "url": "http://json.schemastore.org/bower" } ]
自分で作成してファイルを指定する方法。
"json.schemas": [ { "fileMatch": [ "/foo.json" ], "url": "./myschema.json" } ]
JSON内に記述する方法。
"json.schemas": [ { "fileMatch": [ "/.myconfig" ], "schema": { "type": "object", "properties": { "name" : { "type": "string", "description": "The name of the entry" } } } },
Extensions
Extensionsは拡張機能のインストール方法など。
Ctrl+Shift+X
: 拡張機能サイドバーを開く- 拡張機能の探し方は、
- Marketplaceで探す
- 拡張機能サイドバー内で探す
- 「Show Recommended Extensions」でおすすめの拡張機能を探す
- awesome-vscodeなどのリンク集で探す
- 「More Actions...」でフィルタやソートが可能
- 拡張機能の自作はExtension API documentationやdocumentation on contribution pointsを参照
Files and folders
Files and foldersはファイル操作など。
Ctrl+@
: 統合ターミナルを開くCtrl+B
: サイドバーの表示/非表示Ctrl+K Z
: Zenモード(コーディングに集中しやすい。Esc
で抜ける)Ctrl+\
: エディターの分割Ctrl+1
,Ctrl+2
,Ctrl+3
: 分割したエディター間を移動Ctrl+Shift+E
: エクスプローラを表示Ctrl+Click
: テキスト中のファイルリンクを表示Ctrl+F4
: エディターを閉じるCtrl+Tab
: 最近使用したエディターの表示と移動Alt+←/→
: 最近使用したエディターを前/次に移動- ファイルの関連付けは以下のような設定を追加
"files.associations": { ".database": "json" }
- 編集中のファイルが他のエディターにより編集され競合した場合は、差分が表示され上書き/破棄が選べる