Watch 3 Star 20 Fork 1

Jiang / snippetsJavaScript

Create your Gitee Account
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
This repository doesn't specify license. Without author's permission, this code is only for learning and cannot be used for other purposes.
这个仓库记录vscode插件 A-super-snippets spread retract

Clone or download
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README.md

README

欢迎来到懒人世界

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

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

更多优秀插件:

A-super-comprehensive: vue-webpack-bootstrap-js-nodejs-html-css-less等前端超级合集代码补全

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
状态修改(回调函数) 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相关 前缀 umirc dva 前缀 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

api代码段

内容 快捷键
ActionSheetIOS(弹出操作表) rn-api-ActionSheetIOS
ActionSheetIOS(弹出分享框) rn-api-ActionSheetIOS
Alert rn-api-Alert

Known Issues

由于自启插件设置为全局,开启 VScode 加载会较慢(0.3-1S)

Release Notes

Tip: 超过 2000 种常用快捷补全及注释用法 自启笔记页

全局设置

  • 如果你安装了jQuery Code Snippets插件

    使用前必须卸载(禁用)jQuery Code Snippets

  • 如果你想禁用开启vscode时自启笔记页(可以通过右键查询web笔记)

    vscodePluginDemo.showTip:false

For more information

Enjoy!

Comments ( 5 )

Sign in for post a comment

JavaScript
1
https://gitee.com/qq34347476/snippets.git
git@gitee.com:qq34347476/snippets.git
qq34347476
snippets
snippets
master

Search