Visual Studio Codeの環境構築(Python)

１．概要

個人的に一番大好きなIDE(統合開発環境)いわゆるエディタのVS Codeの環境構築を記載します。

　Pythonの環境構築は別記事で作成しましたのでご参考までに。

１－１．画面の構成(UI)

　VS Codeの画面構成は下記の通りです。

1. エディター： ファイルを編集するメインエリア。縦にも横にも好きなだけエディタを並べて開くことができます。

2. サイドバー：エクスプローラーのような様々なビューがあり、プロジェクト作業中に役立ちます。

3. ステータスバー：開いているプロジェクトや編集しているファイルに関する情報が表示されます。

4. アクティビティバー： 左端にあり、ビューを切り替えたり、Gitが有効になっている場合の送信済み変更数など、コンテキスト固有のインジケータを表示したりできます。

   • アクティビティ・バーの位置は変更できます。

5. パネル：エディター領域の下にあるビューのための追加スペース。デフォルトでは、出力、デバッグ情報、エラーと警告、統合ターミナルが含まれています。

   • パネルは左や右に移動して縦のスペースを増やすこともできます。

１－２．ワークスペースとは

　Visual Studio Codeのワークスペースは、VS Codeのウィンドウ（インスタンス）で開かれる1つまたは複数のフォルダーの集まりです。ほとんどの場合、ワークスペースとして開くフォルダは1つですが、開発ワークフローによっては、マルチルート・ワークスペースと呼ばれる高度な設定を使用して、複数のフォルダを含めることができます。

ワークスペースの概念により、VS Codeは以下のことが可能になります

• 特定のフォルダにのみ適用され、他のフォルダには適用されない設定を構成する。

• そのワークスペースのコンテキストでのみ有効なタスクとデバッガーの起動設定を保持する。

• そのワークスペースに関連付けられた UI の状態（たとえば、開いたファイル）を保存および復元します。

• そのワークスペースに対してのみ、選択的に拡張機能を有効または無効にします。

２．環境構築

２－１．インストール

下記サイトからUser Installerでファイルをダウンロードしてファイル実行

２ー２．事前設定

VS CODEを使いやすくするように調整します。設定画面は左下歯車を押して設定ボタンを押します。

　２－２－１．Python.exeのパス設定：Python.Path

使用するPythonのパスを設定します。「python.python」で検索して「Python: Python Path」にPython.exeのパスを入力デフォルトは空します。
（※非推奨Depricatedになっているため設定はいらないのかも。）

　２－２－２．自動補完機能のEnter動作をOFF

自動補完のEnter機能をなくしますTabボタンで充分じゃ!。「accept」で検索して「Accept Suggention On Enter」をonデフォルト->offにします。
これにより自動補完機能が動作しているときEnterを押しても機能が実行されなくなり改行時にイライラしなくなります。

　２－２－３．型チェック機能:：Type checking Mode

型チェック機能を設定します。「Type checking Mode」で検索して「Type Checking Mode」をoffデフォルト->basicにします。
（なくてもいいかも。あとPylance入れた後じゃないとダメかも昔入れてたけどPC変えたら入ってなかったから）

　２－２－４．文字区切り（形態素）：Word Separators

　VS CODEでは「Ctrl + 矢印」で指定文字区切り文字まで移動できます。区切り文字は「Word Separators」に追記をします。（下記では。句点を追加しただけです。これで句点を通り過ぎないようにしました。)

３．拡張機能(Extensions)の追加

　拡張機能によりVS CODEに便利な機能を追加車でいうオプションできます。ほしい機能があれば適宜追加していきます。

　拡張機能はいろいろあり下記記事は参考になります。

３－１．Python関係

Python：とりあえず追加

Python Extension Pack：補完機能やデバッグ機能がつく。

３－２．日本語設定

Japanese Language Pack for Visual Studio Code：デフォルトが英文ですが日本語に変更できます。

３－３．自動補完機能（予測変換）

Pylance：自動補完やエラー検索を実施してくれます。

３－４．Jupyter関係

Jupyter：VS CODEでJupyterを使うために入れます。

