【画像付き解説】Visual Studio Codeでatomのhydrogenの機能を再現してみた

2023年6月18日
2023年6月25日
VSCode, プログラミング
Atom, hydrogen, jupyter, macros, python, Visual Studio Code, VSCode, デバッグ
173view

VSCode

今回は、pythonをVisual Studio Code(VS Code)で開発してる方に向けた

便利なデバック環境構築の方法を紹介します

よくあるブレイクポイントを使用したデバッグ作業ではなく

atomのHydrogenのような選択した行のコードを

都度実行できるようなデバック環境の構築方法を解説します

今回構築するデバック環境はこんな感じ・・・

Visual Studio Code (VS Code)・・・Microsoftが開発した無料のソースコードエディタ

この記事を読むとわかること・・・

Visual Studio Codeでのデバッグ環境の構築方法
Atomのhydrogenに限りなく近い機能の再現方法

Atomのサポートが終了になりhydoronの代替え機能を使用したい！

という方には必見の記事になっていると思います！

実際に私もhydrogenの代替機能を探しましたが

納得のいく代替え機能はなく

結局自分で実現しました

1 1. 環境構築前のVisual Studio CodeのPython開発環境のセットアップ
- 1.1 拡張機能のインストール
- 1.2 Pythonのversionの設定
2 2. デバック環境構築に必要な機能の紹介
- 2.1 2-1. Python Interactive Windowsについて
- 2.2 2-2. マクロについて
3 3. 設定後の挙動と出力の設定について
4 4. まとめ

1. 環境構築前のVisual Studio CodeのPython開発環境のセットアップ

今回の記事を解説する前にVisual Studio Codeで

pythonを開発するための下準備をしておく必要があるので

説明しておきます

拡張機能のインストール

Visual Studio Codeにいくつか拡張機能を

インストールしておく必要があります

インストール済みだよ！って方はこの部分は読み飛ばしてください

インストールしておく拡張機能はこちら

python
jupyter

拡張機能のインストール画面

おへんじ

拡張機能は左側のバーにある四角いアイコンをクリックするとダウンロードページに移動できるよ

目次に戻る

Pythonのversionの設定

VS CodeでPythonコードを実行するためには

ローカルまたはdocker等によりセットアップしている

Pythonのversionを選択しておきましょう

設定方法は以下のとおり

VS Codeの右下部に表示されている「Python」部分をクリックします
利用可能なPythonのversion一覧が表示されるので、使用するversionを選択します

pythonはすでにローカルやdockerで構築してある
pythonのバージョンが表示されます

以上で下準備は完了です

目次に戻る

2. デバック環境構築に必要な機能の紹介

Visual Studio CodeでHydrogenの代替え機能を実装するためには

いくつかの機能を組み合わせます

必要な機能をそれぞれ解説していきます

2-1. Python Interactive Windowsについて

Python Interactive WindowsはVisual Studio Codeの

拡張機能であるJupyterが提供する機能の1つです

機能は以下のとおり

選択した部分のコードを実行できる
関数やクラスなどの複数行選択して実行できる
コードを都度修正できるのでデバッグ作業が効率的になる

おへんじ

この機能を使用するためにjupyterをインストールしてるよー

hydrogenの機能を再現するにはぴったりの機能となっています

Python Interactive Windowsの使い方

Python Interactive Windowsの使い方は以下のとおり

適当なPythonファイルを開く
実行したいコードを選択
Shift + Enterキーを押す

選択したコードがPython Interactive Windowsで実行されその結果が表示されます

vs codeの設定によってはShift + Enterではない可能性があります

ショートカットキーの割り当て方法については次で説明します

Python Interactive Windowsでは、コードの実行・保存・停止・再開などもできます

目次に戻る

python Interactive Windowsのコマンドパレットからのショートカットキーの割り当て方法

今回の記事ではkeydindings.jsonファイルから直接ショートカットキーを
割り当てるためコマンドパレットからのショートカットキーの割り当て手順は必要ありません（参考に書いておくだけです）

