React Component Scanner

A VS Code extension that provides intelligent autosuggestions for adding annotations and properties to React JSX components.

Features

This extension helps you add metadata annotations to your React components with smart autocompletion. When you type a component name followed by a dot (.), you'll get suggestions for:

Available Annotations

1. isScreen - Mark if a component represents a screen

   ComponentName.isScreen = true
   

2. isEntryRoute - Mark if a component is an entry route

   ComponentName.isEntryRoute = false
   

3. navigatesTo - Define navigation paths from this component

   ComponentName.navigatesTo = [
     { screen: 'HomeScreen', condition: 'onLogin' },
     { screen: 'SettingsScreen', condition: 'onSettings' }
   ]
   

Usage

1. Create or open a React component file (.js, .jsx, .ts, or .tsx)
2. Type your component name (must start with a capital letter)
3. Type a dot (.) after the component name
4. Select from the autosuggestion menu
5. Fill in the snippet placeholders

Example

// Define your component
function HomeScreen() {
  return <div>Home</div>;
}

// Add annotations using autocomplete
HomeScreen.isScreen = true;
HomeScreen.isEntryRoute = true;
HomeScreen.navigatesTo = [
  { screen: 'ProfileScreen', condition: 'onProfileClick' },
  { screen: 'SettingsScreen', condition: 'onSettingsClick' }
];

export default HomeScreen;

Supported File Types

• JavaScript (.js)
• JavaScript React (.jsx)
• TypeScript (.ts)
• TypeScript React (.tsx)

Requirements

• VS Code version 1.85.0 or higher

Installation

From Source

1. Clone this repository
2. Run npm install to install dependencies
3. Run npm run compile to compile TypeScript
4. Press F5 in VS Code to launch the extension in a new window

From VSIX Package

1. Run npm run package to create a .vsix file
2. Install the .vsix file in VS Code:
   • Open VS Code
   • Go to Extensions view (Ctrl+Shift+X or Cmd+Shift+X)
   • Click on the "..." menu at the top
   • Select "Install from VSIX..."
   • Choose the generated .vsix file

Development

Building

npm install
npm run compile

Watching for Changes

npm run watch

Testing

Press F5 in VS Code to launch the Extension Development Host with your extension loaded.

How It Works

The extension registers a completion provider that:

1. Activates when you type a dot (.) after a word
2. Checks if the word before the dot is a valid React component name (starts with capital letter)
3. Provides three completion items with snippet support
4. Inserts formatted code with tab stops for easy editing

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Changelog

0.0.1

• Initial release
• Basic autocompletion for isScreen, isEntryRoute, and navigatesTo annotations