afiiif / vscode-js-ts-react-nextjs-snippets

JavaScript/TypeScript React/Next.js VSCode Snippets

VSCode Snippets for JavaScript, TypeScript, React/Next.js, React Query, SWR, Redux, Jest, React Hook Form, Emotion CSS, & many more

Write code faster using snippets!
Just type the snippet keyword (for example, type rfc), a suggestion will appear, then press Tab.
If there is no suggestion, use Ctrl+Space to open it.

Usage

• You can just type directly 👉 rfc
• You can also use $ prefix 👉 $rfc
• You don't need to write a complete snippet prefix. For example, there is useState snippet, you can just type useSt and the suggestion will appear.

For TypeScript snippets:

• You can add ts at the end 👉 rfc for JS became rfcts for TS
• Or you can use $$ prefix 👉 $$rfc

List All Available Snippets

• Type $ (and press Ctrl+Space if necessary), then check all available snippets.
• Check React snippets using $r
• Check Next.js snippets using $n
• Check React Native snippets using $rn
• Check React Router snippets using $rou
• Check React Query snippets using $rq
• Check SWR snippets using $swr
• Check Redux snippets using $rx
• Check Jest snippets using $t
• Check React Hook Form snippets using $rhf
• Check Zustand snippets using $zu
• Check Emotion CSS snippets using $emo
• Check Yup snippets using $yup
• Check wrapper-snippets using $_

👉 See All Available Snippets Here! 👈

Examples

Wrapper Snippets

Type _ or $_ to check all available wrapper snippets

Generate-from-Clipboard Snippets

Select text and copy it 📋 write snippet and boom! 🪄💥

Why There Are No Snippet for Import? 🤔

Because you might not need that. VSCode has built-in feature for auto-import your modules. Use Ctrl+Space on your variable and a popup will appear.

If auto import doesn't appear, open command palette (Ctrl+Shift+P) and select restart TS server.

---

Donation