Description

As the 'My Dev Tools' extension is primarily intended to serve my needs it may be very limited in its configuration possibilities, but I will try to change this over time.

If there is a larger group of common functions in the extension then this will be separated into a separate extension as soon as the collection of these functions becomes large enough. I do not want the extension to grow indefinitely.

Features:

General

Auto Rename

The Auto rename feature intelligently renames files based on their exported symbols:

Configuration: Set myDevTools.autoRenameStrategy in your VS Code settings:

1. Open VS Code settings (File > Preferences > Settings)
2. Search for "My Dev Tools"
3. Select your preferred "Auto Rename Strategy" from the dropdown

Or add this to your settings.json:

"myDevTools.autoRenameStrategy": "kebab-case"

Toggle File Visibility

This feature allows you to quickly hide or show files in the Explorer based on your workspace files.exclude settings:

How it works:

1. Configure patterns in your workspace settings (.vscode/settings.json):

   {
     "files.exclude": {
       "**/node_modules": false,
       "**/dist": false,
       "**/.git": false
     }
   }
   

2. An eye icon appears in the Explorer toolbar when patterns exist
3. Click the icon to toggle between hiding and showing the configured files
   • Eye icon (open): Files are visible, click to hide
   • Eye-closed icon: Files are hidden, click to show

Note: The icon only appears when you have files.exclude patterns configured in your workspace settings. If no patterns exist, the icon won't be shown.

React

AI Commands

Nothing is built in - every command is your own JSON: what to ask the model, which files to offer it for, what to ask you first, and what to do with the answer.

Commands are merged by id from myDevTools.ai.commands (settings, every project) and .vscode/ai-commands.json (this workspace, wins on conflict). The file has a contributed schema, so you get completion, comments and trailing commas.

Commands in the palette

AI: Run Command lists everything, filtered to the open file's globs. To skip that step, run AI: Sync Commands to Palette once: each command becomes a top-level AI: <title> entry, shown only for the files its globs match, so a **/*.tsx command is absent from the palette while you are in a .ts file. Reload the window when asked - the palette is built from the extension's manifest at startup, which is what the sync writes and why a reload is needed.

Run it again after adding, renaming or reglobbing a command, and after reinstalling the extension, which restores the packaged manifest and with it drops the entries. An id can only become a palette entry if it is made of letters, digits, ., - and _; the sync names any it had to skip. Commands from a workspace file are synced too, but the manifest is shared by every window, so a project-specific command stays in the palette until the next sync.

Every run opens a diff; nothing is written until you press Apply, and applying is a single undo away however many files it touched. A notification reports cost and duration.

{
    "commands": [
        {
            "id": "add-props",
            "title": "Add missing props",
            "globs": ["**/*.tsx"],
            "selection": "context",
            "output": "replaceFile",
            "prompt": "Add every prop the component reads but does not declare to its Props interface."
        },
        {
            "id": "write-tests",
            "title": "Write unit tests",
            "globs": ["**/*.ts", "**/*.tsx"],
            "output": "files",
            "newFilePath": "${fileDirname}/${fileBasenameNoExtension}.test.ts",
            "ruleFiles": ["testing.md"],
            "inputs": [{ "id": "focus", "label": "Anything the tests should focus on?" }],
            "prompt": ["Write unit tests for the selected code.", "${input:focus}"]
        }
    ]
}

Command fields

prompt, system and newFilePath accept ${input:<id>} and VS Code's own file variables: ${file}, ${relativeFile}, ${fileBasename}, ${fileBasenameNoExtension}, ${fileDirname}, ${languageId}, ${workspaceFolder} and ${selection}.

Project rules

Markdown files in .claude/rules whose frontmatter paths match the edited file are attached to the prompt, so commands follow the project's conventions without repeating them:

---
paths:
    - "**/*.ts"
    - "**/*.tsx"
---

"rules": false sends none; "ruleFiles": ["testing.md"] attaches a file whatever its paths say.

Settings

The API key is the same one the commit message feature uses — run "Set OpenRouter API Key" once. To bill AI commands to a key of their own, see Splitting cost across keys.

Splitting cost across keys

By default every feature bills one shared key. If you want to know what commit messages cost you versus AI commands, give them separate keys: OpenRouter's activity panel groups spend by model and by API key, and by nothing finer, so a separate key is the only way to get a separate line in that report.

1. Mint one key per feature at openrouter.ai/keys and name them so the report reads well ("vscode-commit-messages", "vscode-ai-commands"). While you are there you can also give a key a credit limit with a daily, weekly or monthly reset, which caps that feature's spend server-side.
2. Run "Set OpenRouter API Key: Commit Messages" or "Set OpenRouter API Key: AI Commands" from the palette. Plain "Set OpenRouter API Key" asks which scope you mean instead, and shows which ones already have a key of their own.
3. Read the split under Activity, grouped by API key, or export it as CSV.

