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

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

Contributing

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