snippets: 这个仓库记录vscode插件 A-super-snippets

原作者: [db:作者] 来自: 网络收藏邀请

开源软件名称：

snippets

开源软件地址：

https://gitee.com/qq34347476/snippets

开源软件介绍：

README

欢迎来到懒人世界

如果觉得好用，不要吝啬star(^▽^)

今后更新更多懒人插件，欢迎提bugs,交流,关注,star：github gitee

A-super-themes: 荧光字体主题美化

A-super-translate: 英语小白必备悬浮翻译

A-super-change-case: 驼峰,下划线等词组格式互转

Snippets-for-mui: Mui框架代码补全

前言

虽然vscode商店有很多代码补全插件，但是怎么说。。太不友好！

大佬们都是英文注释，这让我们萌新怎么看~

于是..

自己动手写了这个插件

链接飞机

A-super-comprehensive下载地址

代码补全 包含 vue,webpack,bootstrap3,javascript,css,html,php,ajax,node 等等..

26国语翻译言 链接：点击

终极美化包 链接：点击

后期我们还会不断更新，当然您如果发现 bugs，可以点击github进行留言联系我

食用姿势

为了更好的体验推荐个人设置中将代码提示设置为穿插 "editor.snippetSuggestions": "inline",

由于本人比较懒，其实彩蛋很多，自行体会(●'◡'●)

右击菜单打开查询笔记

只需要输入在相应的地方输入相应的快捷键，自动补全

有时候你也可以输入中文 , 自动补全

javaScript指南

内容	快捷键
显示全部	js
node类	node
module.exports	me
淘宝flexble.js自适应	csh
清除h5 click300ms延时	csh
各种格式化	format
笔记算法用法等	help
获取类	get
常用正则表达式	zzbds
存储	storage
touch手指触摸事件	touch
物理像素比	dpr
对象类	dx
单词	dc
location相关	location
清除类	clear
定时器	dsq
事件	sj
鼠标事件	mouse
键盘事件	key
选择元素(以及元素操作)	dom
坐标	zb
创建	create
设置	set
删除	del
克隆	clone
添加	add
阻止(禁用)	stop
封装的几个函数	hs
兼容处理的函数	jr
反选按钮	fx
全选按钮	qx
排序	px
数组去重	qc
构造函数	gzhs
随机整数	sjqz
获取时间	time
倒计时	djs
BOM加载事件	load
动画函数	dh
拖动元素	td
放大镜	fdj
根据浏览器不同实现跳转	tz
导航栏鼠标动画效果	nav
移动端拖动元素	td
轮播图(移动端)	lbt
返回顶部函数	goback
判断	is
自调用函数	!
改变this指向	changethis
原型继承	yxjc
图片即时预览	yl
状态码	ztm
创建异步对象	create
ajax相关	ajax
监听响应状态	listen
判断服务器成功响应且数据解析完成	is
异步对象发送GET请求	xhr
服务器返回值	res
服务器成功响应且数据解析完毕可以使用	ajaxon

vue指南

基于最新的 Vue 2 的 API 添加了Code Snippets,以及部分常用代码块模板. 沿用vue 2 Snippets插件使用方法

Including most of the API of Vue.js 2. You can type vcom, choose VueConfigOptionMergeStrategies, and press ENTER, then Vue.config.optionMergeStrategies appear on the screen.

插件的 Snippets 如下表格所示，比如你可以键入 vcom 然后按上下键选中 VueConfigOptionMergeStrategies 再按Enter键，就输入了Vue.config.optionMergeStrategies了。

As shown in the table below, snippet vmData has body like ${this, vm}.$data will provides choice this.$data and vm.$data to you.

如下表所示，vmData 的内容是 ${this, vm}.$data，这表明这个 snippet 会提供 this.$data and vm.$data 两种选项供你选择。

大类别的使用：

如果你想找vue全局配置  键入 `vue-config`api类  键入`api`axios:  键入`axios`  配置相关(如配置baseURL,拦截器等),  第二类键入 `config`

