Snippets for Next.js, React in TypeScript
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 |
| |