ショートカットキーの割り当ては２通りの方法があります

コマンドパレットからショートカットキーを割り当てる
keybindings.jsonファイルを直接編集する

①のコマンドパレットからショートカットキーを割り当てる方法が

スタンダードでほとんどはこの方法で行います

今回はマクロを使用するため②keybindings.jsonファイルを

直接編集する方法でショートカットキーを割り当てます（この方法は後ほど解説しています）

①のコマンドパレットからショートカットキーを

割り当てる方法についても説明しておきます

コマンドパレットからのショートカットキーの割り当て方法

手順は以下のとおり

コマンドパレットを表示(mac：shift + command + p, windows: shift + ctrl + p)
『>run interactive window』で検索
『jupyter:対話型ウィンドウで選択範囲/行を実行』を選択
右側の設定⚙️マークをクリックして設定画面に移動
『＋』マークを押してショートカットキー設定画面を表示
実際に使用したいコマンド押してをショートカットキーを設定する（Enterで確定）

おへんじ

コマンドパレットはvs codeでできる操作一覧を検索・実行できる便利な機能だよ

後ほどkeydindings.jsonファイルに直接ショートカットキーを割り当てるため
今回の記事ではこのショートカットキーの割り当ての手順は必要ありません

目次に戻る

2-2. マクロについて

マクロとは複数の操作を1つのコマンドにまとめるための機能です

今回はマクロを使用して以下の2つの操作を合体させます

python Interactive Windowsを実行する機能
カーソルを1行下に移動する機能

このマクロの設定をすることで

python INteractive Windowsを実行すると

コード実行と同時にカーソルが1行下に移動するので

shift + Enter連打で連続でコードを実行できます

マクロの導入方法

まずはじめに、マクロ機能を使用するために

必要な拡張機能「macros」のインストール方法を説明します

インストール方法はjupyterやpythonと同様の方法でインストールしてください

settings.jsonとkeybindings.jsonの設定方法

次にマクロの定義とキーバインディング（ショートカットキー）の設定を行います

ここから少し難しい話がでてきますが頑張ってください

以下の２つファイルに設定を追記します

settings.json（←マクロを設定）
keybindings.json（←作成したマクロのショートカットキーを割り当てる）

settings.jsonの設定

コマンドパレットを開く(mac：shift + command + p, windows: shift + ctrl + p)
「open user settings (json)」を検索して選択してsettings.jsonを開く
settings.jsonに以下の内容を追記します。

settings.jsonの設定前と設定後の内容はこちら

設定前


{
    "[python]": {
        "editor.formatOnType": true
    },
    "git.autofetch": true,
    "python.terminal.activateEnvironment": false,
    "window.zoomLevel": 1,
    "extensions.experimental.affinity": {
        "ms-toolsai.jupyter": 1,
        "ms-toolsai.jupyter-renderers": 1,
        "ms-python.python": 1,
        "ms-python.vscode-pylance": 1
    },
    "jupyter.interactiveWindow.textEditor.executeSelection": true,
    "macros": null
}

設定後


{
    "[python]": {
        "editor.formatOnType": true
    },
    "git.autofetch": true,
    "python.terminal.activateEnvironment": false,
    "window.zoomLevel": 1,
    "extensions.experimental.affinity": {
        "ms-toolsai.jupyter": 1,
        "ms-toolsai.jupyter-renderers": 1,
        "ms-python.python": 1,
        "ms-python.vscode-pylance": 1
    },
    "jupyter.interactiveWindow.textEditor.executeSelection": true,
    "macros": {
        "jupyterExeSelThenCursorDown": [
            "jupyter.execSelectionInteractive",
            "cursorDown"
        ]
    }
}

設定前後で変えたところを抜粋すると・・・

設定前


    "macros": null

設定後


    "macros": {
        "jupyterExeSelThenCursorDown": [
            "jupyter.execSelectionInteractive",
            "cursorDown"
        ]
    }

nullの部分を変更しています

今回変更していない部分はvscodeの設定次第で異なる場合があります

