Automate-react-component is a vscode extension that creates a react component with all necessary files with skeleton code. This extension provides a handy way to create new react components in your project without the hassle of copy-pasting code from other places.
Demo for creating test-component-card
react component under client/public/src
folder of the project:
Demo for creating custom-card
react component with custom-card.js
and test.js
file under newly created folders components/custom/
:
Demos to use react code-snippets in your project files:
Command: rc
Command: rf
Command: rt
Command: rs
Command: md
- Install the extension
There are three ways to activate this extension:
-
- Press
Command/CTRL
+Shift
+R
- Press
-
- Open command pallete through
Command/CTRL
+Shift
+P
. - Search and click on
Create React Component
.
- Open command pallete through
-
- Right click on the folder where you want the component to be created
- Click on the
Create React Component
option.
- Enter your component name e.g.
my-component
. - In case of shortcut-key and command pallete option, specify the relative path from your project root where the newly created component should be placed e.g.
/home/src/components/
will createmy-component
folder with relevant files under<YourProjectRoot>/home/src/components/
. From the root tomy-component
folder, the extension will automatically create folders if they do not already exist.
Follow these steps to create your custom configuration for react component:
-
Open Settings menu through
Preferences > Settings
ORCommand
+,
-
Search for automatereact and click on
Edit in settings.json
link under Automatereact: Files option. -
Inside
settings.json
type inautomatereact.files
and hit enter. The default file configuration array will be automatically displayed. -
Add/Remove objects from the
automatereact.files
array.
"automatereact.files" : [
...
{
fileName: "fn$.ts",
content: "import Cn$Styles from './fn$.styles';\n console.log("cN$");\n"
},
...
]
will create a typescript file (.ts) and replace each occurence of fn$
with the component name entered by user after running the extension. The content will be written inside that file and also each occurence of Cn$
will be replaced by the PascalCase version of component name while cN$
will replaced by the camelCase version.
Component name entered by user: my-component
content of my-component.ts
file:
import MyComponentStyles from "./my-component.styles";
console.log("myComponent");
- Clone the repository from https://github.com/zainsra7/automate-react-component
- Open the project in VSCode:
cd automate-react-component
code .
- Press
F5
to compile and run. - Follow the official API guide to make changes: https://code.visualstudio.com/api/get-started/extension-anatomy
- Added shortcut key and context menu activation for the extension
- Added custom configuration for creating user-defined react component
- Added snippets to create skeleton code for react files in typescript
Initial release of automate-react-component
- Get feedback from users / Improve the extension
- Clone this extension for other famous IDE(s) like Intellij, Atom.