This is a snippets for react function component, it supports typescriptreact, even you can use it in javascript or typescript; its not good for react class function.
Support file type
- javascript(*.js)
- typescript(*.ts)
- javascriptreact(*.jsx)
- typescriptreact(*.tsx)
Usage
Type a prefix, then press tab;
clg # press tab!
# ------>
console.log(|)
tips
$* means the step order for next 'tabs'- some snippets support typescript, You just need to add a
ts prefix in front
handbook
for console
| prefix |
result |
| clg |
console.log($1); |
| ctb |
console.table($1); |
| cer |
console.error("$1"); |
| ctm |
console.time(); |
| ctme |
console.timeEnd(); |
| cte |
console.trace(); |
| cwn |
console.warn("$1"); |
| cat |
console.assert($1); |
| ccl |
console.clear(); |
| cct |
console.count($1); |
| cgp |
console.group($1); |
| cge |
console.groupEnd(); |
| cio |
console.info("$1"); |
| cdr |
console.dir(); |
for es5 and next
| prefix |
result |
| cmt |
/*_
${1:yourComments}
_/ |
| cmtf |
/*_
_ @description: ${1:description}
* @param {${2:paramType}}
_ @return {${3:returnType}}
_/ |
| cda |
const [${2:propertyName}] = ${1:array}; |
| cdo |
const {${2:propertyName}} = ${1:object}; |
| im |
import "${1:module}"; |
| imd |
import { ${2:destructuredModule} } from "${1:module}"; |
| ima |
import * as ${2:alias} from "${1:module};" |
| imda |
import { * as ${2:alias} } from "${1:module}"; |
| edm |
export default ${1:module}; |
| ems |
export {${1:module}}; |
| idxn |
import ${2:moduleName} from "${1:pathName}";
export default ${3:moduleName}; |
for react
| prefix |
result |
| imr |
import React from "react"; |
| imrs |
import React, { useState } from "react"; |
for react function component
cfc
import react from "react";
const ${1:componentName} = () => {
return <div></div>;
};
export default ${2:componentName};
cefc
import react from "react";
export const ${1:componentName} = () => {
return <div></div>;
};
for typescript
tsimr
import React, { FC } from "react";
tscfc
import React, { FC } from 'react';
interface IProps {};
const ${1:componentName}:FC<IProps> = (props) => {
return <div>${3}</div>;
};
export default ${2:componentName};
tscfrc
import React, { ForwardRefRenderFunction, useImperativeHandle } from "react";
interface IProps {};
interface IHandles {};
const ${1:componentName}:ForwardRefRenderFunction<IHandles, IProps> = (props, ref) => {
useImperativeHandle(ref, () => ({
${3:handles}
}), [${4:dependencies}]);
return <div></div>;
};
export default ${2:componentName};
for test
jest describe
describe(($1) => {
$2;
});
jest snapshot
it(($1) => {
$2;
});
jest test
test(("should $1") => {
$2;
});
for hooks
useState
const [${1:state}, ${2:setState}] = useState(${3:defaultValue});
useReducer
const [state, dispatch] = useReducer(${1:reducer}, ${2:defaultValue}, ${3:init});
useContext
const ${1:value} = useContext(${2:context});
useRef
const ${1:refName} = useRef(${3:defaultValue});
useImperativeHandle
useImperativeHandle(${1:refName}, () => ({
${2:handles}
}), [${3:dependencies}]);
useEffect
useEffect(() => {
${1:effect}
return () => {
${2:clear effect}
}
}, [${3:dependencies}];
useLayoutEffect
useLayoutEffect(() => {
${1:effect}
return () => {
${2:clear effect}
}
}, [${3:dependencies}];
useCallback
const ${1:functionName} = useCallback(() => {
${2:callback}
}, [${3:dependencies}]);
useMemo
const ${1:memoName} = useMemo(() => ${2:ReactNodeName}, [${3:dependencies}]);
useDebugValue
useDebugValue(${1:value});
