JavaScript and TypeScript Snippets for VSCode
This repository contains a collection of simple JavaScript and TypeScript snippets for VSCode, created using the snipgen extension.
Usage
To use these snippets, open a JavaScript or TypeScript file in VSCode and type the snippet name followed by a tab. The snippet will be inserted into the file at the cursor position.
Snippets
console.log // clg
console.log($1); // clg()
console.error // clge
console.error($1); // clge()
console.warn // clgw
console.warn($1); // clgw()
console.info // clgi
console.info($1); // clgi()
const $1 = $2; // c const
let $1; // l let
import { $1 } from "$2"; // i imp import
import $1 from "$2"; // id impd import default
import * as $1 from "$2"; // ia impa import all
export $1; // e exp export
export default $1; // ed expd export default
export { $1 } from "$2"; // ef expf export from
export $1 from "$2"; // edf expdf export default from
export { $1 as default } from "$2"; // eadf expadf
export * from "$1"; // eaf expaf export * from
export * as $1 from "$2"; // eaaf expaaf
($1) => { $2 }; // af arrf
export const $1 = ($2) => { $3 }; // ecaf expaf export const
function $1($2) { $3 }; // f func function
export function $1($2) { $3 }; // ef expf export function
async // a async
async function $1($2) { $3 }; // af asf async function
export async function $1($2) { $3 }; // eaf expaf expasf export async function
useState($1); // us useState
useEffect($1); //ue useEffect
useLayoutEffect($1); // ule useLayoutEffect
useRef($1); // ur useRef
uneNavigation($1); // rrun useNavigation
useSelector($1); // rus useSelector
useDispatch($1); // rud useDispatch
className = { $1 }; // cn className
// rfc
function $1($2) {
return (
<>
<div>$1</div>
</>
);
}
//rcc
class $1 extends React.Component {
constructor() {}
render() {
return (
<>
<div>$1</div>
</>
);
}
}
//rafc
const $1 = () => {
return (
<>
<div>$1</div>
</>
);
};
//rumafc
const $1 = useMemo(() => {
return (
<>
<div>$1</div>
</>
);
}, []);
useSwipe($1); // usw
useResize($1); // ur
useClickOutside($1); // uco
// hookUseSwipe
function useSwipe(ref = document, callback, deps = [], ignoreValue = 100) {
let startX, endX, startY, endY;
startX = endX = startY = endY = 0;
function touchStart(e) {
startX = e.touches[0].clientX;
startY = e.touches[0].clientY;
}
function touchEnd(e) {
endX = e.changedTouches[0].clientX;
endY = e.changedTouches[0].clientY;
if (
Math.abs(startX - endX) < ignoreValue ||
Math.abs(startY - endY) > ignoreValue / 2
) {
return;
}
if (startX - endX > 0) {
callback(false);
} else {
callback(true);
}
}
useEffect(() => {
ref.addEventListener("touchstart", touchStart, false);
ref.addEventListener("touchend", touchEnd, false);
return () => {
ref.removeEventListener("touchstart", touchStart, false);
ref.removeEventListener("touchend", touchEnd, false);
};
}, deps);
}
// hookUseResize
function useResize(size) {
const [state, setState] = useState(window.innerWidth <= config[size]);
const handleResize = (size) => {
const width = window.innerWidth;
if (width <= size) {
setState(true);
return;
}
setState(false);
};
useEffect(() => {
window.addEventListener("resize", () => handleResize(config[size]));
return () => {
window.removeEventListener("resize", () => handleResize(config[size]));
};
}, [size]);
return state;
}
// hookUseClickOutside
function useClickOutside(ref, callback, deps) {
useEffect(() => {
const eventTypes = [
"mousedown",
"mouseup",
"focusin",
"focusout",
"touchstart",
"touchend"
];
const listener = (event) => {
if (!ref.current || ref.current.contains(event.target)) {
return;
}
callback(event);
};
eventTypes.forEach((eventType) =>
document.addEventListener(eventType, listener)
);
return () => {
eventTypes.forEach((eventType) =>
document.removeEventListener(eventType, listener)
);
};
}, [ref, callback, ...deps]);
}