VSCode でエディタを別ウィンドウで開けるようになった
以前から欲しかった機能がやっと使えるようになりました
フローティングウィンドウとか呼ばれる機能です

ブラウザみたいにタブをウィンドウの外に持っていったら独立したウィンドウで開きたいのですがそれができなかったのですよね
ワークスペースの複製みたいな特殊なことをすればできなくはなかったですが やっぱり特殊な操作が必要で手軽なものではなかったです

それが今回のアップデートからはブラウザと同じ感じでタブを移動できます
しかも 2 つのウィンドウで同じファイルを開くと 画面分割で同じファイルを開いてるときと同じようにリアルタイムに両方に反映されます
とてもいいですね

ただ実装されるまでが長すぎて画面分割で慣れてきてしまって 最近はあんまりウィンドウ分けたいなと思わなくなりつつあったりもしますけど
AI 補完結構良さそう
最近はコードの補完を AI がやってくれるサービスがあると聞きます
ただ有料だったりで気楽に使えなそうと使うことはなかったのですが VisualStudio 2022 で C# を書いていたら補完候補を出してくれました
for 文みたいな毎回同じパターンで書くところは手入力だと面倒なのでかなり楽です

関数名から中身を全部作るみたいのは あまり期待通りに動かなそうで良い印象はなかったですが こういう小さい範囲での補完なら扱いやすそうです
VSCode でも導入したくなりました
でも VSCode の拡張機能でこういうのに対応してるのはどれも有料なんですよね
VisualStudio みたいに標準機能として実装されると嬉しいです
Yarn PnP を使うと JavaScript でライブラリの補完が出なくなる
Yarn4 から PnP を使おうとしています
速度面では問題もあるものの WSL やネットワーク越しの環境でサーバーを起動するようなケースはむしろ速くなってあまりデメリットもなさそうです
フロント関係でも Vite は Yarn PnP をサポートしてるので 開発用サーバーを起動できますし HMR も使えています
これなら PnP を普段遣いにしてもいいかも と思ってました

しかし VSCode との相性に問題がありました
VSCode は Yarn PnP でインストールされたパッケージを認識しないので 補完機能が動かなくなります
使い慣れてるライブラリだと特に問題を感じてなかったのですが 使い慣れないものや機能が多いライブラリを使ったときに補完が出ないのが結構不便でした
VSCode では JavaScript でもライブラリの関数の引数などは情報を見ることができるようになっています
選択式のところは補完の候補から選んだりもできます
これがないと毎回ライブラリの API のページを見ないといけないのが不便です

対応することはできるのですが 補完機能には TypeScript の機能が使われているので 実際には TypeScript を使わないのにライブラリの補完のためだけに TypeScript をプロジェクトにインストールしないといけないです

やり方はこんな感じです (参考)

VSCode の拡張機能の ZipFS をインストールします
これは Yarn のチームでメンテしてるもののようです
汎用的なものではなく Yarn PnP のためだけのものみたいですね

次にプロジェクトに TypeScript をインストールします

yarn add -D typescript

SDK をインストールします

yarn dlx @yarnpkg/sdks vscode

これを実行すると今のプロジェクトで使われてるツールを自動で認識して必要なものをインストールしてくれるようです
TypeScript 以外にも eslint が使われていたら eslint の SDK がインストールされます

あとは VSCode のコマンドから TypeScript のバージョンを切り替えます

Ctrl-Shift-P
→ TypeScript: Select TypeScript Version...
→ Use Workspace Version

VSCode 組み込みのものからワークスペースのものに切り替えると TypeScript の機能が有効になります
TypeScript をインストールしていないとワークスペースのバージョンが存在しないので切り替えができません

これでライブラリの補完ができるようになりました

ちなみに SDK のインストールですが TypeScript のみの環境ではこうなりました
.vscode フォルダに extensions.json と settings.json が追加されました
extensions.json では推奨される拡張機能に ZipFS が記載されて settings.json では↓のような内容が追加されています

{
"search.exclude": {
"**/.yarn": true,
"**/.pnp.*": true
},
"typescript.tsdk": ".yarn/sdks/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true
}

ここのパスにも記載がある .yarn/sdks/typescript に TypeScript の SDK がインストールされています

