RNX Snippets
Professional React & Next.js Snippets for VS Code
✨ Features
| Feature |
Description |
| ⚡ Lightning Fast |
Create components, pages, and layouts in seconds |
| 📝 Dual Language |
Full support for JavaScript & TypeScript |
| 🔥 Next.js Ready |
Optimized for Next.js 13+ App Router |
| 🎯 Intuitive Prefixes |
Easy-to-remember shortcuts |
📦 Installation
From Marketplace (Recommended)
- Open VS Code
- Go to Extensions (
Ctrl+Shift+X / Cmd+Shift+X)
- Search for "RNX Snippets"
- Click Install
Or install via command:
ext install Foshati.rnx-snippets
🛠 Manual Installation
For Cursor, Windsurf, Antigravity, VSCodium, or offline installation:
Download the .vsix file from Releases
Install via terminal:
# VS Code
code --install-extension rnx-snippets-1.0.2.vsix --force
# Cursor
cursor --install-extension rnx-snippets-1.0.2.vsix --force
# Antigravity
antigravity --install-extension rnx-snippets-1.0.2.vsix --force
# VSCodium
codium --install-extension rnx-snippets-1.0.2.vsix --force
- Or drag the
.vsix file into the Extensions view
🚀 Snippets
TypeScript/TSX
| Prefix |
Description |
tsc |
React Component with Props |
tsp |
Next.js Page Component |
tsl |
Next.js Layout Component |
ts0 |
Default Export Function |
ts1 |
Named Export Function |
tsce |
Component (export at bottom) |
tspe |
Page (export at bottom) |
tsle |
Layout (export at bottom) |
ts0e |
Default Export (at bottom) |
ts1e |
Named Export (at bottom) |
JavaScript/JSX
| Prefix |
Description |
jsc |
React Component |
jsp |
Next.js Page Component |
jsl |
Next.js Layout Component |
js0 |
Default Export Function |
js1 |
Named Export Function |
jsce |
Component (export at bottom) |
jspe |
Page (export at bottom) |
jsle |
Layout (export at bottom) |
js0e |
Default Export (at bottom) |
js1e |
Named Export (at bottom) |
📝 Examples
tsc - TypeScript Component
type Props = {}
export const Button = ({}: Props) => {
return (
<div>Button</div>
)
}
tsp - TypeScript Page
export default function HomePage() {
return (
<div>HomePage</div>
)
}
tsl - TypeScript Layout
type Props = {
children: React.ReactNode
}
export default function RootLayout({ children }: Props) {
return (
<div>
{children}
</div>
)
}
💡 Tips
- Tab Completion: Type prefix +
Tab to insert snippet
- Navigate Placeholders: Use
Tab to jump between placeholders
- Auto-Rename: Component name updates in all locations
🧪 Development
# Install dependencies
pnpm install
# Run tests
pnpm test
# Package extension
pnpm pack
# Publish extension
pnpm publish
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
📄 License
MIT License © 2024 Foshati
Made with ❤️ for React & Next.js developers
