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.
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",
}
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",
}
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.
Header/index.tsx
Header/styles.ts
Card/index.tsx
Card/styles.ts
You can also create components without using Styled Components
.
To resolve issues such as:
- 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": {}
}
}
}
To use jsx
code in js
files, include the rule below into .eslintrc.json
.
...
"rules": {
"react/jsx-filename-extension": ["error", { "extensions": [".js", ".jsx"] }],
}
}
Enjoy!