{"id":19493751,"url":"https://github.com/abdullahceylan/vscode-react-component-generator","last_synced_at":"2025-10-19T21:59:03.220Z","repository":{"id":50367042,"uuid":"160271015","full_name":"abdullahceylan/vscode-react-component-generator","owner":"abdullahceylan","description":"A VSCode extension that generates a new React component with its files automatically in VSCode.","archived":false,"fork":false,"pushed_at":"2024-10-11T10:41:13.000Z","size":9401,"stargazers_count":23,"open_issues_count":4,"forks_count":27,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-04T03:11:44.566Z","etag":null,"topics":["javascript","react","reactjs","remix","vscode","vscode-extension","vscode-plugin"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/abdullahceylan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-12-04T00:14:39.000Z","updated_at":"2024-10-31T12:51:58.000Z","dependencies_parsed_at":"2022-09-23T09:36:07.523Z","dependency_job_id":null,"html_url":"https://github.com/abdullahceylan/vscode-react-component-generator","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdullahceylan%2Fvscode-react-component-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdullahceylan%2Fvscode-react-component-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdullahceylan%2Fvscode-react-component-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abdullahceylan%2Fvscode-react-component-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abdullahceylan","download_url":"https://codeload.github.com/abdullahceylan/vscode-react-component-generator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250890411,"owners_count":21503491,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","react","reactjs","remix","vscode","vscode-extension","vscode-plugin"],"created_at":"2024-11-10T21:27:10.469Z","updated_at":"2025-10-19T21:58:58.160Z","avatar_url":"https://github.com/abdullahceylan.png","language":"TypeScript","readme":"# React Component Generator Extension for VSCode\n\nThe extension helps you to create a React component with one-click. There are also options to create Remix and TypeScript React components.\n\n[![Version](https://vsmarketplacebadges.dev/version/abdullahceylan.vscode-react-component-generator.png)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)\n[![Installs](https://vsmarketplacebadges.dev/installs-short/abdullahceylan.vscode-react-component-generator.png)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)\n[![Installs](https://vsmarketplacebadges.dev/rating-star/abdullahceylan.vscode-react-component-generator.png)](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)\n[![The MIT License](https://flat.badgen.net/badge/license/MIT/orange)](http://opensource.org/licenses/MIT)\n\n## Other Versions\n[Please click here for React Native version](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-native-component-generator)\n\n## Description\n\nThe extension automatically creates folder for react component containing :\n\n- `index.(js|ts)`\n- `ComponentName.(jsx|tsx)`\n- `ComponentName.styles.(js|ts)` (for `styled`-component or `emotion` option)\n- `ComponentName.css` (for `standard` style option)\n- `ComponentName.module.css` (you'll need to set prefix from the extension settings)\n- `ComponentName.scss` (for `sass` style option)\n- `ComponentName.less` (for `less` style option)\n\n## Installation\n\nInstall through VS Code extensions. Search for `VSCode React Component Generator`\n\n[Visual Studio Code Market Place: VSCode React Component Generator](https://marketplace.visualstudio.com/items?itemName=abdullahceylan.vscode-react-component-generator)\n\nCan also be installed in VS Code: Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.\n\n```bash\next install abdullahceylan.vscode-react-component-generator\n```\n\n## Usage\n\n- Right click on the file or folder in the file explorer\n- Select one of following options:\n  - \"New React Stateless Component\"\n  - \"New React Stateless Component with Redux\"\n  - \"New React TypeScript Component\"\n  - \"New React TypeScript Remix Component\"\n  - \"New React TypeScript Remix Route Component\"\n\n- Enter a component name in the pop up in camelCase or PascalCase. If you enter the component name as in camelCase, then extension will convert it PascalCase automatically.\n\n- For Remix Route component, enter the route file name and the file will be created with `app.` prefix. i.e.:\n  - demoRoute -\u003e app.demo.route.ts\n  - demoRouteChild -\u003e app.demo.route.child.ts\n\n### Creating a React Component\n\n![Classic React Component](assets/images/ac-vscode-classic-component.gif)\n\n### Creating a TypeScript React Component, Remix TypeScript Component and React TypeScript Route Component\n\n![TypeScript and Remix Component](assets/images/ac-vscode-typescript-remix.gif)\n\n\n![Extension settings](assets/images/vscode-settings.png)\n\n## Configuration\n\nYou can access to the extension's settings through VSCode settings. You can customize:\n\n### `ACReactComponentGenerator.global.generateFolder` (default: `true`)\n\nGenerate or not separate folder for newly created component\n\n### `ACReactComponentGenerator.global.quotes` (default: `single`)\n\nControls the quotes for the imports in the files. Valid options:\n\n- \"single\" - e.g.: import React from `'`react`'`\n- \"double\"  - e.g.: import React from `\"`react`\"`\n\n### `ACReactComponentGenerator.global.lifecycleType` (default: `legacy`)\n\nThe lifecycle type of generated component. Valid options:\n\n- \"legacy\" - Contains `componentWillReceiveProps`, `componentWillMount`\n- \"reactv16\"  - Contains `getSnapshotBeforeUpdate`, `getDerivedStateFromProps`, `getDerivedStateFromError`, `componentDidCatch` and removes `componentWillReceiveProps` and `componentWillMount`\n\n### `ACReactComponentGenerator.indexFile.create` (default: `true`)\n\nWhether to generate component's index file or not.\n\n### `ACReactComponentGenerator.indexFile.extension` (default: `ts`)\n\nThe extension of generated component index file. e.g.: index.(`extension`)\n\n### `ACReactComponentGenerator.mainFile.create` (default: `true`)\n\nWhether to generate component's main file or not.\n\n### `ACReactComponentGenerator.mainFile.extension` (default: `tsx`)\n\nThe extension of generated component file. e.g.: ComponentName.(`extension`)\n\n### `ACReactComponentGenerator.styleFile.create` (default: `true`)\n\nWhether to generate component's stylesheet file or not.\n\n### `ACReactComponentGenerator.styleFile.extension` (default: `css`)\n\nThe extension of generated stylesheet file. e.g.: ComponentName.styles.(`extension`)\n\n### `ACReactComponentGenerator.styleFile.suffix` (default: `none`)\n\nThe suffix to add to the end of the stylesheet filename. Default: None\nYou have option to select `CSS modules` and `Styled Component`\n\n### `ACReactComponentGenerator.styleFile.type` (default: `styled-components`)\n\nThe type of stylesheet file to create. Valid options:\n\n- \"standard (.css)\" - ComponentName.`css` (You can use this for CSS modules as well)\n- \"styled-components/emotion (.js)\" - ComponentName.styles.`js`\n- \"standard (.css)\" - ComponentName.styles.`css`\n- \"sass (.scss)\" - ComponentName.styles.`sass`\n- \"less (.less)\" - ComponentName.styles.`less`\n\n## Changelog\n\n### [Click here](CHANGELOG.md)\n\n## Bugs\n\nPlease report [here](https://github.com/abdullahceylan/vscode-react-component-generator/issues)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdullahceylan%2Fvscode-react-component-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabdullahceylan%2Fvscode-react-component-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabdullahceylan%2Fvscode-react-component-generator/lists"}