Prefix	JavaScript Snippet Content
`axios-get/post/delete/put`	`发送axios请求`
`axios-config-baseURL`	配置请求的基准URL地址
`axios-config-headers`	配置请求头信息
`axios-config-interceptors-request`	axios设置请求拦截器
`axios-config-interceptors-response`	axios设置响应拦截器
`import`	`import ... from ...`
`newVue`	`new Vue({...})`
`VueConfigSilent`	`Vue.config.silent = true`
`VueConfigOptionMergeStrategies`	`Vue.config.optionMergeStrategies`
`VueConfigDevtools`	`Vue.config.devtools = true`
`VueConfigErrorHandler`	`Vue.config.errorHandler = function (err, vm, info) {...}`
`VueConfigWarnHandler`	`Vue.config.warnHandler = function (msg, vm, trace) {...}`
`VueConfigIgnoredElements`	`Vue.config.ignoredElements = ['']` \
`VueConfigKeyCodes`	`Vue.config.keyCodes`
`VueConfigPerformance`	`Vue.config.performance = true`
`VueConfigProductionTip`	`Vue.config.productionTip = false`
`vueExtend`	`Vue.extend( options )`
`VueNextTick`	`Vue.nextTick( callback, [context] )`
`VueNextTickThen`	`Vue.nextTick( callback, [context] ).then(function(){ })`
`VueSet`	`Vue.set( target, key, value )`
`VueDelete`	`Vue.delete( target, key )`
`VueDirective`	`Vue.directive( id, [definition] )`
`VueFilter`	`Vue.filter( id, [definition] )`
`VueComponent`	`Vue.component( id, [definition] )`
`VueUse`	`Vue.use( plugin )`
`VueMixin`	`Vue.mixin({ mixin })`
`VueCompile`	`Vue.compile( template )`
`VueVersion`	`Vue.version`
`data`	`data() { return {} }`
`watchWithOptions`	`key: { deep: true, immediate: true, handler: function () { } }`
`vmData`	`${this, vm}.$data`
`vmProps`	`${this, vm}.$props`
`vmEl`	`${this, vm}.$el`
`vmOptions`	`${this, vm}.$options`
`vmParent`	`${this, vm}.$parent`
`vmRoot`	`${this, vm}.$root`
`vmChildren`	`${this, vm}.$children`
`vmSlots`	`${this, vm}.$slots`
`vmScopedSlots`	`${this, vm}.$scopedSlots.default({})`
`vmRefs`	`${this, vm}.$refs`
`vmIsServer`	`${this, vm}.$isServer`
`vmAttrs`	`${this, vm}.$attrs`
`vmListeners`	`${this, vm}.listeners`
`vmWatch`	`${this, vm}.$watch( expOrFn, callback, [options] )`
`vmSet`	`${this, vm}.$set( object, key, value )`
`vmDelete`	`${this, vm}.$delete( object, key )`
`vmOn`	`${this, vm}.$on( event, callback )`
`vmOnce`	`${this, vm}.$once( event, callback )`
`vmOff`	`${this, vm}.$off( [event, callback] )`
`vmEmit`	`${this, vm}.$emit( event, […args] )`
`vmMount`	`${this, vm}.$mount( [elementOrSelector] )`
`vmForceUpdate`	`${this, vm}.$forceUpdate()`
`vmNextTick`	`${this, vm}.$nextTick( callback )`
`vmDestroy`	`${this, vm}.$destroy()`
`renderer`	`const renderer = require('vue-server-renderer').createRenderer()`
`createRenderer`	`createRenderer({ })`
`preventDefault`	`preventDefault();`
`stopPropagation`	`stopPropagation();`

Prefix	HTML Snippet Content
`template`	`<template></template>`
`script`	`<script></script>`
`style`	`<style></style>`
`vText`	`v-text=msg`
`vHtml`	`v-html=html`
`vShow`	`v-show`
`vIf`	`v-if`
`vElse`	`v-else`
`vElseIf`	`v-else-if`
`vForWithoutKey`	`v-for`
`vFor`	`v-for="" :key=""`
`vOn`	`v-on`
`vBind`	`v-bind`
`vModel`	`v-model`
`vPre`	`v-pre`
`vCloak`	`v-cloak`
`vOnce`	`v-once`
`key`	`:key`
`ref`	`ref`
`slotA`	`slot=""`
`slotE`	`<slot></slot>`
`slotScope`	`slot-scope=""`
`component`	`<component :is=''></component>`
`keepAlive`	`<keep-alive></keep-alive>`
`transition`	`<transition></transition>`
`transitionGroup`	`<transition-group></transition-group>`
`enterClass`	`enter-class=''`
`leaveClass`	`leave-class=''`
`appearClass`	`appear-class=''`
`enterToClass`	`enter-to-class=''`
`leaveToClass`	`leave-to-class=''`
`appearToClass`	`appear-to-class=''`
`enterActiveClass`	`enter-active-class=''`
`leaveActiveClass`	`leave-active-class=''`
`appearActiveClass`	`appear-active-class=''`
`beforeEnterEvent`	`@before-enter=''`
`beforeLeaveEvent`	`@before-leave=''`
`beforeAppearEvent`	`@before-appear=''`
`enterEvent`	`@enter=''`
`leaveEvent`	`@leave=''`
`appearEvent`	`@appear=''`
`afterEnterEvent`	`@after-enter=''`
`afterLeaveEvent`	`@after-leave=''`
`afterAppearEvent`	`@after-appear=''`
`enterCancelledEvent`	`@enter-cancelled=''`
`leaveCancelledEvent`	`@leave-cancelled=''`
`appearCancelledEvent`	`@appear-cancelled=''`

