Skip to content

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

Repository files navigation

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.

React/Next.js snippet

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 $_

Examples

Next.js snippet

React Query & SWR snippet

Jest snippet

Wrapper Snippets

Type _ or $_ to check all available wrapper snippets

Wrapper snippet

Wrapper snippet

Generate-from-Clipboard Snippets

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

Generate-from-clipboard snippet

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.

VSCode built-in auto import

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

Restart TS server


Donation

Buy Me A Coffee
Trakteer ID