vsc-code-snippets

zx.wang

|
33 installs
| (0) | Free
a vscode extension for coding quickly
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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版本支持

文档列表

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>

2. basic el-form container

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>

3. el.form.item

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>

14. el.pagination

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>

22. el.button

Trigger Key: elbtn

<el-button>$1</el-button>

23. el.button.primary

Trigger Key: elbtnp

<el-button type="primary">$1</el-button>

24. el.button.success

Trigger Key: elbtns

<el-button type="success">$1</el-button>

25. el.button.info

Trigger Key: elbtni

<el-button type="info">$1</el-button>

26. el.button.warning

Trigger Key: elbtnw

<el-button type="warning">$1</el-button>

27. el.button.danger

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>

32. el.input

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>

34. el.input.number

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>

42. el.menu

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>

43. el.submenu

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>

51. el.tooltip

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. import api map file

Trigger Key: impa

import '@/assets/file/$1'

5. import folder signed api map file

Trigger Key: impas

import '@/assets/signed/$1'

6. import component

Trigger Key: impc

import xx from '@/components/$1'

7. message

Trigger Key: elmsg

this.\$message('$1');

8. message error

Trigger Key: elmsge

this.\$message.error('$1');

9. message warning

Trigger Key: elmsgw

this.\$message.warning('$1');

10. message success

Trigger Key: elmsgs

this.\$message.success('$1');

11. message box alert

Trigger Key: elalert

this.\$alert('这是一段内容', '标题名称', {
	confirmButtonText: '确定',
	callback: action => {
		this.$message({
			type: 'info',
			message: `action: ${ action }`
		});
	}
});

12. message box confirm

Trigger Key: elconfirm

this.\$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
	confirmButtonText: '确定',
	cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		return true
	}).catch(() => {
		return false
});

13. notify info

Trigger Key: elntf

this.\$notify.info({ title: '消息', message: '$1' });

14. notify error

Trigger Key: elntfe

this.\$notify.error({ title: '错误', message: '$1' });

15. notify warning

Trigger Key: elntfw

this.\$notify.warning({ title: '警告', message: '$1' });

16. notify success

Trigger Key: elntfs

this.\$notify.success({ title: '成功', message: '$1' });

17. el option empty data structure

Trigger Key: elopt

options: [
	{ label: '', value: '' },
	{ label: '', value: '' },
],

18. 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' }
	]
},

19. el form reset

Trigger Key: elfr

handleFormReset(refName) {
	this.\$refs[refName].resetFields();
},

20. el form validate query

Trigger Key: elfq

handleFormQuery(formName) {
	this.\$refs[formName].validate((valid) => {
		if (valid) {
$1
		}
	});
},

21. base route config object

Trigger Key: bsroute

{
	path: '$1',
	name: '',
	component: ,
	meta: {
		title: '',
		icon: '',
		permission: ''
	}
},