JSX Smart Copy Paste ⚛️
A VS Code extension that intelligently copies JSX elements along with their required imports, making component reuse seamless across files.
✨ Features
- Smart JSX Detection: Automatically identifies JSX components in your selection
- Import Resolution: Finds and includes the necessary import statements
- Multi-line Import Support: Handles complex import structures correctly
- Duplicate Prevention: Avoids adding imports that already exist
- TypeScript Ready: Fully typed with TypeScript support
🚀 Installation
From VS Code Marketplace
- Open VS Code
- Go to Extensions (
Cmd+Shift+X
/ Ctrl+Shift+X
)
- Search for "JSX Smart Copy Paste"
- Click Install
From Source
git clone https://github.com/theiliad/vscode-jsx-smart-copy
cd vscode-jsx-smart-copy
npm install
npm run compile
📖 Usage
Basic Workflow
- Select JSX content in any
.jsx
or .tsx
file
- Smart Copy using
Cmd+Ctrl+C
(Mac) or Ctrl+Alt+C
(Windows/Linux)
- Navigate to another file where you want to use the components
- Smart Paste using
Cmd+Ctrl+V
(Mac) or Ctrl+Alt+V
(Windows/Linux)
The extension will automatically:
- Copy your selected JSX
- Find all component imports needed
- Paste the JSX at your cursor
- Add missing imports at the top of the file
Example
Source file:
import { Button, Modal } from 'antd';
import { UserIcon } from './icons';
// Select this JSX:
<Modal open={isOpen}>
<Button icon={<UserIcon />}>
Save User
</Button>
</Modal>
Target file (before paste):
import React from 'react';
function MyComponent() {
return (
<div>
{/* Paste here */}
</div>
);
}
Target file (after smart paste):
import React from 'react';
import { Button, Modal } from 'antd';
import { UserIcon } from './icons';
function MyComponent() {
return (
<div>
<Modal open={isOpen}>
<Button icon={<UserIcon />}>
Save User
</Button>
</Modal>
</div>
);
}
⌨️ Keyboard Shortcuts
Command |
Mac |
Windows/Linux |
Description |
Smart Copy |
Cmd+Ctrl+C |
Ctrl+Alt+C |
Copy JSX with imports |
Smart Paste |
Cmd+Ctrl+V |
Ctrl+Alt+V |
Paste JSX with imports |
Command Palette
You can also access commands via Cmd+Shift+P
/ Ctrl+Shift+P
:
Smart Copy JSX with Imports
Smart Paste JSX with Imports
🛠️ Development
Read Here
🙏 Acknowledgment
- 🤖 AI-Powered Development: This extension was primarily coded with AI assistance