daisukeの技術ブログ

AI、機械学習、最適化、Pythonなどについて、技術調査、技術書の理解した内容、ソフトウェア/ツール作成について書いていきます

Visual Studio Code:設定内容、インストールした拡張機能

はじめに

Visual Studio Code(以下、VSCode)で設定した内容について、書き残していきます。

普段はサクラエディタを使っていて、開発環境はVSCodeを使っているので、VSCodeは初心者です。

私は、サクラエディタでは、ウィンドウを縦横4分割して使う場合が多いです。ファイル内の他のコードを参照しながら実装することが多いからです。

過去にVSCodeに移行しようとしたとき、ウィンドウ分割、解除、アクティブウィンドウの移動あたりのキーバインドが分からずに挫折したことがあります(笑)。今回は絶対に移行します!

この記事は、完全に自分用のメモになりそうです。でも、他の人の設定って気になりますよね、全部公開します(笑)。

この記事は随時更新する予定です!

参考文献

設定ファイルの場所

Windowsの場合の設定ファイルの場所:%APPDATA%\Code\User\settings.json Linuxの場合の設定ファイルの場所:$HOME/.config/Code/User/settings.json

  • %APPDATA% は、通常、C:\Users\xxx\AppData\Roaming となっています
  • VSCode は、インストール直後の状態では、settings.json が作られていない
  • VSCode には、規定の設定があり、変更した内容が settings.json に追記される
  • キーボードショートカット(キーバインド)の設定ファイル keybindings.json も同じ場所に作られる

設定

  • Auto Guess Encoding:ファイルを開いたときに文字コードを推測して開く

    • デフォルトは無効なので、チェックを入れて有効にする
  • Trim Auto Whitespace:自動挿入された末尾の空白を削除

    • デフォルト有効 → 無効に変更

フォント

  • MSゴシックの14px or 16pxを指定する

拡張機能

  • 日本語化

    • 拡張機能から japanese と入力して「Japanese Language Pack for Visual Studio Code」をインストールする
    • コマンドパレット(F1キー):「Configure Display Language」で日本語を選択する
  • code-eol:改行コードを表示する機能

    • settings.json の "code-eol.color" を "#555" に設定する
  • Zenkaku:全角空白を表示する機能

    • コマンドパレット(F1キー):「Enable Zenkaku」で有効化する
  • PlantUML:テキストでUMLの図を書く機能

  • PlantUMLで図のテキストを書いたら、コマンドパレット(F1キー)で、「PlantUML: Preview CurrentDiagram」でプレビューが見れる

VSCodeの便利と思った機能

  • HTML/CSSファイルの整形機能:対象のHTML/CSSファイルを開いて、右クリック→ドキュメントのフォーマット
  • カラーコードの可視化:CSSファイルを開くと、カラーコードの前に、その色が表示され、マウスをかざすとカラーを変更できる(下図)

CSSファイルのカラーコードを便利に変更できる
CSSファイルのカラーコードを便利に変更できる

未解決な問題(解決済み含む)

  • ウィンドウ分割時のアクティブウィンドウの変更(分割ウィンドウの移動)
    • Ctrl+1、Ctrl+2、Ctrl+3で移動できました
    • 左側のサイドバー(プライマリ)の開閉トグルは、デフォルト Ctrl+B(キーがかぶってるので、Ctrl+Shift+Bに変更)

キーボードショートカット(キーバインド)

設定した内容は、と同じディレクトリに keybindings.json として保存されます。

設定した内容を貼り付けます。

"command"で、"-"が付いているのは、そのキーに、もともと割り当てられていた機能を削除したという意味です。

