vsc-code-snippets
这是一个vscode的代码片段生成插件，专注于前端开发使用，通过简短的命令字符生成常用模板代码来节省编码时间，达到少写重复代码的目的。
地址：https://gitlab.yit.com/wangzhaoxiong/vsc-code-snippets
安装使用
vscode编辑器插件中心搜索vsc-code-snippets安装即可使用
本地命令
// 插件打包
npm i -g vsce
vsce package
// 文档生成
npm run md
更新日志
- 0.0.1 项目初始化
- 0.0.2 文档生成
- 0.0.3 添加完善代码片段模板
- 0.0.4 修复bug及添加新模板
- 0.0.5 添加js & html新模板
- 0.0.6 修改语言文件支持情况，修改vscode版本支持
- 0.0.7 添加小程序相关代码片段
- 0.0.8 格式化代码
- 0.0.9 添加$
文档列表
CSS
1. @import css
Trigger Key: @imp
@import '$1'
2. text-align:center
Trigger Key: tc
text-align:center;
3. text-align:right
Trigger Key: tr
text-align:right;
4. float:left
Trigger Key: fl
float:left;
5. float:right
Trigger Key: fr
float:right;
6. padding-left
Trigger Key: pl
padding-left:
7. padding-right
Trigger Key: pr
padding-right:
8. padding-top
Trigger Key: pt
padding-top:
9. padding-bottom
Trigger Key: pb
padding-bottom:
10. margin-left
Trigger Key: ml
margin-left:
11. margin-right
Trigger Key: mr
margin-right:
12. margin-top
Trigger Key: mt
margin-top:
13. margin-bottom
Trigger Key: mb
margin-bottom:
HTML
1. init vue page template
Trigger Key: init
<template>
<div class="yit-view">
</div>
</template>
<script>
export default {
name: 'page-$1',
filters: {},
components: {},
mixins: [],
props: {},
data() {
return {
};
},
computed: {
},
watch: {
\$route: {
immediate: true,
handler(val) {
//
}
},
},
created() {
//
},
methods: {
init() {
//
},
}
};
</script>
<style lang="scss">
</style>
Trigger Key: elform
<el-form :inline="true" :rules="rules" ref="queryForm" label-width="100px" :model="queryForm">
<el-form-item label="审批人" prop="">
<el-input v-model="queryForm.user" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="活动区域" prop="">
<el-select v-model="queryForm.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleFormQuery('queryForm')">查询</el-button>
<el-button @click="handleFormReset('queryForm')">重置</el-button>
</el-form-item>
</el-form>
Trigger Key: elfi
<el-form-item label="$1" prop="">
</el-form-item>
4. basic el-table container
Trigger Key: eltable
<el-table :data="tableData" border style="width: 100%">
<el-table-column prop="date" label="日期" width="120">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
<template slot-scope="scope">
<div></div>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="100">
<template slot-scope="scope">
<el-button @click="handleTableClick(scope.row)" type="text" size="small">查看</el-button>
<el-button @click="handleTableClick(scope.row)" type="text" size="small">编辑</el-button>
</template>
</el-table-column>
</el-table>
5. el.table.column
Trigger Key: eltablec
<el-table-column prop="date" label="$1" width="120">
</el-table-column>
6. el.tag
Trigger Key: eltag
<el-tag>$1</el-tag>
7. el.tag.success
Trigger Key: eltags
<el-tag type="success" closable >$1</el-tag>
8. el.tag.info
Trigger Key: eltagi
<el-tag type="info" closable >$1</el-tag>
9. el.tag.warning
Trigger Key: eltagw
<el-tag type="warning" closable >$1</el-tag>
10. el.tag.danger
Trigger Key: eltagd
<el-tag type="danger" closable >$1</el-tag>
11. el.progress.line
Trigger Key: elpr
<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
12. el.progress.circle
Trigger Key: elprc
<el-progress type="circle" :percentage="80" color="#8e71c7" status="text"></el-progress>
13. el.tree
Trigger Key: eltree
<el-tree
ref="tree"
:data="data2"
show-checkbox
node-key="id"
default-expand-all
:props="defaultProps"
@node-click="handleNodeClick"
>
</el-tree>
Trigger Key: elpagi
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage4"
:page-sizes="[100, 200, 300, 400]"
:page-size="100"
layout="total, sizes, prev, pager, next, jumper"
:total="400">
</el-pagination>
15. el.badge
Trigger Key: elba
<el-badge :value="$1" >
</el-badge>
16. el.badge.primary
Trigger Key: elbap
<el-badge :value="$1" type="primary">
</el-badge>
17. el.badge.warning
Trigger Key: elbaw
<el-badge :value="$1" type="warning">
</el-badge>
18. el.alert.success
Trigger Key: elals
<el-alert
title="$1"
type="success">
</el-alert>
19. el.alert.info
Trigger Key: elali
<el-alert
title="$1"
type="info">
</el-alert>
20. el.alert.warning
Trigger Key: elalw
<el-alert
title="$1"
type="warning">
</el-alert>
21. el.alert.error
Trigger Key: elale
<el-alert
title="$1"
type="error">
</el-alert>
Trigger Key: elbtn
<el-button>$1</el-button>
Trigger Key: elbtnp
<el-button type="primary">$1</el-button>
Trigger Key: elbtns
<el-button type="success">$1</el-button>
Trigger Key: elbtni
<el-button type="info">$1</el-button>
Trigger Key: elbtnw
<el-button type="warning">$1</el-button>
Trigger Key: elbtnd
<el-button type="danger">$1</el-button>
28. el.radio
Trigger Key: elrd
<el-radio v-model="radio" :label="1">$1</el-radio>
29. el.radio.group
Trigger Key: elrdg
<el-radio-group v-model="radio">
<el-radio :label="1">$1</el-radio>
<el-radio :label="2">$1</el-radio>
<el-radio :label="3">$1</el-radio>
</el-radio-group>
30. el.checked
Trigger Key: elck
<el-checkbox v-model="checked">$1</el-checkbox>
31. el.checked.group
Trigger Key: elckg
<el-checkbox-group v-model="checkList">
<el-checkbox label="$1"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group>
Trigger Key: eli
<el-input placeholder="请输入" v-model="input" clearable maxlength="10"></el-input>
33. el.input.textarea
Trigger Key: elit
<el-input type="textarea" :rows="3" placeholder="请输入" v-model="textarea" resize="none" @change="handleTextareaChange"></el-input>
Trigger Key: elin
<el-input-number v-model="num" @change="handleStepChange" :step="1" :min="1" :max="10" :precision="0"></el-input-number>
35. el.select
Trigger Key: elsel
<el-select v-model="value" clearable multiple filterable placeholder="请选择">
<el-option
v-for="(item, i) in options"
:key="i"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
36. el.cascader
Trigger Key: elcas
<el-cascader
v-model="value"
:options="options"
clearable filterable
@change="handleChange">
</el-cascader>
37. el.switch
Trigger Key: elsw
<el-switch
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949">
active-text="按月付费"
inactive-text="按年付费"
</el-switch>
38. el.slider
Trigger Key: elsl
<el-slider
v-model="value9"
range
show-stops
:max="10">
</el-slider>
39. el.time.picker
Trigger Key: eltp
<el-time-picker
is-range
v-model="value"
range-separator="至"
start-placeholder="开始时间"
end-placeholder="结束时间"
placeholder="选择时间范围">
</el-time-picker>
40. el.date.picker
Trigger Key: eldp
<el-date-picker
clearable value-format="yyyy-MMM-dd"
v-model="value"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" @change="handleDatePickerChange">
</el-date-picker>
41. el.date.time.picker
Trigger Key: eldtp
<el-date-picker
clearable value-format="yyyy-MMM-dd hh:mm:ss"
v-model="value"
:picker-options="pickerOptions"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" @change="handleDatePickerChange">
</el-date-picker>
Trigger Key: elmenu
<el-menu
default-active="1"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航四</span>
</el-menu-item>
</el-menu>
Trigger Key: elsubmenu
<el-menu-item index="$1">
</el-menu-item>
44. el.tabs
Trigger Key: eltabs
<el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
<el-tab-pane label="$1" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
</el-tabs>
45. el.tabs.pane
Trigger Key: eltabsp
<el-tab-pane label="用户管理" name="first">
$1
</el-tab-pane>
46. el.breadcrumb
Trigger Key: elbr
<el-breadcrumb separator="/">
<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
<el-breadcrumb-item>活动详情</el-breadcrumb-item>
</el-breadcrumb>
47. el.dropdown
Trigger Key: eldr
<el-dropdown @command="handleCommand">
<span class="el-dropdown-link">
下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="a">黄金糕</el-dropdown-item>
<el-dropdown-item command="b">狮子头</el-dropdown-item>
<el-dropdown-item command="c">螺蛳粉</el-dropdown-item>
<el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>
<el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
48. el.steps
Trigger Key: elsteps
<el-steps :active="active" direction="vertical" finish-status="success">
<el-step title=""></el-step>
<el-step title=""></el-step>
<el-step title=""></el-step>
</el-steps>
49. el.step
Trigger Key: elstep
<el-step title="" description="" status=""></el-step>
50. el.dialog
Trigger Key: eldia
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="50%"
@close="handleClose">
<div>$1</div>
<div slot="footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleSubmit">确 定</el-button>
</div>
</el-dialog>
Trigger Key: eltool
<el-tooltip effect="dark" content="Top Center 提示文字" placement="top">
<el-button>上边</el-button>
</el-tooltip>
52. el.popover
Trigger Key: elpop
<el-popover
placement="right"
width="400"
trigger="click">
<div>
</div>
<el-button slot="reference">click 激活</el-button>
</el-popover>
53. el.card
Trigger Key: elcard
<el-card>
<div slot="header" >
$1
</div>
<div>
</div>
</el-card>
54. el.collapse
Trigger Key: elcollapse
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="$1" name="1">
<div>$2</div>
</el-collapse-item>
<el-collapse-item title="" name="2">
<div></div>
</el-collapse-item>
</el-collapse>
55. el.timeline
Trigger Key: eltl
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
56. el.timeline
Trigger Key: eltli
<el-timeline-item>
</el-timeline-item>
JAVASCRIPT
1. single request demo async function
Trigger Key: apis
async singleHttpFunc() {
const params = {
method: 'post',
mt: '$1',
data: {
}
};
const result = await this.fnFetch(params);
if (result) {
const data = result[0].data;
console.log(data);
}
},
2. multiple request demo async function
Trigger Key: apim
async multipleHttpFunc() {
const params = {
method: 'post',
mt: ['$1'],
data: [
{
}
]
};
const result = await this.fnFetch(params);
if (result) {
console.log(result);
}
},
3. single request demo for old boss project
Trigger Key: apib
async singleHttpFunc() {
const params = {
method: 'post',
url: '$1',
data: {
}
};
const res = await api.ajaxPromise(params);
if (res.error_num === 0) {
const data = res.content;
console.log(data);
} else {
}
},
4. single request demo for xcx project
Trigger Key: apixcx
async xcxHttpFunc() {
try {
const params = {
url: '$1',
data: {
}
};
const res = await app.\$fetch(params);
if (res.error_num === 0) {
const data = res.content;
console.log(data);
} else {
}
} catch(error) {
}
},
5. import api map file
Trigger Key: impa
import '@/assets/file/$1'
6. import folder signed api map file
Trigger Key: impas
import '@/assets/signed/$1'
7. import component
Trigger Key: impc
import xx from '@/components/$1'
8. message
Trigger Key: elmsg
this.\$message('$1');
9. message error
Trigger Key: elmsge
this.\$message.error('$1');
10. message warning
Trigger Key: elmsgw
this.\$message.warning('$1');
11. message success
Trigger Key: elmsgs
this.\$message.success('$1');
12. message box alert
Trigger Key: elalert
this.\$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
13. message box confirm
Trigger Key: elconfirm
this.\$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
return true
}).catch(() => {
return false
});
14. notify info
Trigger Key: elntf
this.\$notify.info({ title: '消息', message: '$1' });
15. notify error
Trigger Key: elntfe
this.\$notify.error({ title: '错误', message: '$1' });
16. notify warning
Trigger Key: elntfw
this.\$notify.warning({ title: '警告', message: '$1' });
17. notify success
Trigger Key: elntfs
this.\$notify.success({ title: '成功', message: '$1' });
18. el option empty data structure
Trigger Key: elopt
options: [
{ label: '', value: '' },
{ label: '', value: '' },
],
19. el option data structure
Trigger Key: elrule
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
]
},
Trigger Key: elfr
handleFormReset(refName) {
this.\$refs[refName].resetFields();
},
Trigger Key: elfq
handleFormQuery(formName) {
this.\$refs[formName].validate((valid) => {
if (valid) {
$1
}
});
},
22. base route config object
Trigger Key: bsroute
{
path: '$1',
name: '',
component: ,
meta: {
title: '',
icon: '',
permission: ''
}
},
23. mini program page init
Trigger Key: mpinit
const app = getApp();
import util from 'util';
Page({
data:{
$1
},
customData: {
},
onLoad(options) {
this.pageInit(options);
},
onShow() {},
onReady() {},
onHide() {},
onUnload() {},
pageInit(options) {
}
})
