Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>simple-code-snippettNew to Visual Studio Code? Get it now.
simple-code-snippett

simple-code-snippett

yangjianvs

|
19 installs
| (0) | Free
it's a code snippet plugin
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

VSCode extension about snippets & webview

Purpose

插件收录了部分常用代码的snippets,包括 element-ui 组件、 javascript、css、vue2 API 等,它能够帮你节省输入大段常用代码工作量,同时减少查阅文档时间

Usage

VSCode Extensions中安装插件 Code Snippets for Unicloud

Snippets

插件的 snippets 是以 u 开头的一串字符,如:

uel-button // <el-button type=""></el-button>

ulog    // console.log()

uVue.extend  // Vue.extend('', {/*...*/})

...

Webview & Open in browser

通过VSCode Extension 内置 Webview 实现在编辑器内部打开网页,选中查询字符,右键Open doc in editor选择查询站点。由于部分站点对iframe的限制,暂可通过浏览器访问。 如下:

  • √ vue2 API -> https://v2.cn.vuejs.org/v2/api
  • √ element-ui 组件 -> https://element.eleme.cn/#/zh-CN/component
  • NPM -> https://www.npmjs.com
  • MDN web -> https://developer.mozilla.org/zh-CN
  • 百度一下 -> https://baidu.com

Snippets Dictionary

element-ui

snippets purpose
uel-container el-container
uel-i el-i
uel-button el-button
uel-radio-group el-radio-group
uel-checkbox-group el-checkbox-group
uel-input el-input
uel-select el-select
uel-switch el-switch
uel-upload el-upload
uel-form el-form
uel-table el-table
uel-progress el-progress
uel-tree el-tree
uel-pagination el-pagination
uel-menu el-menu
uel-tabs el-tabs
uel-breadcrumb el-breadcrumb
uel-dropdown el-dropdown
uel-dialog el-dialog
uel-tooltip el-tooltip
uel-popover el-popover
uel-card el-card
uel-carousel el-carousel
uel-collapse el-collapse
umessage function $message
umessageBox-alert function $alert
umessageBox-confirm function $confirm
umessageBox-prompt funciton $prompt
unotification function $notify

vue2 API

snippets purpose
utemplate Single file component base with SCSS
udata Component data as a function
ucomputed Vue computed property
uprops-simple Vue props
uprops-advanced Props with type and default
umethods Vue method
ucomponents Vue componenets
uwatch Vue watcher with new and old value args
uwatch-deep Vue watcher in deep
urender Vue render function
ufilters Vue filter
udirective Vue directive
ubind-class-object Class binding with objects
ubind-class-array Class binding with array
ubind-style-object Inline style binding with objects
ubind-style-array Inline style binding with array
urouter-beforeEach Vue Router global guards beforeEach
ulifehooks Enumeration of Vue life circle hooks
ugenerate-store Vuex base
ugenerate-router Vue Router base
ugenerate-interceptors simple interceptors created with Axios

javascript

snippets purpose
upromise ES6 promise
usetTimeout timer setTimeout
usetInterval timer setInterval
ulog console.log()
uwarn console.warn()
uswitch-case switch-case
utry-catch try-catch
ufor-in for-in
ufor-of for-of

css

snippets purpose
uflex simple flex box
uclearfix clearfix
uellipsis extra text replaced with Ellipsis
umulti-ellipsis extra text over defined lines replaced with Ellipsis
ucustomize-scrollbar customize scrollbar
utriangle CSS triangle
uarrow-right CSS arrow-right
ubox-shadow CSS box-shadow
ubackground CSS background
ufont CSS front
uborder CSS border
utransition CSS transition
ukeyframes CSS animation @keyframes
uanimation CSS animation
uhover-moveup target element moveup when cursor hover up
uhover-scale target element change scale when cursor hover up

RegExp

snippets purpose
ureg-positive-integer 正整数
ureg-zh-en-num 中英文、数字
中英文、数字、下划线
ureg-space 空格
ureg-emoji emoji 表情
ureg-mobile-phone 移动电话
ureg-telephone 固定电话
ureg-ID 身份证号
ureg-IP IP 地址
ureg-port 端口号
ureg-mail 邮箱
ureg-website 网址
ureg-version 版本号
ureg-social-credit-code 统一社会信用码

And More

在使用中有任何问题,欢迎留下 Issues ,将不断完善。

  • Contact us
  • Jobs
  • Privacy
  • Terms of use
  • Trademarks
© 2023 Microsoft