ライブラリの API の補完機能が欲しいだけなのにすごく面倒ですよね
TypeScript を使うプロジェクトなら最初からインストールしてるわけなので別にいいかとも思えますが シンプルな JavaScript のプロジェクトでやりたいものではないです
GitLab のウェブ IDE が VSCode になってた
久々にウェブ IDE を使ったら VSCode の画面になってた
リポジトリのフォルダを VSCode で開いてるのとほぼ変わらなくて使いやすい
ファイルの保存というのはなくて まとめてコミットすることになる
ローカルで Git を使わずウェブの UI だけで使うにはすごく便利

これまで Gist においてたようなのは GitLab にしようかな
すでに公開する系を色々まとめておくためのリポジトリは用意してるし

便利すぎて Ctrl-S を押す感覚でコミットして 動作確認は Pages 画面でやればいいかみたいになってる
でも Git でバージョン管理するものとしてはふさわしくない気がする
期待通り動くようになった時点でそれまでのコミットを squash でまとめられたらいいけど
GitLab の UI を通してはできないような気がする
ブランチも master だし
ブランチのプロテクト解除してローカルで書き換えてから force push かな
でもとりあえず色々まとめておいてるだけのリポジトリでそこまで頑張る必要もないかも
VSCode で WSL 内のファイルを編集する
VSCode の拡張機能で WSL と接続できます
接続すると そのウィンドウは WSL 用に開き直されますが まだフォルダを開いた状態にはなっていません
フォルダを開いたら あとは Windows のときと同じようにサイドバーからファイルを選んで編集できます

特定のフォルダを開かずに WSL 内のファイルを編集したいときはフォルダを開かずそのまま使えます
Ctrl-O や File > Open File でファイルを開こうとすると Windows のダイアログのかわりにコマンドメニューが表示されます
ここでパスを指定することでファイルを開けます

ですが あまりこの方法は使いやすくないです
WSL なのでコマンドラインから操作したいです

そういうときは Ctrl-@ でターミナルを開きます
WSL に接続してると PowerShell の代わりに WSL のシェルが起動します
ここで

code foo.txt

のように code コマンドを実行すると VSCode のタブで開いてくれます
ファイルがなければ新規作成されます
nano や micro など WSL 内のエディタを開く感じで VSCode でファイルを編集できます

なんらかのコマンドの出力結果を VSCode で編集したり確認したりしたいなら code コマンドのパラメータに 「-」 を指定することで標準入力を受け取れます

apt list --installed | code -

のようにできます

かなり便利なので Windows Terminal で WSL は開かずに VSCode だけで十分かもしれません
VSCode のデバッグ実行で pino のログが出ない
内部で pino が使われているものを使っていたとき ログが表示されるはずなのに出ていません
console.log を使っている出力は表示されています
VSCode でデバッグ実行していたので 一応ターミナルから直接実行もしてみると ちゃんと表示できています
なぜ?

pino 側の問題かなと思って直接 pino を使って簡単なコードを用意しました

const pino = require("pino")

const logger = pino({ level: "info" })

logger.info("PINO LOG")
console.log("CONSOLE LOG")

これをデバッグ実行すると これでも CONSOLE LOG だけしか表示されないです
中でどういう出力をしてるのだろうと pino の中を見ると stream への書き込みを行っていました
stream を作成してるのはここです
https://github.com/pinojs/pino/blob/v8.15.1/lib/tools.js#L329

stream = buildSafeSonicBoom({ fd: process.stdout.fd || 1 })

SonicBoom に { fd: 1 } を渡しています
ターミナルからでも VSCode のデバッグ実行からでも process.stdout.fd は 1 でした
ということは 普通に process.stdout.write しても出なさそうですね

process.stdout.write("STDOUT LOG\n")
console.log("CONSOLE LOG")

を試してみましたが やはり CONSOLE LOG だけでした

VSCode のデバッグ実行だと console.log が置き換えられてそうです
となると process.stdout.write を置き換えて 中で console.log するしかない?
でもデバッグ実行のためだけにやりたくない変更です
それに stdout への直接書き込みは末尾に改行が自動追加されないですが console.log だと自動追加されて消せなかったはずですし

デバッグ実行してる場合の仕方ないものとして諦めつつも一応ググってみると解決策がありました
launch.json を作って設定に 「"outputCapture": "std"」 を追加すれば標準出力もキャプチャしてくれるようです

{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch Program",
// 略
"outputCapture": "std"
}
]
}

これで pino のログも表示されました
VSCode で最初に開くときに以前のウィンドウを復元したくない
VSCode の全ウィンドウを閉じた状態で VSCode を起動すると最後に開いていた全部のウィンドウが起動します
「File > Exit」でまとめて終了すると全部が起動します

