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

Option	Available in	Description
Go to nearest index.ts	Command palette	Open nearest index.ts file in one of the parent folders.
Add to exports in index.ts	Command palette	Add selected symbol to exports in nearest index.ts. If no symbol is selected then everything will be exported (export *)
Rename to...	File context menu / Command palette	Rename file to camelCase, PascalCase, snake_case or kebab-case.
Auto rename	File context menu / Command palette	Automatically rename file based on exported symbols (class, function, interface, etc.). Uses configurable naming strategy.

Auto Rename

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

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

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

Or add this to your settings.json:

"myDevTools.autoRenameStrategy": "kebab-case"

React

Option	Available in	Description
Create SCSS Module	TSX file context menu	Right click on a .tsx file to create corresponding .module.scss file. Styles import will be automatically added to the component.
Update Props Destructuring	Automatic / Command palette	Updates the props destructuring object in React components to match the Props interface. Can be triggered manually or automatically.
Add empty props to React component	Command palette	Adds an empty Props interface to a React component that doesn't have any props.
Add undefined props to interface	Command palette	Detects undefined symbols used in JSX and adds them to the Props interface with smart type guessing.

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:

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