/vscode-snippets

Snippets for the development with Next.js, React in a TypeScript environment.

Primary LanguageTypeScriptMIT LicenseMIT

Snippets for Next.js, React in TypeScript

GitHub issues

This extension provides you Snippets for the development with Next.js, React in a TypeScript environment in VS Code.

Supported languages (file extensions)

  • JavaScript (.js)

  • JavaScript React (.jsx)

  • TypeScript (.ts)

  • TypeScript React (.tsx)

  • Markdown (.md)

Snippets List for JS/TS

Components

rfc⇥

Creates a React Functional Component

Only for languages: .tsx

type MyDynamicComponentNameProps = { … }

export const MyDynamicComponentName = ({ … }: MyDynamicComponentNameProps): JSX.Element => {
  return (
    <div>$0</div>
  )
}

export default MyDynamicComponentName

Common

Trigger Content Only for languages
dtid⇥ adds data-testid="…" .jsx, .tsx

Console

Trigger Content
consError⇥ console error console.error(…)
consInfo⇥ console info console.info(…)
consLog⇥ console log console.log(…)
consWarn⇥ console warn console.warn(…)

Export and Import

Trigger Content Only for languages
expAllFrom⇥ exports all from module export * from '…'
expAs⇥ exports all as alias from module export … as … from '…'
expConst⇥ exports const export const … = …
exportDefault⇥ exports default export default …
impFrom⇥ imports entire module import … from '…'
impAllFrom⇥ imports all as alias from module import … as … from '…'
impDestructured⇥ imports only destructed part of module import { … } from '…'
impFileOnly⇥ imports entire module without module name import '…'
impReact⇥ import the React module import React from 'react' .jsx, .tsx
impReactDom⇥ import the ReactDOM module import ReactDOM from 'react-dom' .jsx, .tsx
impType⇥ import only the type from module import type { … } from '…' .ts, .tsx

Functions

Trigger Content
arrowFunction⇥ creates a named function const … = (…) => …
arrowFunctionInline⇥ creates an anonymous function (…) => …
setInterval⇥ set interval helper method setInterval(() => { … }, …)
setTimeout⇥ set timeout helper method setTimeout(() => { … }, …)

Next.js Functions

Trigger Content Only for languages
getServerSideProps⇥ creates the Next.js specific getServerSideProps function .tsx
getStaticPaths⇥ creates the Next.js specific getStaticPaths function .tsx
getStaticProps⇥ creates the Next.js specific getStaticProps function .tsx

React Hooks

Trigger Hook
useCallback⇥ create useCallback hook
useContext⇥ create useContext hook
useEffect⇥ create useEffect hook
useMemo⇥ create useMemo hook
useReducer⇥ create useReducer hook
useRef⇥ create useRef hook
useRouter⇥ create useRouter hook
useState⇥ create useState hook

Snippets List for Markdown

Trigger Content
mdCode⇥ insert a code block
mdImage⇥ insert a image
mdImageWithTitle⇥ insert a image with a title attribute
mdLink⇥ insert a link
mdLinkWithTitle⇥ insert a link with a title attribute
mdLinkedImage⇥ insert a linked image
mdLinkedImageWithTitle⇥ insert a linked image with a title attribute
mdTodo⇥ insert a ToDo list item