それぞれのウィンドウが結構な量のメモリを消費するので それらのワークスペースを開かない限りは復元せずに何もない空の状態のウィンドウが起動してほしいです

設定を探すと window.restoreWindows というのがありました
none にすると良いようです

"window.restoreWindows": "none"

これで解決かと思ったのですが 複数のウィンドウが開くときがあります
フォルダを開いておらず未保存のファイルが残っているとそのウィンドウは必ず自動で復元されるようです

フォルダを開いていない場合は ウィンドウを復元しなければ未保存のファイルにアクセスする方法が残ってないからだと思います
フォルダを開いていないウィンドウはワークスペースとして管理して ワークスペースを開くから一覧出してくれるとかして くれるといいのですけどね
そうすれば一覧からいつでも開けるので 未保存があっても復元せずに済みますし
VSCode のタブアイコンが見づらくなった
最近のアップデートでタブアイコンが見づらくなりました
空白文字を表示する設定にすると スペースやタブを「・」や「→」で表示してくれてわかりやすくなります

以前までは「→」が大きくて見やすかったのに小さくなりました

vscode-tab-char

見づらすぎです
タブよりスペース派が多いらしいですし タブの見やすさは重視されていないんでしょうか

設定でもとに戻せないかなと探してみると 戻せました

Editor: Experimental Whitespace Rendering」 という設定です
svg / font / off の 3 つの選択肢があってデフォルトは svg になっています
これを off にするとこれまでのアイコンに戻ります
VSCode で上下を簡単に揃える
ソースコード上で = や : の上下位置を揃えようとする人がいます
個人的にはムダでしかないので不要だと思いますし フォーマッターがやるにしても差分が増えてしまうのでやってほしくないものです

しかし ものによっては視覚的に縦に揃えて見たい ということもあります
例としてはこういう感じで揃えて見たいです

const one = 100001
const two = 100002
const three = 100003
const four = 100004
const five = 100005
const six = 100006
const seven = 100007
const eight = 100008
const nine = 100009
const ten = 100010
const eleven = 100011
const twelve = 100012
const thirteen = 100013
const fourteen = 100014
const fifteen = 100015
const sixteen = 100016
const seventeen = 100017
const eighteen = 100018
const nineteen = 100019
const twenty = 100020



const one       = 100001
const two = 100002
const three = 100003
const four = 100004
const five = 100005
const six = 100006
const seven = 100007
const eight = 100008
const nine = 100009
const ten = 100010
const eleven = 100011
const twelve = 100012
const thirteen = 100013
const fourteen = 100014
const fifteen = 100015
const sixteen = 100016
const seventeen = 100017
const eighteen = 100018
const nineteen = 100019
const twenty = 100020

対応してるフォーマッターがあればいいですが こういうことをするのは少数だと思います
それに準備が面倒です
たまにしか使わないので 件数が少ないなら手作業でしたほうが早いです

とは言え ある程度の件数になると手作業でやるのも嫌になってきます
方法のひとつは / *= */ を \t に置換してエクセルにコピペです
ソースコード自体が揃う必要はなく確認用なのでこれでもいいです

しかしエクセルって結構開くのに時間がかかりますし 入れてない PC も多いです
で いい感じにできないものかと考えていたら VSCode 標準機能だけで工夫すれば簡単にできました
エクセルを起動する間に終わってしまいます

こういうデータがあるとします

const obj = {
short1: "a",
middle1: "b",
longlong1: "c",
short2: "A",
middle2: "B",
longlong2: "C",
}

マルチカーソルで全部の「:」を選択して 右にスペースを多めに確保します
最初の「:」を選択して Ctrl-D を繰り返し押せば次の「:」も追加で選択できます

const obj = {
short1: "a",
middle1: "b",
longlong1: "c",
short2: "A",
middle2: "B",
longlong2: "C",
}

こんな感じで一番長いキーの「:」よりも一番短いキーのバリュー位置が右になったら十分です

次はスペースを幅 0 の矩形選択で縦に選択します
「|」が選択位置を表しています
マウスのミドルクリックのドラッグや Ctrl-Shift-Alt-←↑↓→ で矩形選択できます

const obj = {
short1: | "a",
middle1: | "b",
longlong1: | "c",
short2: | "A",
middle2: | "B",
longlong2: | "C",
}

