Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>React autoStateNew to Visual Studio Code? Get it now.
React autoState

React autoState

daangnkim

|
74 installs
| (1) | Free
Smart React useState helper: Convert between state and setters, auto-complete pairs, and generate useState snippets instantly
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

React-autoState

A VSCode extension that helps you efficiently manage React state variable names and their setter functions. This extension streamlines the process of creating useState hooks and converting between state variables and their setters.

Features

1. add Setter Prefix

  • When: Press Ctrl+Alt+S / Cmd+Alt+S
  • Input: Selected state name (e.g., isModalOpen)
  • Result: Copies setIsModalOpen

2. Remove Setter Prefix

  • When: Press Ctrl+Alt+R / Cmd+Alt+R
  • Input: Selected setter name (e.g., setIsModalOpen)
  • Result: Copies isModalOpen

3. Setter Auto-completion

  • When: Typing state name followed by comma
  • Input: count [count,
  • Result: Suggests setCount

4. useState Generation

  • Execute command on current cursor line:

    stateName
    stateName^initialValue
    stateName^type^initialValue
    
  • Examples:

    // count^0
    const [count, setCount] = useState(0);
    
    // count^number^0
    const [count, setCount] = useState<number>(0);
    
    // count^number|undefined^0
    const [count, setCount] = useState<number | undefined>(0);
    

Installation

  1. Open VSCode
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search for "React State Prefix Manager"
  4. Click Install
  5. Reload VSCode

Usage

Keyboard Shortcuts

Command Windows/Linux Mac Action
Add 'set' Prefix Ctrl+Shift+S Cmd+Shift+S Adds 'set' prefix to variable
Remove 'set' Prefix Ctrl+Shift+R Cmd+Shift+R Removes 'set' prefix from setter
Create useState Ctrl+Shift+U Cmd+Shift+U Creates complete useState hook

You can customize these shortcuts in VSCode's Keyboard Shortcuts settings.

Contributing

If you'd like to contribute to this extension, please visit repository

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft