simple-code-snippet

简介

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

安装

VSCode Extensions 中安装插件 yangjianvs.simple-code-snippet

使用 snippets

snippets 是以 u 开头的一串字符，如当需要编写 element-plus 中的 button 组件时，可输入如下 snippet，将替换为 el-button 组件，并例举出组件常用属性

• uel-button

// snippet
<el-button type="warning" plain round circle link disabled :icon="Edit"></el-button>

• uel-menu

<el-menu mode="horizontal"  @select="">
  <el-menu-item index="1">
    <el-icon><Edit /></el-icon>
    <template #title>菜单1</template>
  </el-menu-item>

  <el-sub-menu index="2">
    <template #title>
      <el-icon><Edit /></el-icon>
      <span>1-1</span>
    </template>
    <el-menu-item index="">
      1-2
    </el-menu-item>
  </el-sub-menu>
</el-menu>

Vue Composition API 使用

• uwatch

const count = ref(0)
const stop = watch(
  count, // 函数返回值 | 一个ref | 数组
  (val, oldVal) => {}
  { immediate: true,  deep: true}
)
stop() // 停止监听

• uslot

<!-- 具名作用域插槽, 默认插槽 v-slot="slotProps" -->
<Comp #header="slotProps">
{{ slotProps.text }} {{ slotProps.count }}
</Comp>

// Comp
<div>
  <slot name="header" :text="message" :count="1"></slot>
</div>

你也可以在本地 vscode 插件安装出，找到 code-snippet-master 文件夹，自定义需要的 snippet，而无需发布。这是 snippet 插件常用的方式

Webview

通过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

And More

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