Prefix	Vue Router Snippet Content
`routerLink`	`<router-link></router-link>`
`routerView`	`<router-view></router-view>`
`to`	`to=""`
`tag`	`tag=""`
`newVueRouter`	`const router = newVueRouter({ })`
`routerBeforeEach`	`router.beforeEach((to, from, next) => { }`
`routerBeforeResolve`	`router.beforeResolve((to, from, next) => { }`
`routerAfterEach`	`router.afterEach((to, from) => { }`
`routerPush`	`router.push()`
`routerReplace`	`router.replace()`
`routerGo`	`router.back()`
`routerBack`	`router.push()`
`routerForward`	`router.forward()`
`routerGetMatchedComponents`	`router.getMatchedComponents()`
`routerResolve`	`router.resolve()`
`routerAddRoutes`	`router.addRoutes()`
`routerOnReady`	`router.onReady()`
`routerOnError`	`router.onError()`
`routes`	`routes: []`
`beforeEnter`	`beforeEnter: (to, from, next) => { }`
`beforeRouteEnter`	`beforeRouteEnter (to, from, next) { }`
`beforeRouteLeave`	`beforeRouteLeave (to, from, next) { }`
`scrollBehavior`	`scrollBehavior (to, from, savedPosition) { }`

Prefix	Vuex Snippet Content
`newVuexStore`	`const store = new Vuex.Store({ })`

Prefix	Nuxt.js Snippet Content
`nuxt`	`<nuxt/>`
`nuxtChild`	`<nuxt-child/>`
`nuxtLink`	`<nuxt-link to=""/>`
`asyncData`	`asyncData() {}`

element指南

配合element-helper 使用更方便

Bootstrap3指南

此部分插件食用说明单独做成阅读文档详细说明地址1 , 详细说明地址2

bootstrap3参考官网文档bootstrap3文档

创建一个新的HTML文档并键入“bs3”以查看所有可用的代码段。

例:如果你想用bootstrap3,键入bs3,想要通栏block,想要链接型link,想要按钮button,想要导航nav等等

再举个栗子:如果你想用栏栅系统输入b35,b37，就可以分出5份跟7份的一排格栅

css/less指南

内容	快捷键
显示全部	html
显示全部	css
初始化	csh
文本超出省略	sl
transform连写	transform
动画	dh
flex相关属性	flex
@media	@

webpack指南

前缀wp4,即想查找所有webpack相关代码，键入 wp4

wp4-template
wp4-dev-server
wp4-source-map
wp4-inline-source-map
wp4-loader-babel
wp4-loader-css
wp4-loader-less
wp4-loader-scss
wp4-loader-ts
wp4-loader-url
wp4-loader-img
wp4-loader-ttf
wp4-optimization
wp4-requireHTMLPlugin
wp4-requireCleanPlugin
wp4-clean-plugin
wp4-html-plugin
wp4-resolve

nodeJS指南

快捷键 nodejs查看所有

node中以node为前缀激活, 模块化激活例:node-file，查看常用file模块

npm 常用资源包键入npm

提供两种模式

完整版跟片段版本,举个栗子：(读取文件)`node-file`中补全的是从引入fs模块开始的完整的代码片段`readFile`的提示补全的是读取文件的剩下代码片段

可以使用以下命令：

