とことんDevOps | 日本仮想化技術のDevOps技術情報メディア

DevOpsに関連する技術情報を幅広く提供していきます。

日本仮想化技術がお届けする「とことんDevOps」では、DevOpsに関する技術情報や、日々のDevOps業務の中での検証結果、TipsなどDevOpsのお役立ち情報をお届けします。
主なテーマ: DevOps、CI/CD、コンテナ開発、IaCなど

開催予定の勉強会

読者登録と各種SNSのフォローもよろしくお願いいたします。

月刊VS Code通信(10月号)

こんにちは。
春秋は過ごしやすくていいといっていた日が恋しくなるような寒暖差が激しい日々が続きますが、いかがお過ごしでしょうか。 第3回目となるVS Code通信10月号になります。

目次

Visual Studio Code ニューリリース

Visual Studio Codeのバージョン1.83がリリースされました。

主なリリース

変更点 変更内容
アクセシビリティの改善 プルリクエストのコメントに対するスクリーンリーダーをサポート
コマンドパレットの検索性を改善 ToggleやTurn on/offなど似た名前のコマンドを検索結果でレコメンド
プロファイルにカスタムアイコンを追加 プロファイルごとにアイコンが選択できるようになり視覚的に認識しやすく
エディタータブの高さ設定 エディタータブの高さを設定画面から変更可能に
エディタータブのピン留め行 エディタータブにピン留め行がサポート。ドラッグ&ドロップで変更が可能に
ノートブックのシンボル移動 ノートブック内のコードシンボルに素早く移動できるように
Pythonデバッガーの更新 Pythonのデバッガー機能に幾つかの更新がありました
[プレビュー]GitHub Copilot テスト機能の改善、チャットがマルチターンに対応

その他詳しいリリース内容については Visual Studio Code September 2023 にアクセスしてください。

コマンドパレットの検索性を改善

これは嬉しい改善ですね。検索といっても日頃開発を行っている皆さんならあいまい検索の大変さはご存知かと思います。
Visual Studio Codeのコマンドパレットもこれまではあいまい検索に対応していなかったので、何か機能を探そうとする時には似たような単語を使い分けて探す必要がありました。
このアップデートで類似ワードにヒットする検索結果をレコメンドしてくれることでこれまでに出会ったことがなかった新しい機能に出会えるかもしれませんね。
余談ですが、Visual Studio Codeのコマンドは2000以上あるみたいです。

エディタータブのピン留め行

タブのピン留め機能向けに、ピン留め行が追加されました。
ピン留めしている場合とそうでない場合でそれぞれ別々の行でタブを表示することができるようになります。
上下にそれぞれドラッグ&ドロップするだけでピン留めの有効化/無効化を制御しやすくなりますね。

ただ、1つ目のピン留めをする際は右クリックしてからピン留めを指定する必要があるようで、2つ目以降からはドラッグ&ドロップでピン留めができるようになります。

試しにやってみました。

まずは設定を有効にします。設定画面を開いて次の項目にチェックを入れます。

適当にファイルを2つくらい開きます。

1回目はピン留めしたいファイルを右クリックしてから「ピン留めする」を選択します。

そうすると新しく追加された行が表示されるようになりました。

ドラッグ&ドロップは分かりにくいので動きがあるもので

拡張機能

人気ランキング

Visual Studio Codeのマーケットプレイスに公開されている人気ランキンを元にしています。

順位 変動 インストール数 拡張機能
1 99.2M(±3.0) Python - Visual Studio Marketplace
2 71.5M(±2.9) Pylance - Visual Studio Marketplace
3 70.8M(±0.9) Jupyter - Visual Studio Marketplace
4 53.4M(±1.6) C/C++ - Visual Studio Marketplace
5 52.6M(±0.9) Jupyter Keymap - Visual Studio Marketplace
6 51.3M(±0.9) Jupyter Notebook Renderers - Visual Studio Marketplace
7 39.9M(±1.2) Live Server - Visual Studio Marketplace
8 37.0M(±1.0) Prettier - Code formatter - Visual Studio Marketplace
9 34.3M(±1.0) IntelliCode - Visual Studio Marketplace
10 32.5M(±1.0) Jupyter Cell Tags - Visual Studio Marketplace

