Create React JS and React Native Component
This extension creates a Functional Component for React JS and React Native in a named folder using Typescript or Javascript with Styled Components, SASS, LESS or CSS.
Configuration for use (tsx, jsx or js)
By default components files are created using Typescript using files with the extension .tsx
. It is also possible to create components with Javascript using files with the extension .jsx
or .js
.
Example of settings.json
:
{
...
"createReactTSXComponent.fileExtension": "tsx|jsx|js",
}
Configuration for use (Styled Components, SCSS LESS or CSS)
It is also possible to create components just for React JS using SASS (.scss
) or CSS (.css
) to define component styles.
Example of settings.json
:
{
...
"createReactTSXComponent.stylesFormat": "Styled Components|SCSS|LESS|CSS",
}
Usage Examples
You can create a React or React Native Component either by typing Create React JS Component
or Create React JS Styled Component
or Create React Native Component
or Create React Native Styled Component
in the vscode command palette or by right-clicking any folder in the tree view.
Enter the name of the component to be created.
This will create a folder with the component name entered containing the component's index.tsx
file and the styles.ts
file for defining the component styles.
Results
React JS
Header/index.tsx
Header/styles.ts
React Native
Card/index.tsx
Card/styles.ts
You can also create components without using Styled Components
.
ESLint for Airbnb Code Style
To resolve issues such as:
Using Typescript
- Import
.ts
files without informing the file extension; - Use
jsx
code intsx
files.
The eslint-import-resolver-typescript
plugin should be used as a development dependency and include the rules and settings below into .eslintrc.json
.
...
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
"import/extensions": ["error", "ignorePackages", { "ts": "never", "tsx": "never" }],
},
"settings": {
"import/resolver": {
"typescript": {}
}
}
}
Using Javascript
To use jsx
code in js
files, include the rule below into .eslintrc.json
.
...
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
}
}
Enjoy!