VSCode on いつかの熊右衛門

VSCode：Python の環境変数を .env ファイルに設定する

Sat, 06 Apr 2024 07:15:34 +0900

ワークスペースのフォルダ直下に .env ファイルを作成して環境変数を設定するメモ。

プロキシ環境下かつルート証明書の設定を定義した例。
プロキシの設定 http_proxy, https_proxy が無いと外部に繋がらない。
→ プロキシの値が https://proxy.example.com:8080 を例にした。
プロキシを使わない接続先を no_proxy に設定。
ルート証明書の設定が無いと https が繋がらない。
→ 例としてルート証明書のファイルをワークスペース直下に置いた。
また、REQUESTS_CA_BUNDLE で requests パッケージにルート証明書を示すことで検証してアクセスされる。
→ 引数 verify=False で検証を止める必要が無い。

定義済みの環境変数は ${…} で参照できるので、同じ値のものは参照で設定する。

http_proxy=https://proxy.example.com:8080
https_proxy=${http_proxy}
no_proxy="localhost, 127.0.0.1, ::1"
CA_BUNDLE=${workspaceFolder}/cacert.pem
REQUESTS_CA_BUNDLE=${CA_BUNDLE}

./.vscode/settings.json に .env ファイルを定義する。

{
	"python.envFile": "${workspaceFolder}/.env"
}

VSCode：Python のフォーマッターとリンターを設定する

Sat, 02 Mar 2024 14:48:03 +0900

自分が調べた限り、現時点では以下の拡張機能をインストール、設定すれば良さそうに感じました。

設定は以下で初めようと思います。
まずは black と flask8 で1行の長さの初期値が違うようなので設定しました。
必要に応じてカスタマイズかな。

{
 "[python]": {
 "editor.defaultFormatter": "ms-python.black-formatter",
 "editor.formatOnSave": true,
 "editor.codeActionsOnSave": {
 "source.organizeImports": "explicit"
 },
 },
 "black-formatter.args": [
 "--line-length",
 "79"
 ],
 "flake8.args": [
 "--max-line-length",
 "79"
 ],
 "isort.args":["--profile", "black"]
}

ルールに違反した適当なコードで試してみます。
次のコードが保存前。

次のコードが保存後。

手動による修正が必要な所が残りましたが、まずは良さそうかなと思います。

参考：Existing Python Tools Extensions

VSCode：Docker コンテナ内のファイルを開く

Sat, 10 Feb 2024 19:37:09 +0900

VSCode の Docker 拡張機能で、コンテナ内のファイルを開けて編集も可能だったのでメモです。
今までは、コンテナ内のファイルを確認したい場合は -it で入っていましたが、VSCode から開けるなら手間いらずです。
また、修正が残らないとは言えコンテナ内のファイルを編集できるのも、ちょっとしたときに便利です。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon)

VSCode：ショートカットキーで操作する

Sat, 20 Jan 2024 13:35:05 +0900

VSCode のページでショートカットの一覧を見つけ、覚えてみようかなと思っています。
自分の場合は IDE の以前と以後で、エディタで使うショートカットキーが減りましたね。
また、触るマシンも変わったりしてカスタマイズした設定を適用しづらくなった事も、減った原因かもしれません。
全部使わなくても、頻度が高く効率が上がるものは早く覚えられますよね。
カスタマイズは便利なんですが、標準に慣れておくと、どこでも使える方が便利かなと思います。
VSCode 上でもショートカットの一覧を確認できるので、ちょっとした時間に見直せて便利ですね。

VSCode 上から確認する場合は、
・Windows と Linux の場合： CTRL+K, CTRL+S
・Mac の場合：Command+K, Command+S
と２ストロークの入力で確認できます。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

VSCode：拡張機能を一括でインストールまたはアンインストールする

Sat, 30 Dec 2023 13:06:04 +0900

登録は新たな環境を構築する場合や、開発メンバーで揃えるとき、
削除はその前段階として一旦全部消す場合に使えると思います。

インストールしている拡張機能の一覧を取得

一括で登録または削除する為に、まずは拡張機能の一覧を取得します。
ファイルに取得せずに行うことも可能ですが、取っておいた方が安心だと思います。

シェルから次のコマンドを実行します。
Windows でも同様に PowerShell から実行します。

code --list-extensions > extensions.txt

これで、extensions.txt に拡張機能の一覧が書き出されます。

一括アンインストール

xargs が使えるとき

cat extensions.txt | xargs -n 1 code --uninstall-extension

使えないとき

while read -r extension; do
 code --uninstall-extension "$extension"
done < extensions.txt

Windows のとき

cat extensions.txt | ForEach-Object { code --uninstall-extension $_ }

一括インストール

オプションが --uninstall-extension から --install-extension に変わるだけです。

xargs が使えるとき

