https://github.com/gabeduartem/copy-paste-component-vscode
A visual studio code extension for you to create new components, using the same structure of the ones you already have.
https://github.com/gabeduartem/copy-paste-component-vscode
boilerplate component components convention copy development extension front-end frontend generate generator paste pattern patterns scaffold tool visual-studio visual-studio-code vscode web
Last synced: about 1 month ago
JSON representation
A visual studio code extension for you to create new components, using the same structure of the ones you already have.
- Host: GitHub
- URL: https://github.com/gabeduartem/copy-paste-component-vscode
- Owner: GabeDuarteM
- License: mit
- Created: 2018-01-28T08:26:46.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T19:15:30.000Z (over 2 years ago)
- Last Synced: 2023-03-26T01:04:49.764Z (about 2 years ago)
- 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
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=GabrielDuarteM.copy-paste-component-vscode
- Size: 1.26 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
copy-paste-component for Visual Studio Code
An extension for you to create new components, using the same structure of the ones you already have.
# Motivation
Did 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 😂.
That 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)
I'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).
Imagine you have the structure below, and want to create a `NewApp` component:
```
src/components/App/App.js
src/components/App/App.css
src/components/App/App.test.js
src/components/App/App.stories.js
src/components/App/index.js
```
When you run the extension, it will create the following structure, replacing occurrences of the word `App` inside the files to `NewApp`:
```
src/components/NewApp/NewApp.js
src/components/NewApp/NewApp.css
src/components/NewApp/NewApp.test.js
src/components/NewApp/NewApp.stories.js
src/components/NewApp/index.js
```
And if `App.js` is the following file:
### App.js
```js
import React from 'react'
const App = () =>
Hello World
export default App
```
It will create the following file:
### NewApp.js
```js
import React from 'react'
const NewApp = () =>
Hello World
export default NewApp
```
# Give it a try
On 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`
# See also
- [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).
# Changelog
See [Changelog](https://github.com/GabrielDuarteM/copy-paste-component-vscode/blob/master/CHANGELOG.md).
# License
MIT