欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vs Code Vue、Html模板生成(设置用户片段)

程序员文章站 2022-07-05 20:01:19
...

一、目的

使用Vscode编辑器,创建文件很是常见,使用模板文件可以提高效率。下面以创建Vue模板文件为例。并附上Html配置的代码

二、使用步骤

1.打开VsCode—首选项—用户片段。

Vs Code Vue、Html模板生成(设置用户片段)

2.搜索Vue—打开Vue.json文件并添加以下代码

Vs Code Vue、Html模板生成(设置用户片段)
Vs Code Vue、Html模板生成(设置用户片段)

Vue.json代码如下:

{
	"Print to console": {        
		"prefix": "vue",
		"body": [
			"<template>", 
			"  <div class='$1'></div>",
			"</template>", 
			"",
			"<script>",
			"export default {",
			"  name: '$1',", 
			"  data () {",
			"    return {}", 
			"  },",
			"  components: {},", 
			"  created () {},", 
			"  mounted () {},",
			"  methods: {}", 
			"}", 
			"</script>",
			"<style lang='stylus' scoped>",
			"</style>",
			""
		],
		"description": "Vue template"    }}

Html模板文件的代码如下。

{
	"Print to console": {
	"prefix": "html",
	"body": [
		"<!DOCTYPE html>",
		"  <html>",
		"    <head>",
		"      <meta charset='utf-8'>",
		"    <title></title>",
		"    </head>",
		"    <body>",
		"    </body>",
		"  </html>"
	],
	"description": "html  template"  }
}

三、测试效果

  1. 输入vue并敲击Enter,文件中自动生成模板代码。如下图所示。
    Vs Code Vue、Html模板生成(设置用户片段)
  2. 成功界面如下:
    Vs Code Vue、Html模板生成(设置用户片段)

加油撒!!!