TSX Styles Extension for VS Code

A VS Code extension that enhances the development experience when working with TSX (TypeScript + React) and SCSS modules by providing intelligent class name management, navigation, and refactoring tools.

Features

Class Name Management

• Add new CSS classes directly from your TSX files
• Quickly select existing classes from your SCSS module
• Intelligent class name suggestions based on your SCSS module structure
• Automatic creation of new blocks and elements in SCSS

Navigation

• Go to definition for class names (from TSX to SCSS)
• Find references for class names (both directions)
• Side-by-side editing of TSX and corresponding SCSS files

Refactoring

• Rename class names with full project awareness
• Automatic updates of class names across all files

Component Creation

• Quick component scaffolding with matching TSX and SCSS files

Usage

Commands

• tsx-styles-extension.newClassName: Add a new CSS class at cursor position
• tsx-styles-extension.selectClassName: Select an existing class name from your SCSS module
• tsx-styles-extension.showComponentNameInput: Create a new component (available in Explorer context menu)

Context Menu

The extension adds context-sensitive actions when working with JSX/TSX files:

• Right-click in a TSX file to access class name management commands
• Right-click on a folder in Explorer to create new components

Keyboard Shortcuts

(You may want to add your preferred keybindings in your keybindings.json)

Requirements

• VS Code 1.60.0 or higher
• TypeScript React (.tsx) files
• SCSS Modules (.module.scss) files

Installation

1. Open VS Code
2. Go to the Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
3. Search for "TSX Styles Extension"
4. Click Install

Configuration

The extension works with zero configuration, but you can customize these settings in your VS Code settings.json:

{
	"tsx-styles-extension.someSetting": "value"
}

Known Issues

• Currently no known issues. Please report any problems you encounter.

Release Notes

1.0.0

Initial release with basic functionality:

• Class name management
• Navigation between TSX and SCSS
• Basic refactoring support
• Component scaffolding

Contributing

Contributions are welcome! Please open issues or pull requests on our GitHub repository.

License

MIT