cat extensions.txt | xargs -n 1 code --install-extension

使えないとき

while read -r extension; do
 code --install-extension "$extension"
done < extensions.txt

Windows のとき

cat extensions.txt | ForEach-Object { code --install-extension $_ }

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon)

VSCode：Docker 機能拡張でコマンド入力する機会が減った

Sat, 23 Sep 2023 12:10:37 +0900

GUIから実行できるので、コマンド入力が減りました。
使用頻度の高いもののメモです。

環境

VSCode v1.82.2
Docker 機能拡張 v1.26.1

Docker イメージのビルド

Docker ファイルの右クリックメニューから「Build Image…」を選択し、イメージ名を入力します。
次回からは入力したイメージ名がデフォルトで入っています。

docker compose の操作

docker-compose.yaml ファイルの右クリックメニューから「Compose Up」で起動できます。

起動したコンテナの操作

構成するコンテナ群の右クリックメニューからは

Compose Logs
Compose Restart
Compose Down

が便利です。

コンテナの右クリックメニューからは

View Logs
Attach Shell
Restart

が便利です。

「Attach Shell」は結構助かってます。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

VSCode：Markdown ファイルを PDF にする

Sat, 19 Aug 2023 14:19:56 +0900

拡張機能の Markdown PDF でできます。
日本語の説明も用意されています。

VSCode で Markdown ファイルを開いて、右クリックメニューの「Markdown PDF: Export (pdf)」を選択すれば OK です。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

VSCode：ワークスペースの信頼を毎回せずに済ませるように設定する

Sat, 06 May 2023 11:43:11 +0900

試作のワークスペースを作る度に信頼するか聞かれるのが厄介なので、信頼するフォルダーを決め、そのサブフォルダーに試作物を作成することで聞かれてこないようにしました。
VSCode はバージョン 1.78.0 です。

ワークスペースの信頼の設定

コマンドパレット（Windows なら Shift + Ctrl + P、Mac なら Shift + Command + P）から「Workspace: Manage Workspace Trust」を選択します。

「フォルダーの追加」で、信頼するフォルダーを追加します。

追加したフォルダーのサブフォルダーは信頼されます。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

VSCode：ファイルを比較して差分を確認するには

Sat, 22 Apr 2023 08:05:00 +0900

エクスプローラーから対象のファイルを右クリックして、メニューを選択すれば OK です。
確認した VSCode のバージョンは 1.77.3 です。

まず、比較元のファイルを右クリックして「比較対象の選択」をクリック

次に比較先のファイルを右クリックして「選択項目と比較」をクリック

で、差分が確認できます。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

VSCode："ドキュメントのフォーマット" を一括で実行するには

Sat, 25 Mar 2023 07:35:03 +0900

ワークスペース内のソースコードにまとめて “ドキュメントのフォーマット” かける方法を探した所、以下の拡張機能が良さそうだったのでメモです。

そして、今の所 “Format Files” を使うことにしました。

Format Files 拡張機能

予め、設定 > 拡張機能 > Format Files で
Excluded Folders に除外するディレクトリ、
Extensions To Include に対象にするファイルの拡張子、
で対象にするファイルを設定しておきます。

あとはコマンドパレットから、“Start Format Files: Workspace” -> “Do it!” で実行されます。
各ファイルを、開く、フォーマット、保存、するので数が多いと時間は掛かりますね。

Format in context menus 拡張機能

エクスプローラーからフォーマットを掛けたいファイルを選択後、右クリックのメニューから “Format” を選ぶと実行されます。

以上、２つを試してみました。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

TypeScript：Google のスタイルガイドに従ってみる

Sat, 04 Mar 2023 12:10:47 +0900

Google TypeScript Style Guide に従う場合、 gts が便利そうなので使ってみます。

インストール

お試しなので、空のディレクトリで次のコマンドを実行しました。
既存のプロジェクトに追加する場合も同様のコマンドですが、その際は設定に問題がないように気をつける必要がありそうなので、今回はパスしました。

npx gts init

lint の実行

お試し用のソースコード src/index.ts が生成されるので、次のコマンドで lint を実行してみます。

yarn lint

 3:7 warning 'longString' is assigned a value but never used @typescript-eslint/no-unused-vars
 6:7 warning 'trailing' is assigned a value but never used @typescript-eslint/no-unused-vars
 8:7 warning 'why' is assigned a value but never used @typescript-eslint/no-unused-vars

✖ 3 problems (0 errors, 3 warnings)

検出されてますね。

ソースコードのフォーマットと問題の修正

上記で検出される指摘は自動で修正できない問題なので、修正できる問題を src/index.ts 加えました。

文字列の囲みをシングルクォーテーションからダブルクォーテーションに変更
変な所で改行

その後、次のコマンドを実行。

yarn fix

