This extension provides you React/TS/JS snippets for VS Code
- JavaScript (.js)
- JavaScript React (.jsx)
- TypeScript (.ts)
- TypeScript React (.tsx)
Below is a list of all available snippets and the triggers of each one. The ⇥ means the TAB key.
| Trigger | Content | Description |
|---|---|---|
imr | import React from 'react'; | |
imfc | import React, { Fragment, Component } from 'react'; | |
imhs | import React, { useState, useContext, useEffect, useCallback, useMemo } from 'react'; |
imall
import React, { Fragment, Component } from 'react'; import { observer, inject } from 'mobx-react'; import { toJS } from 'mobx'; import styled from 'styled-components'; import { Button } from 'antd'; | Trigger | Content | Description |
|---|---|---|
uses | const [, set] = useState(); | useState |
usee | useEffect(() => { }, []); | useEffect |
usec | const = useContext(); | useContext |
usecb | const memoizedCallback = useCallback(() => {doSomething(a, b)},[a, b],); | useCallback |
user | const = useRef(); | useRef |
usem | const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); | useMemo |
| Trigger | Content |
|---|---|
clog | console.log() |
Class Component
cc
export default class extends Component { state = { } render() { return ( ); } } Function Component
fc
export interface Props { } const : React.FC<Props> = () => { return ( ); } export default ; render
render
render() { return ( ); }