2023/10/05 時点の情報を反映しています

拡張機能のリリース情報

2023/09/08〜2023/10/05までの間にリリースされた主要な拡張機能のみを掲載しています。

拡張機能 バージョン 拡張機能リンク
GitHub Copilot 1.122.466 https://marketplace.visualstudio.com/items?itemName=GitHub.copilot
JavaScript and TypeScript Nightly 5.3.20231004 https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next
Playwright Test for VSCode 1.0.16 https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
Pylance 2023.10.11 https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance
Thunder Client 2.12.7 https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client
GitHub Copilot Chat 0.9.2023100401 https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-chat
Dev Containers 0.316.0 https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers
HashiCorp Terraform 2.29.2023100414 https://marketplace.visualstudio.com/items?itemName=HashiCorp.terraform
Python 2023.19.12771010 https://marketplace.visualstudio.com/items?itemName=ms-python.python
GitHub Pull Requests and Issues 0.73.2023100409 https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github
CircleCI 1.22.1 https://marketplace.visualstudio.com/items?itemName=circleci.circleci

今月の拡張機能

Visual Studio Codeを使って複数のプロジェクトを切り替えながら開発を行っている方におすすめの機能です。
最近では、1つのプロジェクトだけでなくて複数プロジェクトの掛け持ちやプラーベートでの副業なども増えてきているので、プロジェクトを切り替える機会も増えてきているのではないでしょうか。

そんな時にはProject Managerという拡張機能がおすすめです。この拡張機能を使用することでプロジェクトの切り替えが非常に楽になります。それ以外にもタグを使用してグルーピングすることができるので、案件ごとや部署ごと、プラーベートと仕事など好きな単位でグルーピングすることできます。

marketplace.visualstudio.com

使い方

まずは拡張機能をインストールします。拡張機能エクスプローラーから「Project Manager」を検索してインストールします。

拡張機能のインストールが完了したら、アクティビティバーから「Project Manager」を選択します。
既に何かプロジェクトを開いている場合は、このプロジェクトを追加してみましょう。プロジェクトを追加するには「Save Project」を選択します。

登録する際の名前を決めるためにダイアログが表示されますが、デフォルトのままで問題ありません。

再び「Project Manager」を選択すると、先ほど登録したプロジェクトが表示されていることが確認できます。

移動の手軽さを試すために新しいプロジェクトを作成します。プロジェクトを作成したら先ほどの手順を繰り返してプロジェクトを追加します。
プロジェクトを追加したら1回目に作成したプロジェクトに切り替えてみましょう。プロジェクト一覧から1回目のプロジェクト上にマウスカーソルを合わせます。 右端に「Open in New Window」というアイコンが表示されるので、クリックします。

すると新しいウィンドウが開き、1回目のプロジェクトが開かれていることが確認できます。

タグの登録方法

Project Managerではプロジェクトをタグでグルーピングすることができます。タグを登録するには、鉛筆のアイコンをクリックします。
json形式でプロジェクトの設定が記述されているので、タグを追加します。ファイルの編集が終わったら、ファイルを保存するときと同じように保存します。

再びProject Managerを開くと、タグが追加されていることが確認できます。もし、表示されていない場合は、リストの表示形式か表示するタグの設定を変更してみてください。

おわりに

今回のリリースでは地味だけど意外といいかもと思えるような機能がいくつかあったように思いました。
個人的には、タブ高さを細くする設定を早速使ってみたのですが、最近フロントエンドまわりをあれこれ書いていると余白の狭さに何となく落ち着かなさを感じてしまいます。ただ、ピン留め行の新レイアウトがリリースされたことを考えると、これ以上エディタ領域を狭くしないためにはいい設定なのかもしれないですね。

ピン留め機能をそもそもあまり使いこなせていなかったので、今後もあれこれ試行錯誤してみたいと思いました。今回のリリースで気になる機能があれば、ぜひ試してみてください。

バックナンバー

月刊VS Code通信 カテゴリーの記事一覧 - とことんDevOps | 日本仮想化技術のDevOps技術情報メディア