Setting a key always replaces it: the input box starts empty and no command ever shows a stored key back to you.

A feature with no key of its own falls through to the shared key, so you only have to set the ones you care about. "Clear OpenRouter API Key" on a feature drops it back to the shared key; the picker shows which is which.

Git

Generate Commit Message

Fills the Source Control message box with a message that follows Conventional Commits. Press the sparkle icon in the Source Control title bar, or run "Generate Commit Message (My Dev Tools)" from the palette.

Before the first use, run "Set OpenRouter API Key", choose Shared key, and paste a key from openrouter.ai/keys. It is kept in VS Code's secret storage; OPENROUTER_API_KEY in the environment is used as a fallback. The model is myDevTools.openRouter.model and can be anything OpenRouter serves.

Whatever you have already typed into the message box is sent along as a hint about your intent, then replaced by the finished message.

Settings

Not working yet: the button inside the message box

Out of the box you get the title bar icon only. The sparkle inside the commit message box - where Copilot's sits - does not appear, and cannot be made to appear by installing the extension.

That spot is the scm/inputBox contribution point, which is still a proposed API (contribSourceControlInputBoxMenu). VS Code ignores proposed contributions from any extension not explicitly allowed on the machine, so there is no way to ship it enabled - that gate is the whole point of a proposed API.

To turn it on for yourself, run "Preferences: Configure Runtime Arguments" from the palette, add the extension to argv.json, and restart VS Code:

{
    "enable-proposed-api": ["przpl.my-dev-tools"]
}

Caveats once you have done that:

• It is per machine. Every machine you use needs the same argv.json edit; it does not travel with Settings Sync.
• It can break on a VS Code update. If the proposal is ever finalized, renamed, or dropped, the button disappears again until the extension is rebuilt against whatever replaced it.
• Everything else works without it. The title bar icon and the palette command are on stable API and need no flags.

Quick Commit

This feature allows you to quickly stage and commit selected files from the Source Control panel:

1. Open the Source Control panel (Ctrl+Shift+G)
2. Right-click on one or more changed files
3. Select "Quick Commit..." from the context menu
4. Write the commit message in the editor that opens, or press the sparkle icon to have one written from the diff of just those files
5. Press Ctrl+Enter (Cmd+Enter on macOS), or the check mark in the editor title bar, to stage and commit the selection

Auto Stage

Stages the changes that are not worth reading, so that what is left in the Changes group is only what you actually need to review.

1. Open the Source Control panel (Ctrl+Shift+G)
2. Click the sparkle icon on the "Changes" group header, or right-click the group and select "Auto Stage"

A file qualifies when its working-tree version is the same code as the version already in the index, only laid out differently. Both versions are parsed and compared, so the verdict never depends on how the diff happens to be laid out.

Covered formats: .ts .tsx .mts .cts .js .jsx .mjs .cjs, .json .jsonc (including files that carry comments, such as tsconfig.json), and .css .scss .less.

Everything else is left for you to read: any real content change, added, deleted, untracked and conflicted files, mode-only changes, lock files, and every format where whitespace is content - Markdown, YAML, Python, plain text - where an "invisible" change can quietly be a different document.

The classification is deliberately a separate step from the staging, so further rules can be added over time without changing how the command behaves.

Stage Active File

Staging one file at a time from the Source Control panel means moving the mouse back and forth between the diff and the list. This command stages whatever file is in front of you instead:

1. Open a changed file as a diff
2. Press Ctrl+Alt+S (Cmd+Alt+S on macOS)

It works from either side of the diff, from a diff tab that does not have focus in its content, and on the file the caret sits in inside a multi-diff editor. Outside a diff editor the shortcut is inactive, but the command is still available in the palette for the file in the active editor.

Note: when reviewing changes in the multi-diff editor ("Open All Changes"), VS Code's built-in Git extension already puts a + button in each file's header toolbar that does the same thing with one click.

Update Props Destructuring

This feature helps keep your React component props up-to-date with their interface definitions:

• Can be manually triggered using the "Update React Props destructuring" command in the command palette.
• Automatic real-time updates are disabled by default but can be enabled in settings.
• Real-time updates can be toggled on/off using the "Toggle React Real-Time Props Update" command.
• Configuration: Set myDevTools.enableRealTimePropsUpdate to true or false (default) in your VS Code settings.

To enable real-time updates:

1. Open VS Code settings (File > Preferences > Settings)
2. Search for "My Dev Tools"
3. Check the box next to "Enable real-time updates for React Props destructuring"

Or add this to your settings.json:

"myDevTools.enableRealTimePropsUpdate": true

NestJS