もた日記

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

Visual Studio Codeメモ : Tips and Tricksを確認する(1)

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

code.visualstudio.com

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は拡張機能のインストール方法など。

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

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"
}
  • 編集中のファイルが他のエディターにより編集され競合した場合は、差分が表示され上書き/破棄が選べる

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

wonderwall.hatenablog.com