// 既定値を上書きするには、このファイル内にキー バインドを挿入しますauto[]
[
    {
        "command": "workbench.action.showAllSymbols",
        "key": "ctrl+alt+t"
    },
    {
        "command": "-workbench.action.showAllSymbols",
        "key": "ctrl+t"
    },
    {
        "command": "actions.find", // 検索
        "key": "ctrl+t"
    },
    {
        "command": "-actions.find",
        "key": "ctrl+f"
    },
    {
        "command": "cursorRight", // カーソルを右に移動
        "key": "ctrl+f",
        "when": "textInputFocus"
    },
    
    {
        "key": "ctrl+shift+b",
        "command": "workbench.action.toggleSidebarVisibility"
    }
    {
        "command": "-workbench.action.toggleSidebarVisibility",
        "key": "ctrl+b"
    },
    {
        "command": "cursorLeft", // カーソルを左に移動
        "key": "ctrl+b",
        "when": "textInputFocus"
    },
    
    {
        "command": "-workbench.action.quickOpen", // カーソルを上に移動
        "key": "ctrl+p"
    },
    {
        "command": "cursorUp", // カーソルを上に移動
        "key": "ctrl+p",
        "when": "textInputFocus"
    },
    
    {
        "command": "-workbench.action.showCommands",
        "key": "ctrl+shift+p"
    },
    {
        "command": "scrollLineUp", // 画面を上に移動
        "key": "ctrl+shift+p",
        "when": "textInputFocus"
    },
    
    {
        "command": "-workbench.action.files.newUntitledFile",
        "key": "ctrl+n"
    },
    {
        "command": "cursorDown", // カーソルを下に移動
        "key": "ctrl+n",
        "when": "textInputFocus"
    },
    
    {
        "command": "-workbench.action.newWindow",
        "key": "ctrl+shift+n"
    },
    {
        "command": "scrollLineDown", // 画面を下に移動
        "key": "ctrl+shift+n",
        "when": "textInputFocus"
    },
    
    {
        "command": "-editor.action.selectAll",
        "key": "ctrl+a"
    },
    {
        "command": "cursorHome", // カーソルを行頭に移動
        "key": "ctrl+a",
        "when": "textInputFocus"
    },
    
    {
        "command": "-workbench.action.quickOpen",
        "key": "ctrl+e"
    },
    {
        "command": "cursorEnd", // カーソルを行末に移動
        "key": "ctrl+e",
        "when": "textInputFocus"
    },
    
    {
        "command": "-cursorUndo",
        "key": "ctrl+u",
        "when": "textInputFocus"
    },
    {
        "command": "cursorPageUp", // カーソルを1ページ上に移動
        "key": "ctrl+u",
        "when": "textInputFocus"
    },
    
    {
        "command": "-editor.action.toggleTabFocusMode",
        "key": "ctrl+m"
    },
    {
        "command": "cursorPageDown", // カーソルを1ページ下に移動
        "key": "ctrl+m",
        "when": "textInputFocus"
    },
    
    {
        "command": "-editor.action.outdentLines",
        "key": "ctrl+oem_4",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "command": "cursorTop", // カーソルをファイル先頭に移動
        "key": "ctrl+oem_4",
        "when": "textInputFocus"
    },
    
    {
        "command": "-editor.action.indentLines",
        "key": "ctrl+oem_6",
        "when": "editorTextFocus && !editorReadonly"
    },
    {
        "command": "cursorBottom", // カーソルをファイル末尾に移動
        "key": "ctrl+oem_6",
        "when": "textInputFocus"
    },
    
    {
        "command": "editor.action.selectAll", // すべて選択
        "key": "ctrl+oem_7"
    },
    
    {
        "command": "-workbench.action.terminal.toggleTerminal",
        "key": "ctrl+oem_3"
    },
    {
        "command": "cursorDownSelect", // 1行下を選択
        "key": "ctrl+oem_3",
        "when": "textInputFocus"
    },
    
    {
        "command": "cursorUpSelect", // 1行上を選択
        "key": "ctrl+i",
        "when": "textInputFocus"
    },
    
    {
        "command": "cursorRightSelect", // 右を選択
        "key": "ctrl+k",
        "when": "textInputFocus"
    },
    
    {
        "command": "-workbench.action.togglePanel",
        "key": "ctrl+j"
    },
    {
        "command": "cursorLeftSelect", // 左を選択
        "key": "ctrl+j",
        "when": "textInputFocus"
    },
    
    {
        "command": "-editor.action.addSelectionToNextFindMatch",
        "key": "ctrl+d",
        "when": "editorFocus"
    },
    {
        "command": "deleteRight", // 右を削除
        "key": "ctrl+d",
        "when": "textInputFocus"
    },
    
    {
        "command": "-expandLineSelection",
        "key": "ctrl+l",
        "when": "textInputFocus"
    },
    {
        "command": "editor.action.deleteLines", // 現在の行を削除
        "key": "ctrl+l",
        "when": "textInputFocus && !editorReadonly"
    },
    {
        "command": "-editor.action.deleteLines",
        "key": "ctrl+shift+k",
        "when": "textInputFocus && !editorReadonly"
    },
    
    {
        "command": "-workbench.action.splitEditor",
        "key": "ctrl+oem_5"
    },
    {
        "command": "editor.action.fontZoomReset", // フォントサイズのリセット
        "key": "ctrl+oem_5"
    },
    
    {
        "command": "editor.debug.action.toggleBreakpoint", // ブレークポイントのトグル
        "key": "shift+f9",
        "when": "editorTextFocus"
    },
    {
        "command": "-editor.debug.action.toggleBreakpoint",
        "key": "f9",
        "when": "editorTextFocus"
    },
    {
        "command": "workbench.action.splitEditorDown", // 画面分割 (下) → ブレークポイント(F9)は Shift + F9 に移動
        "key": "f9"
    },
    
    {
        "command": "workbench.action.splitEditorRight", // 画面分割 (右)
        "key": "ctrl+f9"
    }
]

おわりに

まずは、初期設定が終わったという程度ですが、参考文献の本を読みながら、少しずつカスタマイズしていこうと思います。

今回は以上です!

最後までお読みいただき、ありがとうございました。