{"id":26414963,"url":"https://github.com/gabeduartem/copy-paste-component-vscode","last_synced_at":"2025-03-18T00:16:59.825Z","repository":{"id":39104660,"uuid":"119240944","full_name":"GabeDuarteM/copy-paste-component-vscode","owner":"GabeDuarteM","description":"A visual studio code extension for you to create new components, using the same structure of the ones you already have.","archived":false,"fork":false,"pushed_at":"2023-01-03T19:15:30.000Z","size":1323,"stargazers_count":6,"open_issues_count":35,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-03-26T01:04:49.764Z","etag":null,"topics":["boilerplate","component","components","convention","copy","development","extension","front-end","frontend","generate","generator","paste","pattern","patterns","scaffold","tool","visual-studio","visual-studio-code","vscode","web"],"latest_commit_sha":null,"homepage":"https://marketplace.visualstudio.com/items?itemName=GabrielDuarteM.copy-paste-component-vscode","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/GabeDuarteM.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-28T08:26:46.000Z","updated_at":"2023-03-10T08:36:22.000Z","dependencies_parsed_at":"2023-02-01T09:01:59.565Z","dependency_job_id":null,"html_url":"https://github.com/GabeDuarteM/copy-paste-component-vscode","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabeDuarteM%2Fcopy-paste-component-vscode","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabeDuarteM%2Fcopy-paste-component-vscode/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabeDuarteM%2Fcopy-paste-component-vscode/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GabeDuarteM%2Fcopy-paste-component-vscode/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GabeDuarteM","download_url":"https://codeload.github.com/GabeDuarteM/copy-paste-component-vscode/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244130303,"owners_count":20402756,"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":["boilerplate","component","components","convention","copy","development","extension","front-end","frontend","generate","generator","paste","pattern","patterns","scaffold","tool","visual-studio","visual-studio-code","vscode","web"],"created_at":"2025-03-18T00:16:59.223Z","updated_at":"2025-03-18T00:16:59.818Z","avatar_url":"https://github.com/GabeDuarteM.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\" style=\"border-bottom: none;margin-bottom: 0;\"\u003e\u003ca href=\"https://github.com/GabrielDuarteM/copy-paste-component\"\u003ecopy-paste-component\u003c/a\u003e for Visual Studio Code\u003c/h1\u003e\n\n\u003ch4 align=\"center\" style=\"margin-top: 0px;padding-bottom: 16px;border-bottom: 1px solid #eaecef;\"\u003e\nAn extension for you to create new components, using the same structure of the ones you already have.\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://travis-ci.com/GabrielDuarteM/copy-paste-component-vscode\"\u003e\n    \u003cimg src=\"https://img.shields.io/travis/com/GabrielDuarteM/copy-paste-component-vscode/master.svg\" alt=\"Travis branch\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"http://makeapullrequest.com\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/PRs-welcome-brightgreen.svg\" alt=\"PRs Welcome\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/styled_with-prettier-ff69b4.svg\" alt=\"styled with prettier\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n![Usage](https://i.imgur.com/dQI2Ijl.gif)\n\n# Motivation\n\nDid you ever notice how boring and repetitive it is to create new components for your projects? You always end up copying and pasting existing ones and modifying their names, and that kind of repetitive task is something a machine should do, not me 😂.\nThat task can be sometimes not that slow when you have a simple component, but imagine a structure that demands `component` + `css` + `tests` + `index file` + [`storybook`](https://github.com/storybooks/storybook)\n\nI've created this extension to speed up that process. You just right-click the component and click `Copy and paste component`. It will ask you to name your new component and a place to put it (it will try to guess, but you can modify it), and then BOOM 💥 💥 💥 you get a component's structure to work on, identical to the one you chose to copy, but with it's name changed to the new one (and not just on the filename, as you can see on the image above).\n\nImagine you have the structure below, and want to create a `NewApp` component:\n\n```\nsrc/components/App/App.js\nsrc/components/App/App.css\nsrc/components/App/App.test.js\nsrc/components/App/App.stories.js\nsrc/components/App/index.js\n```\n\nWhen you run the extension, it will create the following structure, replacing occurrences of the word `App` inside the files to `NewApp`:\n\n```\nsrc/components/NewApp/NewApp.js\nsrc/components/NewApp/NewApp.css\nsrc/components/NewApp/NewApp.test.js\nsrc/components/NewApp/NewApp.stories.js\nsrc/components/NewApp/index.js\n```\n\nAnd if `App.js` is the following file:\n\n### App.js\n\n```js\nimport React from 'react'\n\nconst App = () =\u003e \u003cdiv className=\"App-root\"\u003eHello World\u003c/div\u003e\n\nexport default App\n```\n\nIt will create the following file:\n\n### NewApp.js\n\n```js\nimport React from 'react'\n\nconst NewApp = () =\u003e \u003cdiv className=\"NewApp-root\"\u003eHello World\u003c/div\u003e\n\nexport default NewApp\n```\n\n# Give it a try\n\nOn Visual Studio Code press `ctrl-p` and enter `ext install GabrielDuarteM.copy-paste-component-vscode`, or go to [vscode's marketplace](https://marketplace.visualstudio.com/items?itemName=GabrielDuarteM.copy-paste-component-vscode) and click `install`\n\n# See also\n\n- [copy-paste-component](https://github.com/GabrielDuarteM/copy-paste-component) A CLI tool to create components, by copying and pasting existing ones (the API used by this extension).\n\n# Changelog\n\nSee [Changelog](https://github.com/GabrielDuarteM/copy-paste-component-vscode/blob/master/CHANGELOG.md).\n\n# License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabeduartem%2Fcopy-paste-component-vscode","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgabeduartem%2Fcopy-paste-component-vscode","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgabeduartem%2Fcopy-paste-component-vscode/lists"}