useEffect-useState-vscode-extension

MohamedWaelBishr

1,026 installs

The useEffect Logger extension enhances your React development workflow by simplifying the process of incorporating variables into your useEffect dependency arrays. Select a variable, trigger the extension, and watch as it wraps your variable in a useEffect block, adding it to the dependency array a

Installation

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

Copied to clipboard

More Info

useEffect-useState-vscode-extension

Overview

The useEffect-useState-vscode-extension is a Visual Studio Code extension that simplifies React development by providing convenient commands for adding useEffect and useState snippets to your code. With just a few keystrokes, you can enhance your React components with structured and optimized code.

Features

Add useEffect Snippet: Automatically adds a useEffect snippet with a console log statement for the selected variable, including file name and line number.
Add useState Snippet: Generates a useState hook declaration with a prompt for variable name input.

How to Use

Add useEffect Snippet:
- Select a variable in your code.
- Trigger the extension using the predefined shortcut (Ctrl+Shift+P > "Add useEffect Snippet").
Add useState Snippet:
- Place the cursor where you want to add the useState hook.
- Trigger the extension using the predefined shortcut (Ctrl+Shift+P > "Add useState Snippet").
- Enter the variable name in the prompted input box.

Configuration

By default, the extension uses the following shortcuts:

Add useEffect Snippet: Ctrl+Shift+E
Add useState Snippet: Ctrl+Shift+U

You can customize these shortcuts in the Visual Studio Code keyboard shortcuts settings.

Commands

Add UseEffect: inserteffect-react-useeffect-snippet.addUseEffect
Add UseState: inserteffect-react-useeffect-snippet.addUseState

Examples

Add useEffect Snippet

Before:

const myVariable = "Hello, React!";

After triggering the extension:

const myVariable = "Hello, React!";

useEffect(() => {
  console.log(
    "📌 - [your-file-name.js] - Line [your-line-number] - Hello, React! =>",
    myVariable
  );
}, [myVariable]);

Add useState Snippet

Before:

// Your existing code

After triggering the extension and entering "exampleState" as the variable name:

// Your existing code

const [exampleState, setExampleState] = useState("");

License

This extension is licensed under the MIT License.

Issues and Contributions

Feel free to open issues and contribute to the development of this extension on GitHub.

Happy coding! 🚀