Jupyter Keymap：Jupyter用コマンドを使用するために入れます。(コードセルをCtrl+Enterで実行させるなど

３－５．コードの見映えを変更

Bracket Pair Colorizer：それぞれのカッコBracketに色付けしてくれるため見やすくなります。

Python Indent：コードを改行する時にインデントの高さを自動で調整してくれます。

３－６．ドキュメント作成

　３－６－１．Markdown用：Markdown PDF

　MarkDownでドキュメントを作成したい方向けです。Markdownのドキュメントを作成する場合は拡張子：.mdを選択します。
　なおMarkdown Docを作成する場合は"Markdown: Open Preview to the Side"を選択すると実際の表示を横に並べてみることができます。

　インストールは下記で実行できます。

　なお下記記事の通り、PDF化する場合は「コマンドパレットで「Open Extension Folder」して、yzane.markdown-pdf-x.x.x → template → template.htmlを開き、”{{{mermaid}}}”の文字の下に下記記載」が必要です。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.css" integrity="sha384-9eLZqc9ds8eNjO3TmqPeYcDj8n+Qfa4nuSiGYa6DjLNcv9BtN69ZIulL9+8CqC9Y" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/katex.min.js" integrity="sha384-K3vbOmF2BtaVai+Qk37uypf7VrgBubhQreNQe9aGsz9lB63dIFiQVlJbr92dw2Lx" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0/dist/contrib/auto-render.min.js" integrity="sha384-kmZOZB5ObwgQnS/DuDg6TScgOiWWBiVt0plIRkZCmE6rDZGrEOQeHM5PcHi+nyqe" crossorigin="anonymous"></script>
<script>
 document.addEventListener("DOMContentLoaded", () => {
   renderMathInElement(document.body, {
     delimiters: [
       { left: "$$", right: "$$", display: true },
       { left: "$", right: "$", display: false }
     ]
   });
 });
</script>

　３－６－２．LaTeX用：LaTeX Workshop

　追って

３－７．コード自動生成：GitHub Copilot（★有料）

　コード自動生成するサービスです。よくわからなくても入れてみて使ってみればすごさがわかります。
　2022年8月より有料化されてますのが、普段コードを書く方なら一度は使ってみてほしいサービスです（要Githubアカウント）。

３－８．Docker

　Docker（コンテナ）を使用したい方向け（初心者は不要）

４．特殊設定

４－１．Proxyの設定：社内でGitHub Copilot利用

　通信が必要なサービス（例：GitHub Copilot）は社内で使用するとProxyにより使用できないことがあります。私の例として社内でもGitHub Copilotを使用するためにVS CODEにProxy設定しました。

　初めに「Ctrl + ,」または下記手順で設定画面を開きます。設定画面の右上にあるアイコン「設定(JSON)を開く」を押すと"settings.json"が開きます。

　"settings.json"に「"http.proxy": <Proxy>」と「 "http.proxyStrictSSL": false」を追記します。proxyは各社の情シスにご確認ください。設定後に再起動するとつながらなかったGitHub Copilotが通信できるはずです。

【settings.json　※下記proxyは参考値】
    "http.proxy": "http://111.111.1.11:10000",
    "http.proxyStrictSSL": false,

４－２．ショートカットキーの割り振り

　通常は設定不要ですがショートカットキーの変更したい方は「設定->キーボードショートカット」を選択します。
　私の場合はGitHub Copilotを開くコマンドとJupyterの実行が干渉してしまったため(普段全く使わない)"Open GitHub Copilot"を適当に変更します。

　キーバインドの行yを押すとポップアップが出るため、枠内でショートカットにしたいキーを押してEnterを押すと設定できます。

５．ショートカット一覧

　VS Code使用時に必須のショートカットは下記参照。注意点としてJupyter使用時においてセルブロック内選択／セルブロック選択の２種類がある。これらの切り替えは「Esc」キーで切り替え可能。

【選択】

• Ctrl+D：選択箇所以降にある同じ文字を1個選択

• Ctrl+Alt+L：同じ文字を全選択

• Ctrl+Alt+（上下）矢印：矩形選択（選択位置と同じ位置から上下選択）

• Shift + Alt＋ドラッグ(or クリック)：矩形選択

【コピー／移動】

• Shift+Alt+下矢印(↓)：選択行を下側にコピー

• Alt+（上下）矢印：選択行を矢印方向へ移動（行の入れ替え）

• Ctrl+（左右）矢印：形態素まで移動（2-4節参照）

【画面】

• Ctrl+|：ウィンドウを分割

• Ctrl+Alt+（左右）矢印：開いているウィンドウを移動分割

【その他】

• Ctrl+Shift+P：コマンドパレットを開く

６．参考資料

　VS CODEに関連するオススメ資料を記載します。

６－１．チートシート

　下記記事よりショートカット一覧（チートシート）を参照しました。

６－２．My拡張機能一覧

　2022年1月現在の私の拡張機能一覧です。”おすすめ”と出てポチポチしてるので、入れてる理由がわからない機能も結構あります。

７．トラブルシューティング

７－１．JupyterのKernel Connectionエラー

※完全に自分用であり動作の保証はなし

【現象】
　ある日突然Kernelへ接続できなくなりJupyterが使用できなくなった。

【対応事項】
　下記記事を参考にライブラリのVersion変更やipykernelのインストールをしてみたけど問題は解決しなかった。なおAnacondaの仮想環境を新しく作って動作させてもエラー解決できなかったつまりVS CODE側の設定。

python -m pip install 'traitlets==4.3.3' --force-reinstall
python -m pip install ipykernel
python -m ipykernel install —user

【解決方法】

 右上の「base(Python)」で似たようなbase(Python ver.)を選択したらいけた。（動いたからﾖｼ）

８．GitHub Copilot

　GitHub Copilotの詳細記事は下記の通りです。（追って追加）

あとがき

　今更整理し始めたけど入れた理由を覚えていない拡張機能が多すぎる。思い出したやつもどんどん入れていきたいです。

編集履歴

• 2021年11月21日：初版発行

• 2025年4月26日：Copilot紹介記事の追加