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.
- javascript(*.js)
- typescript(*.ts)
- javascriptreact(*.jsx)
- typescriptreact(*.tsx)
Type a prefix, then press tab
;
clg # press tab!
# ------>
console.log(|)
$*
means the step order for next 'tabs'- some snippets support typescript, You just need to add a
ts
prefix in front
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(); |
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}; |
prefix | result |
---|---|
imr | import React from "react"; |
imrs | import React, { useState } from "react"; |
import react from "react";
const ${1:componentName} = () => {
return <div></div>;
};
export default ${2:componentName};
import react from "react";
export const ${1:componentName} = () => {
return <div></div>;
};
import React, { FC } from "react";
import React, { FC } from 'react';
interface IProps {};
const ${1:componentName}:FC<IProps> = (props) => {
return <div>${3}</div>;
};
export default ${2:componentName};
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};
describe(($1) => {
$2;
});
it(($1) => {
$2;
});
test(("should $1") => {
$2;
});
const [${1:state}, ${2:setState}] = useState(${3:defaultValue});
const [state, dispatch] = useReducer(${1:reducer}, ${2:defaultValue}, ${3:init});
const ${1:value} = useContext(${2:context});
const ${1:refName} = useRef(${3:defaultValue});
useImperativeHandle(${1:refName}, () => ({
${2:handles}
}), [${3:dependencies}]);
useEffect(() => {
${1:effect}
return () => {
${2:clear effect}
}
}, [${3:dependencies}];
useLayoutEffect(() => {
${1:effect}
return () => {
${2:clear effect}
}
}, [${3:dependencies}];
const ${1:functionName} = useCallback(() => {
${2:callback}
}, [${3:dependencies}]);
const ${1:memoName} = useMemo(() => ${2:ReactNodeName}, [${3:dependencies}]);
useDebugValue(${1:value});