Accelerate your development workflow and boost productivity by 3x. This comprehensive suite of tools streamlines coding, debugging, and deployment processes, enabling developers to work more efficiently and effectively.
Unlock your full potential with Raaghu Toolkit – where innovation meets efficiency.
This helps to display the Command Line Interface (CLI) menu, providing a brief, expanded view of available options and functionalities in a concise format.
Create New Solution
The command initializes a new project with necessary structures and configurations. Access it via the command palette by typing "Create New Solution" or by clicking the node in the Development tree view.
You can specify the name of the solution, choose a template, and define the target directory. Additional options allow you to force creation even if the target directory is not empty. This command simplifies the process of starting a new project by providing a ready-to-use structure.
Generate Proxy
The command creates proxies to interact with external services or APIs. This step generates backend proxies and requires the backend to be up and running for successful execution. Access it via the command palette or the Development tree view.
Create Slice File
The command facilitates the creation of slice files used for state management. It provides a GUI (Graphical User Interface) that guides the user through the process. Slice files are instrumental in structuring and managing application state, making it easier to handle data flow and application logic.
✨ New Release
Code Snippets
You can now use code snippets which provides you with code skeleton for React application. This feature is integrated into our extension, allowing you to utilise our snippets for tsx and jsx files to generate boiler plate codes for different scenarios, creating code skeleton which can be used in your project.
Snippets |
Description |
rfc |
Stateless functional component. A simple component that does not manage state. |
rtstate |
Boilerplate for a functional component using useState and useEffect hooks for state management and side effects. |
rtcontext |
Boilerplate for a functional component utilizing React Context API and useMemo for optimizing context value. |
clg |
Console log snippet. Quickly log output to the console for debugging purposes. |
imp |
Generic import snippet. A placeholder for importing various modules. |
imd |
import { } from 'module'; Template for named imports from a specified module. |
ipt |
import PropTypes from 'prop-types'; Import statement for the PropTypes library for type-checking React props. |
imr |
import React from 'react' Standard import statement for React library. |
rccp |
Class component skeleton with PropTypes. Provides a basic structure for a class component, including PropTypes validation. |
rfcp |
Function component with PropTypes skeleton. Basic structure for a functional component with PropTypes validation. |
est |
Empty state object. Placeholder for initializing an empty state object in a component. |
cdm |
componentDidMount method. Lifecycle method in class components that runs after the component mounts. |
scu |
shouldComponentUpdate method. Lifecycle method to control if a component should re-render. |
cdu |
componentDidUpdate method. Lifecycle method invoked after a component updates. |
cwu |
componentWillUnmount method. Lifecycle method called before a component unmounts and is destroyed. |
gsb |
getSnapshotBeforeUpdate method. Lifecycle method to capture a snapshot of the DOM before it updates. |
gds |
static getDerivedStateFromProps method. A static lifecycle method to update state based on props. |
cdc |
componentDidCatch method. Error boundary method for catching errors in child components. |
sst |
this.setState with object as parameter. Updates component state with a new state object. |
ssf |
this.setState with function as parameter. Updates component state based on the previous state using a function. |
props |
this.props Accessor for props passed to a class component. |
state |
this.state Accessor for the state object in a class component. |
bnd |
Binds this for a method in the constructor. Ensures the correct context for a method when used as an event handler. |
Story Preview
You can now preview your stories directly within Visual Studio Code. This feature is integrated into our extension, allowing you to see your stories without needing to switch applications. Simply navigate to the "Story Preview" section in the sidebar to access and manage your stories.
🕙 Coming Soon
- Intellisense Capabilities using Raaghu Design System and Raaghu React Themes
- Swagger Integration