すると、ダブルクォーテーションがシングルクォーテーションになったり、変な改行が整形されました。

ソースコードを保存したときに自動修正

VSCode でソースコードの保存時に自動修正されるように .vscode ディレクトリの setting.json に設定しました。

{
 "editor.codeActionsOnSave": {
 "source.fixAll": true
 }
}

これで、ソースコードのフォーマットや、修正可能な問題は保存時に自動でされるので便利です。

ESLint 拡張機能を既にインストール済みな環境で試しています。
必要か未確認なのですが、自動で修正されない場合はそれが原因かもしれません。

既存プロジェクトに gts を追加するのは辛いとき

ESLint を追加して、ルールは https://github.com/google/gts/blob/main/.eslintrc.json を参考に作成すると良さそうです。

VSCode：ワークスペースでのみ有効な環境変数を設定する

Sat, 18 Feb 2023 17:56:52 +0900

作業しているワークスペースでのみ効いて欲しい環境変数を設定したときのメモです。
以下の設定をワークスペースのファイルに記載しました。

OpenSSL の互換性の都合で、環境変数 NODE_OPTIONS を設定した。
npm または yarn で追加したパッケージをターミナルから実行したいが、パスが通っていないので追加した。

Windows、Mac、Linux それぞれの設定を記載しましたが、使う環境だけ書いておけば OK だと思います。

{
 "folders": [
 {
 "path": "."
 }
 ],
 "settings": {
 "terminal.integrated.env.windows": {
 "NODE_OPTIONS": "--openssl-legacy-provider",
 "PATH": "${env:PATH};${workspaceFolder}\\node_modules\\.bin"
 },
 "terminal.integrated.env.osx": {
 "NODE_OPTIONS": "--openssl-legacy-provider",
 "PATH": "${env:PATH}:${workspaceFolder}/node_modules/.bin"
 },
 "terminal.integrated.env.linux": {
 "NODE_OPTIONS": "--openssl-legacy-provider",
 "PATH": "${env:PATH}:${workspaceFolder}/node_modules/.bin"
 }
 }
}

${…} は VSCode で定義済みの変数です。

参考：VSCode の定義済み変数
https://code.visualstudio.com/docs/editor/variables-reference

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

VSCode：コマンドパレットから頻繁に使うものにはショートカットキーを割り当てる

Sat, 06 Aug 2022 16:02:16 +0900

コマンドパレットからコマンドを選択して使う場合、頻繁に使う機能にはショートカットキーを割り当てた方が作業が捗ります。

ショートカットキーの設定を表示する

左下の「管理」のアイコンをクリックして「キーボードショートカット」を選択します。

コマンドに割り当てられているショートカットキーが表示されます。

コマンドにショートカットキーを割り当てる

以前紹介した「Paste JSON as Code」にキーを割り当てたいと思います。
まずは対象のコマンドを探す為に絞り込みます。

・・・既に割り当てられていました。この拡張機能の既定値なんでしょうか。
ペンのアイコンをクリックすると、割り当てたいキーが設定できます。

使用頻度の高いコマンドは、ショートカットが既に割り当てられていないか確認して、あれば使う、無ければ設定すると良さそうです。

Mac：code コマンドで VSCode を開くには

Sat, 02 Jul 2022 16:02:41 +0900

Mac に Visual Studio Code （以下、VSCode）をインストール後、ターミナルから code コマンドを実行しても、

zsh: command not found: code

となってしまう。
解消するには VSCode でコマンドパレットを開いて（Shift + Command + P）、
「Shell Command: Install ‘code’ command in PATH」
を選択すれば良い。

何が行われるのか確認したところ、シェルスクリプトが作成されていました。

$ which code
/usr/local/bin/code
$ cat /usr/local/bin/code
#!/usr/bin/env bash
#
# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See License.txt in the project root for license information.
（以下略）

また、コマンドで開く利点として、ターミナルのカレントディレクトリを VSCode 開きたい場合、

code .

で開くことができ、VSCode を開いてからフォルダーを選ぶよりは少し楽だと思います。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

GitLens を好みの設定に変更する

Sat, 25 Jun 2022 08:33:45 +0900

Git との連携に欠かせない GitLens 。個人的にはソースコード上に色々表示され過ぎに感じるんですが、非表示にできるようなので設定を見直しました。
設定項目が 218 個（v12.1.1時点）もあって個々に見るのは辛いので、「GitLens Setting editor」から設定するのが良さそうです。

GitLens Setting editor を開く

「GitLens Setting editor」を開くには、コマンドパレットから「GitLens：Open Settings」を選択します。コマンドパレットは、

Windows なら Shift + Ctrl + P
Mac なら Shift + Command + P

で表示されるので、「GitLens：Open Settings」を選択します。
何文字か入力してから探すと良いです。