node-express，express 服务器相关
node-http，HTTP服务器相关
node-file，常用文件操作相关
node-mysql,数据库操作相关
node-event-emitter，创建事件发射器，发出事件和节目以订阅所述事件
node-promise-create，创造一个承诺
node-promise-shorthand，创建使用静态方法的承诺resolve()和reject()
node-promise-all，使用该Promise.all([])方法解析Promise列表
node-async-await，使用async / await
node-express-schema-validation，为express添加模式验证，点击这里可以阅读有关模式验证用法的更多信息

jquery指南

内容	快捷键
显示全部	jq...

如果你需要使用ajax,那么就是jqajax

php指南

内容	快捷键
显示常用	php
php基础设置	config
mysqli操作类	mysqli
sql语句	sql
获取类	get
判断类	is
删除类	del
header的设置	header
文件操作	file
json格式转换	json
创建类	create
修改类	change
执行类(使用)	use
封装的函数	hs

React

内容	快捷键
一键创建模板	!-react
一键创建高阶组件模板	!-react-HOC
一键创建高阶组件demo(获取鼠标位置)	!-react-HOC-demo
一键创建hoos基础模板	!-react-hooks
状态修改(回调函数)	this.setState
表单快速双向绑定	handleChange
表单快速双向绑定(一对多)	handleChange
非受控组件(直接操作DOM)	ref
Fragment占位符(无结构DIV)	Fragment
reducer模板	reducer

通信前缀 tx

内容	快捷键
自定义事件通信,新建events.js	tx-event-newEventEmitter
EventEmitter自定义事件触发(调用)	tx-event-emit
EventEmitter自定义通信监听	tx-event-addListener
createContext(跨级组件通信)	tx-createContext
Provider(跨级通信传递)	tx-Provider
Consumer(跨级通信接收)	tx-Consumer

生命周期前缀 sm

内容	快捷键
constructor(挂载阶段生命周期)	sm-constructor
render(挂载阶段/更新阶段生命周期)	sm-render
componentDidMount(挂载阶段生命周期)	sm-componentDidMount
componentDidUpdata(更新阶段生命周期)	sm-componentDidUpdate
componentWillUnmount(卸载阶段生命周期)	sm-componentWillUnmount
shouldComponentUpdate(更新阶段生命周期)	sm-shouldComponentUpdate

路由相关前缀 route

内容	快捷键
引入 react-router	route
react-router容器(跳转的内容)	route
路由容器	route
嵌套路由容器	route
接收路由参数	route-params
跳转导航链接	route-link
编程式导航	route-push
Switch组件(只匹配第一个路由规则)	route-Switch
Redirect重定向	route-redirect

Hook 前缀 hook

内容	快捷键
StateHook(类似constructor)	hook-useState
EffectHook(类似componentDidMount+componentDidUpdata)	hook-effect
ContextHook	hook-useContext
MemoHook	hook-useMemo
ReducerHook	hook-useReducer

UmiJs配置 umirc相关前缀 umircdva 前缀 dva

React-native指南(jsx)

组件

内容	快捷键
一键创建模板	!-react
基础组件模板	!-react-native
顶部导航(注释版)	rn-help-bar
顶部导航	rn-bar,rn-createStackNavigator
底部导航卡(注释版)	rn-help-bar
底部导航卡	rn-createBottomTabNavigator,rn-bar
StyleSheet(样式表)	rn-stylesheet
获取自适应屏幕宽度	rn-dimensions
轮播图(注释版)	rn-help-lbt
轮播图	rn-carousel
跳转tabBar	rn-onpress
顶部导航动态	rn-navigationOptions
ActivityIndicator	rn-ActivityIndicator
Button	rn-Button
TouchableOpacity	rn-TouchableOpacity
DatePickerIOS	rn-DatePickerIOS
DrawerLayoutAndroid	rn-DrawerLayoutAndroid
Image	rn-Image
KeyboardAvoidingView	rn-KeyboardAvoidingView
Modal	rn-Modal
Picker	rn-Picker
PickerIOS	rn-PickerIOS
ProgressBarAndroid	rn-ProgressBarAndroid
ProgressViewIOS	rn-ProgressViewIOS
ScrollView	rn-ScrollView
ScrollView(详细)	rn-ScrollView
SegmentedControlIOS	rn-SegmentedControlIOS
StatusBar	rn-StatusBar
Switch	rn-Switch
Text	rn-Text
View	rn-View
TextInput(详细)	rn-TextInput
TextInput	rn-TextInput
ToolbarAndroid	rn-ToolbarAndroid