はじめに
.vscodeのsettings.jsonとextensions.jsonを自動生成するツール(vscode-autoconfig)を作ってみました。
作った経緯
きっかけは自分が関わっていたプロジェクトの開発環境が全然整備されていなかったことでした。
.vscode フォルダすらなく、ESLintやフォーマッタの設定もメンバーの手元にバラバラに存在している状態でPRレビューの効率が大幅に落ちていると感じていました。
(フォーマット差分がかかりすぎてどこに変更が入ったのかわからない問題等)
さすがに直そうと思い、Claudeに「このプロジェクトに合った .vscode/settings.json と extensions.json を作って」と頼んで整備していたのですが、これが地味にストレスでした。
なぜならば、Claudeでは.vscodeは保護パスに設定されており、書き込みはユーザの許可が必ず必要だからです。(参考)
--dangerously-skip-permissionsフラグでユーザ許可を必要とせずに実行できるようですが、さすがに業務のコードベース上でとんでもなく危険なフラグの許可はできないので、.vscodeがないプロジェクトを触るたびに、同じようなプロンプトを打ち、提案されたファイルの中身を確認して、書き込みを承認して……という一連の作業を毎回手動でやる必要がありました。
どうにか自動化できないか or Claude君に作ってもらえないかを考えて既存で何かないか調べたのですが良さそうなツール等は見つからず、、、、
ないなら作るかということで作ってみました。
vscode-autoconfigとは
vscode-autoconfig は、プロジェクト直下のマニフェストファイル(package.json / requirements.txt / pyproject.toml など)を解析し、あらかじめ用意されたルールテーブルに基づいて .vscode/settings.json と .vscode/extensions.json の差分を提案してくれるCLIツールです。
(名前はもうちょっとよさそうなものがありそうですが、思いつかず。。。。)
使い方
使い方はとてもシンプルで、対象のプロジェクトのディレクトリで以下のコマンドを打つだけです。
npx vscode-autoconfig # dry-run: 何が変わるかを表示するだけで、何も書き込まない
npx vscode-autoconfig --write # dry-runで表示された内容を実際に適用する
dry-runがデフォルトの動作になっていて、--write (または -w) を明示的に付けない限りファイルには一切書き込まれません。
私がビビりなので上述のような設計にしました。
勝手にファイルが作られたり更新されるのは怖いため、デフォルトでは差分のみを表示し確認後に更新するというフローにしています。
差分確認コマンドを実行すると、こんな感じの出力が得られます。
vscode-autoconfig — dry run (no files written)
Detected
node typescript (devDependency)
node react (dependency)
.vscode/settings.json (will be created)
+ typescript.tsdk: "node_modules/typescript/lib"
.vscode/extensions.json (will be created)
+ dbaeumer.vscode-eslint
+ dsznajder.es7-react-js-snippets
2 settings, 2 extensions would be added.
Run again with --write to apply.
何が検出されて、何が追加されるのかが表示されるので、確認してから --write で適用するという使い方になります。
対応言語
現時点で対応しているのは以下の2つです。
-
Node.js:
package.jsonの dependencies / devDependencies、tsconfig.jsonや ESLint / Prettier の設定ファイルなど -
Python:
requirements.txt、およびpyproject.toml(PEP 621形式・Poetry形式の両方)
とりあえず動くものを作りたかったため、適用ルールや言語を絞ってつくりました。
そのため、現時点では適用ルールや言語が少ないです。
(今後増やしていきたいと思います。)
使用技術と選定理由
| 技術 | 採用理由 |
|---|---|
| TypeScript |
npx で誰でも気軽に試せるCLIにしたかったため |
| tsup | ビルドが速く、CLIツールの開発体験を損なわないため |
| commander | CLIの引数・オプションのパースを素直に書けるため |
| zod | ルール定義(JSON)のバリデーションに使い、壊れたルールファイルを早期に検出するため |
| jsonc-parser / yaml / smol-toml |
settings.json のようなJSONC、外部ルールファイルのYAML、pyproject.toml のTOMLをそれぞれ正しくパースするため |
| vitest | 高速なテスト実行環境として採用 |
npmでの配布・実行速度を重視したため、TypeScript + tsupという組み合わせを選びました。
感想
TypeScriptは業務で触ったことがあったのですが、TypeScriptでCLIツールを作ったのは初めての経験でした。
普段Webアプリ側のコードは書いていても、bin フィールドの設定やnpm publishまわりは触ったことがなく勉強になりました。
(多分、AIなかったら作れてません and 公開できてません)
初めからAIを使った開発を想定してたので、settings.jsonの言語オーバーライドまわりの考慮や実装方針や、既存設定の扱いなどを作成前から考慮できていたのはよかったのかなと思いました。
今後
現状はNode.jsとPythonのみの対応で、検出できる依存関係やルールもまだ限られています。
そのため、今後は検出可能言語を増やしたり、ルールの充実を少しずつ進めていこうかと思っています。
もし触ってみて要望等あれば、GitHubのIssueなどで教えてもらえるとうれしいです。
本記事のスター/githubのstarとかもらえると嬉しいです(小声)