設定を変更する

後は自分の好みで変更するだけです。以降は自分の設定を紹介します。
設定を反映する範囲を「User」か「Workspace」か選択できますが、自分は「User」で自身が使う全体の設定にしています。

まず、開いたソースコード上には色々表示されたく無いので、Blame などは非表示にしています。

Blame あり

Blame なし

なので、以下のチェックボックスは Off にしています。

Current Line Blame
Git CodeLens
Hovers

後は日時の書式を、分かりやすい表記に変えています。
「6 Years ago」→「2016/11/13 05:41:00」
「7 25th, 2018 7:18 夜」→「2018/07/25 19:18:00」
とかですね。

Commits view
- Commit description format : ${author, }${date}
Stashes view
- Stash description format : ${stashOnRef, }${date}
File Blame
- Annotation format : ${message|50?} ${date}
Status Bar Blame
- Annotation format: ${author}, ${date}${’ via ‘pullRequest}
Dates & Times
- Date format : YYYY/MM/DD HH:mm:ss
- Time format : HH:mm:ss

editor なら個々の設定項目を追うより大分楽ですね。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon)

RESTful API を VSCode から実行するには

Sat, 27 Nov 2021 20:29:00 +0900

RESTful API のテストをしたいときなど、VSCode で REST Client 拡張機能を使うと便利です。

VSCode に REST Client 拡張機能を追加する

環境

Visual Studio Code バージョン: 1.62.3
REST Client バージョン: 0.24.5

インストール手順

クリックして「拡張機能」を選択
“rest-client” で検索
「インストール」をクリック

RESTful API を実行する

NHK番組API を例に実行してみます。

@area = 130
@service = g1
@date = 2021-11-27
@apikey = xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

@genre = 0000

###
GET https://api.nhk.or.jp/v2/pg/list/{{area}}/{{service}}/{{date}}.json?key={{apikey}} HTTP/1.1

###
GET https://api.nhk.or.jp/v2/pg/genre/{{area}}/{{service}}/{{genre}}/{{date}}.json?key={{apikey}} HTTP/1.1

@マークで変数が定義でき、使うときは括弧を二重にして記載します。
@apikey の値はアカウント登録して取得してください。

要求を右クリックしてメニューから「Send Request」を選択するか、

Windows なら Ctrl + Alt + R
Mac なら ⌥ ⌘ R

キーで実行できます。

右側に結果が表示されます。
試す環境が用意できず確認できていませんが、POST 要求でボディを送ることや認証の設定もできるので、テストの際は便利だと思います。

要求のコードを生成する

要求を右クリックしてメニューから「Generate Code Snippet」で、以下のコードを生成することができます。

C
Clojure
C#
Go
HTTP
Java
JavaScript
Kotlin

JavaScript → fetch を選択した場合は、以下のように右側に生成したコードが表示されました。

fetch の他は jQuery、XMLHttpRequest、axios を選択することができます。
使い所はパッと思いつきませんでしたが、興味を引く機能ですね。

ソースコードの差分を GitLens で確認するには

Sat, 20 Nov 2021 20:27:11 +0900

ソースコードを git で管理しているとき、差分を確認するには VSCode 上で GitLens 拡張機能を使うと便利です。

VSCode に GitLens 拡張機能を追加する

環境

Visual Studio Code バージョン: 1.62.3
GitLens バージョン: 11.7.0

インストール手順

クリックして「拡張機能」を選択
“gitlens” で検索
「インストール」をクリック

コミットの変更を表示する

「axios」を例にするので、ローカルにクローンしました。

「ソース管理」をクリック
「COMMITS」を開く
コミットを開くと変更したファイルが分かるので、見たいファイルを選択

で確認することができます。

コミット間の差分を表示する

比較元のコミットを右クリックしてメニューから選択すれば OK です。

Compare with HEAD → HEAD と比較
Compare with Working Tree → 現在作業中のブランチと比較
Select for Compare → 比較元として選択

「Select for Compare」を選択した場合、比較先のコミットを右クリックしたとき「Compare with Selected」があるので選択します。

「SEARCH & COMPARE」で、コミット間のファイルとその内容の差分が確認できます。

比較を消したいときは、「Clear Results」アイコンをクリックします。

１つのファイルを過去と比較するには

対象のファイルを開いてから「ソース管理」を選択後、「FILE HISTORY」の方で同様に確認できます。

複数コミットに渡ったレビューするときに、レビューする側される側どちらになった場合でも、知っておくと便利だと思います。

Visual Studio Code実践ガイド (Amazon) Visual Studio Codeデバッグ技術 (Amazon) Docker Desktop for Windows/Mac と VSCode でつくるクリーンな開発環境構築入門 (Amazon) Software Design (ソフトウェアデザイン) 2021年6月号 (Amazon)