# snippets
**Repository Path**: C-BAND/snippets
## Basic Information
- **Project Name**: snippets
- **Description**: 这个仓库记录vscode插件 A-super-snippets
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 6
- **Created**: 2022-01-13
- **Last Updated**: 2022-01-13
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# README [](https://marketplace.visualstudio.com/items?itemName=xuedao.super-comprehensive) [](https://marketplace.visualstudio.com/items?itemName=xuedao.super-comprehensive) [](https://marketplace.visualstudio.com/items?itemName=xuedao.super-comprehensive) 
欢迎来到懒人世界
[如果觉得好用，不要吝啬star(*^▽^*)](https://gitee.com/qq34347476/snippets)
今后更新更多懒人插件，欢迎提bugs,交流,关注,star：
[github](https://github.com/qq34347476)
[gitee](https://gitee.com/qq34347476)
更多优秀插件：
A-super-comprehensive: [vue-webpack-bootstrap-js-nodejs-html-css-less等前端超级合集代码补全](https://marketplace.visualstudio.com/items?itemName=xuedao.super-comprehensive)
A-super-themes: [荧光字体主题美化](https://marketplace.visualstudio.com/items?itemName=xuedao.super-themes)
A-super-translate: [英语小白必备悬浮翻译](https://marketplace.visualstudio.com/items?itemName=xuedao.super-translate)
A-super-change-case: [驼峰,下划线等词组格式互转](https://marketplace.visualstudio.com/items?itemName=xuedao.super-change-case)
Snippets-for-mui: [Mui框架代码补全](https://marketplace.visualstudio.com/items?itemName=xuedao.super-change-case)
## 前言
虽然vscode商店有很多代码补全插件，但是怎么说。。太不友好！
大佬们都是英文注释，这让我们萌新怎么看~
于是..
自己动手写了这个插件
## 链接飞机
[A-super-comprehensive下载地址](https://marketplace.visualstudio.com/items?itemName=xuedao.super-comprehensive)
`代码补全` 包含 vue,webpack,bootstrap3,javascript,css,html,php,ajax,node 等等..
`26国语翻译言` 链接：[点击](https://marketplace.visualstudio.com/items?itemName=xuedao.super-translate)
`终极美化包` 链接：[点击](https://marketplace.visualstudio.com/items?itemName=xuedao.super-themes)
后期我们还会不断更新，当然您如果发现 bugs，可以点击[github](https://github.com/qq34347476/web/issues)进行留言联系我
## 食用姿势
为了更好的体验推荐个人设置中将代码提示设置为穿插 `"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` | `` |
| `script` | `` |
| `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` | `` |
| `slotScope` | `slot-scope=""` |
| `component` | `` |
| `keepAlive` | `` |
| `transition` | `` |
| `transitionGroup` | `` |
| `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` | `` |
| `routerView` | `` |
| `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` | `` |
| `nuxtChild` | `` |
| `nuxtLink` | `` |
| `asyncData` | `asyncData() {}` |
element指南
> 配合element-helper 使用更方便
Bootstrap3指南
此部分插件食用说明单独做成阅读文档 [详细说明地址1](https://gitee.com/qq34347476/bootstrap-3.3.2-dist) , [详细说明地址2](https://github.com/qq34347476/bootstrap-3.3.2-dist)
bootstrap3参考官网文档[bootstrap3文档](https://v3.bootcss.com/)
创建一个新的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添加模式验证，[点击这里](https://github.com/hapijs/joi)可以阅读有关模式验证用法的更多信息
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相关 前缀 `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
- [更多学习复习资料](https://github.com/qq34347476/web/)
- [好的意见及 BUG 提交收集](https://github.com/qq34347476/web/issues)
**Enjoy!**