Ctrl-Shift-→ で各行を次の区切りまで範囲選択します
その後に Shift-← や Ctrl-Shift-← などでスペースのみを選択するように調整してから選択範囲を削除します
こうなりました

const obj = {
short1: "a",
middle1: "b",
longlong1: "c",
short2: "A",
middle2: "B",
longlong2: "C",
}

揃ってますね
慣れるとササッと操作できるので置換してエクセルを起動してる間には VSCode 上で揃えてしまえます
VSCode のタイトルバーが改良された
最近記事に書いた VSCode の Command Center 機能
便利だけど File や Edit などのメニューが隠れるのが不便だなーと思ってたらすぐに改善されてました

以前はタイトルバーで右クリックしても最大化や最小化みたいな普通のメニューでした
それが Menu Bar や Command Center などの機能の表示非表示を切り替えれるようになってました

vsc1-70

Menu Bar を有効にすると File などのメニューが表示されて 幅が足りずに入りきらなければ途中から ... になるようになりました
Menu Bar を無効にすると ≡ アイコンにまとめられますがタイトルバーではなくサイドバーに表示されるようです
VSCode の Command Center 機能
変更履歴を眺めてたら見つけた Command Center 機能
デフォルトでは OFF なので設定で ON にします

有効になるとタイトルバーが変化します

vscode-command-center

普段なら中央にウィンドウのタイトルとして編集中ファイル名が表示されていました
これがコマンド入力欄に切り替わります
Ctrl-P で出てくるものと同じです
押しづらいショートカットキーでしたし 直近に開いたファイルへの切り替えはマウスだけで操作したいときもあるので嬉しい機能です
もともとのタイトル表示は全くと言っていいほどいらないものでしたからね

Ctrl-P で出てくるのと同じなので 開いた直後は直近で開いたファイルのリスト兼検索機能ですが 「>」 を入力すれば Ctrl-Shift-P と同じようにコマンド入力ができます

ただちょっと不便なところもあって File とかのメニューが左上の ≡ アイコンにまとめられてしまいます
コマンド欄を右の方に寄せれば十分収まりそうなんですけど ウィンドウ幅 1920px にしても ≡ のままでした

直ぐに改善された
VSCode の検索のフォルダ指定
Ctrl-Shift-F を押したり サイドバーの虫眼鏡アイコンから出てくる検索画面
「files to include」 というところに 「*.js」 や 「src/**/*.js」 といった形で指定することで対象のファイルを制限できる

「src/**/*.js」 だと src フォルダの全部の .js ファイルだけど src フォルダが複数あれば全部が対象になる
「app1/src」 と 「app2/src」 があれば両方から探される
どちらかに制限したい場合は親も指定すればできる 「app1/src/**/*.js」

親がなくて 開いたフォルダの直下に 「src」 があって 「subapp/src」 もある場合
探したいのは直下の 「src」
ルートからの検索になるからと思って 「/src/**/*.js」 と書いたら見つかるはずのものも見つからなかった

「/」 は開いたフォルダのルートではなくファイルシステムのルートになるみたい
Windows の場合は 「/src」 は 「C:\src」 フォルダが対象になってる
開いたフォルダのルートから検索したい場合は 「./」 にすればできた
カレントディレクトリが開いたフォルダのルートという扱いみたい
「./src/**/*.js」

開いたフォルダ内のみって思ってたけどパス指定すればフォルダ外も検索できるのは結構便利そう
VSCode ですべての日本語が黄色い枠線で囲まれる
少し前から全角スペースや全角ハイフンなどが黄色い枠線で囲まれるようになったのは知ってましたが 今見るとなぜかすべての日本語に枠線がついています
日本語の文章を書いていると さすがにこれは邪魔すぎです

設定を見てみると

Editor > Unicode Highlight: Non Basic ASCII

というのがあってデフォルト値は 「inUntrustedWorkspace」 でした
最近はフォルダを開くときに信頼できるフォルダか聞かれます
ここで信頼できると答えないと ASCII 以外の文字はすべてハイライトされるようです
悪質なものだと隠し文字とかが挟まってたり 似ている別の文字が使われていたりしそうですし そのデフォルト挙動の理由はわかります

普段は開いたフォルダで色々実行したりもするので信頼できるかの確認で YES と答えてます
ですが ちょっと試しになにかするくらいなもので今この場で一瞬使うだけみたいなフォルダだと わざわざ権限を追加する必要もないので NO にしてます
その結果 日本語が全部ハイライトされたようです