この設定で”jupyterExeSelThenCursorDown”という名前のマクロが定義され

「コードの実行」と「カーソルの下移動」の2つの機能が割り当てられます。

おへんじ

マクロの名前は任意だから好きな名前をつけてね

keybindings.jsonの設定

コマンドパレットを開く(mac：shift + command + p, windows: shift + ctrl + p)
「Open Keyboard Shortcuts (JSON)」を検索して選択してkeybindings.jsonを開く
keybindings.jsonに以下の内容を追記します

keybindings.jsonの設定前と設定後の内容はこちら

設定前

// 既定値を上書きするには、このファイル内にキー バインドを挿入しますauto[]
[
    {
        "key": "ctrl+shift+w",
        "command": "debug.jumpToCursor"
    },
    {
        "key": "shift+cmd+f9",
        "command": "workbench.debug.viewlet.action.removeAllBreakpoints"
    },
    {
        "key": "shift+space",
        "command": "jupyter.runFileInteractive"
    },
    {
        "key": "shift+alt+enter",
        "command": "python.execSelectionInTerminal",
        "when": "editorTextFocus && !findInputFocussed && !jupyter.ownsSelection && !notebookEditorFocused && !replaceInputFocussed && editorLangId == 'python'"
    },
    {
        "key": "alt+cmd+'",
        "command": "workbench.action.moveActiveEditorGroupRight"
    },
    {
        "key": "cmd+k right",
        "command": "-workbench.action.moveActiveEditorGroupRight"
    },
    {
        "key": "alt+cmd+;",
        "command": "workbench.action.moveActiveEditorGroupLeft"
    },
    {
        "key": "cmd+k left",
        "command": "-workbench.action.moveActiveEditorGroupLeft"
    }
]

設定後

// 既定値を上書きするには、このファイル内にキー バインドを挿入しますauto[]
[
    {
        "key": "ctrl+shift+w",
        "command": "debug.jumpToCursor"
    },
    {
        "key": "shift+cmd+f9",
        "command": "workbench.debug.viewlet.action.removeAllBreakpoints"
    },
    {
        "key": "shift+space",
        "command": "jupyter.runFileInteractive"
    },
    {
        "key": "shift+alt+enter",
        "command": "python.execSelectionInTerminal",
        "when": "editorTextFocus && !findInputFocussed && !jupyter.ownsSelection && !notebookEditorFocused && !replaceInputFocussed && editorLangId == 'python'"
    },
    {
        "key": "alt+cmd+'",
        "command": "workbench.action.moveActiveEditorGroupRight"
    },
    {
        "key": "cmd+k right",
        "command": "-workbench.action.moveActiveEditorGroupRight"
    },
    {
        "key": "alt+cmd+;",
        "command": "workbench.action.moveActiveEditorGroupLeft"
    },
    {
        "key": "cmd+k left",
        "command": "-workbench.action.moveActiveEditorGroupLeft"
    },
    {
        "key": "shift+enter",
        "command": "macros.jupyterExeSelThenCursorDown",
        "when": "editorTextFocus && isWorkspaceTrusted && jupyter.ownsSelection && !findInputFocussed && !notebookEditorFocused && !replaceInputFocussed && editorLangId  'python'"
    }
]

設定前後で最後の行に以下の文を追記しています


    {
        "key": "shift+enter",
        "command": "macros.jupyterExeSelThenCursorDown",
        "when": "editorTextFocus && isWorkspaceTrusted && jupyter.ownsSelection && !findInputFocussed && !notebookEditorFocused && !replaceInputFocussed && editorLangId  'python'"
    }

おへんじ

追加するときに頭に” , “(カンマ)をつけるのを忘れないでね

この設定により、shift + enterが押されたときにsettings.jsonに追加した

jupyterExeSelThenCursorDown(任意)という名前のマクロが実行され

python Interactive Windowsが起動して実行されカーソルが1行下へ移動します

実行するマクロは起動に条件をつけています

起動条件は以下のとおり設定しています

以下の起動条件を全て満たしている場合にマクロが起動します