EvilMoOd Snippet

一个包搞定各种snippet，补充vscode内置没有的代码片段，做到刚刚好够用！！！😁 vue借鉴Vue Vscode Snippet，react借鉴react Snippet。 全面拥抱Vue3和react函数组件，不适用vue2和react类组件

Common for JavaScript and TypeScript

Base

Snippet	Purpose
cl	console.log
ei	else if
el	else
a	()=>
ar	()=>{}

Array

Snippet	Purpose
map	map function
forEach	forEach function
reduce	reduce function
filter	filter function
find	find function
findIndex	findIndex function
sort	sort function

Promise

Snippet	Purpose
then	then function
catch	catch function

node

Snippet	Purpose
require	require a package
exports	exports a package
module exports	exports default a package

module

Snippet	Purpose
imf	import a package
im	import a file url
ex	export a package
exd	export default a package

code block

Snippet	Purpose
block	a code block 可折叠代码块

TS （大部分代码片段都内置在vscode中，所以只补充没有的）

Snippet	Purpose
type	type =
interface	interface name {}
setinterval	定时器

Vue

base

Snippet	Purpose
vue	Vue Base Template TS SCSS

Vue Composition API

Snippet	Purpose
ref	Vue Ref
reactive	Vue Composition API - reactive
computed	Vue Composition API - computed
watch	Vue Composition API - watcher single source
watch-array	Vue Composition API - watch as array
watcheffect	Vue Composition API - watchEffect
defineProps	Vue Composition API - defineProps
onmounted	Lifecycle hook - onMounted
onbeforemount	Lifecycle hook - onBeforeMount
onbeforeupdate	Lifecycle hook - onBeforeUpdate
onupdated	Lifecycle hook - onUpdated
onerrorcaptured	Lifecycle hook - onErrorCaptured
onunmounted	Lifecycle hook - (destroyed) onUnmounted
onbeforeunmount	Lifecycle hook - (beforeDestroy) onBeforeUnmount

Vue Router

Snippet	Purpose
vroute	Vue Route base
vrouter	Vue Router base
vscrollbehavior	Vue Router scrollBehavior
vbeforeeach	Vue Router global guards beforeEach
vbeforeresolve	Vue Router global guards beforeResolve
vaftereach	Vue Router global guards afterEach
vbeforeenter	Vue Router per-route guard beforeEnter
vbeforerouteenter	Vue Router component guards beforeRouteEnter
vbeforerouteupdate	Vue Router component guards beforeRouteUpdate
vbeforerouteleave	Vue Router component guards beforeRouteLeave

Pinia

Snippet	Purpose
pinia	PiniaBase

Template

Snippet	Purpose
v-for	v-for directive
v-for-element	v-for directive
v-input	Input with modelValue
v-component	Named component
v-slot	Named slot
v-img	Image src binding
v-style	Inline style binding
v-class	Class binding
v-transition	Transition component with JS hooks
v-transition-group	Transition component with JS hooks
v-router-view	router-view Named Routing
v-router-link	router-link Named Routing
v-router-link-params	router-link Named with Parameters
v-router-path	router-link Path Routing Link

React

base

Snippet	Purpose
rfc	React Function Template
memo	React memo Function Template

Hook

Snippet	Purpose
useState	useState Hook
useTransition	useTransition Hook
useDeferredValue	useDeferredValue Hook
useContext	useContext Hook
useReducer	useReducer Hook
useSyncExternalStore	useSyncExternalStore Hook
useMemo	useMemo Hook
useCallback	useCallback Hook
useEffect	useEffect Hook
useLayoutEffect	useLayoutEffect Hook
useInsertionEffect	useInsertionEffect Hook
useRef	useRef Hook
useImperativeHandle	useImperativeHandle Hook

Template

Snippet	Purpose
className	scss module classname
onClick	onClick and arrow function