設定を false にしてハイライトを無効にしてもいいですが 信頼できないフォルダを開くときに ASCII 以外があることを教えてくれる機能なわけですし 自分で作ったフォルダなら少しだけテキスト編集するのであっても信頼できるを選んでおいたほうがいいのかもしれません
VSCode の言語の自動判定を無効にする
VSCode で新規ファイルを開いて文字を入力してると自動で言語が判定されて色がついたりします
HTML みたいなわかりやすいものだと精度が高いですが そうでもないものだと間違いが多いです
特に完全なコードではない部分的なものを書いてるときには違う言語が選択されることが多いです
また メモ用途でプレーンテキストとして書いていてもコードとして扱おうとして誤った選択をされます
ただ間違ったシンタックスハイライトをされるだけならまだしも 間違ったファイルタイプを基に拡張機能のインストールを勧めてきたりしてとても邪魔です

オフにしようと設定を探すと Language Detection というものがありました
これのチェックを外します

これで新規ファイルは Plain Text のままになります
勝手に判断して言語モードを切り替えられることがなくなります
VSCode でタブキーを押すとフォーカスが移動する
タブ文字を入力したくてタブキーを押してるのに入力されず 代わりにフォーカスが別のところに移動します
ブラウザの標準の textarea でタブを打つと次の input に移動してしまうみたいな状況です

以前もこの状態になったことがあったのですが 直し方がわからず VSCode 全体を再起動することで直ったこともあってバグかなと思ってました
今回 その原因がわかりました

ちゃんとした タブ入力でフォーカス切り替えを行うモードでした
このモードが有効になっていると右下の現在のカーソル位置などが書いているところに「Tab Moves Focus」と表示されます

そして Ctrl-M キーがこのモードを切り替えるショートカットキーになっていました
Ctrl-N のつもりで間違って押していたのでしょう

知らないうちにモードが切り替わってしまうと直し方がわからず困りますね
VSCode で一旦閉じたファイルの Ctrl-Z や Ctrl-Y が使える
VSCode で編集していて 一旦閉じたファイルだけどちょっと前の状態に戻したいなと思ってダメ元でもう一度開いて Ctrl-Z を押したら戻せた
VSCode を閉じるまではファイルを閉じても保存されてるみたい

助かる機能だけど 間違って Ctrl-Z しすぎないように一旦確定のためにファイルを閉じて開き直すってやってたのが意味無いのはそれはそれで怖いかも
Atom って生きてるの?
Facebook が VSCode をデフォルト開発環境にするみたい
最近はエディタ戦争が終わって VSCode の一強感

最近全く聞かないけど Atom ってどうなってるんだろう?
そういえば Atom って Github が作ってるんだっけ
で Github ってマイクロソフトのものになったわけでマイクロソフト製エディタが VSCode
Atom 続ける必要ないんじゃ……
両方使ったことあるけど Atom のほうが良かったところなんて特に記憶にないし
VSCode でエラーが出る
VSCode で HTML として編集中のファイルで script タグの中で 継承したクラスの static プロパティを追加しようとするとエラーが出ます

まずは HTML として新規ファイルを編集します

Ctrl-N Ctrl-K,M html Enter

空のクラス定義を書きます(ここはコピペ可)

<script>
class A extends Foo {

}
</script>

ここの A の定義に

static aaa = 1

を追加します

「static a」 まで入力したタイミングで右下にエラーの通知が出ます
気にせず 「static aaa」 まで入力すると 画面の下半分にコンソールが出てきてエラーが表示されます
3 連続エラーで発生?

LitElement 使ってると 「static properties = {}」 とか 「static styles = css``」 とかよく書くのでそのたびに出てくるのは結構邪魔です
HTML じゃなくて .js ファイルにすればいいのですが file:/// スキームだと module の .js ファイルをロードできないので HTML の sript タグに埋め込んでるのですが そうするとこれの影響を受けます
VS Code の Python 拡張がメモリ使いすぎ
VS Code の Python 拡張を使うとメモリが使用どんどん増えていく
制限なく増えて 10GB 超え
この辺からは物理メモリに乗らなくなってきて PC の動きが重くなってくるから強制的にプロセス落としてるけど自動で再起動するし しばらくしたらまたメモリが 10GB くらい使ってる
さすがに 10GB 使うのが正常とは思えないし 定義ジャンプ機能使ったらずっとロード中になってるしバグっぽい
バージョンは最新の (2019.1.0) だし しばらくは無効にして使うしかないかなぁ