Vs Code Vue、Html模板生成（设置用户片段）

最新推荐文章于 2024-02-22 14:20:26 发布

清啊清小青

最新推荐文章于 2024-02-22 14:20:26 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qingqing77520/article/details/109094292

版权

Vscode Vue模板 HTML模板代码片段编辑器配置

关键词由CSDN通过智能技术生成

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、目的

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

二、使用步骤

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

在这里插入图片描述

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

在这里插入图片描述

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"  }
}

三、测试效果

输入vue并敲击Enter，文件中自动生成模板代码。如下图所示。
成功界面如下：

加油撒！！！

清啊清小青

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vs Code Vue、Html模板生成（设置用户片段）

一、目的？使用Vscode编辑器，创建文件很是常见，使用模板文件可以提高效率。下面以创建Vue模板文件为例。并附上Html配置的代码二、使用步骤1.打开VsCode–>首选项–>用户片段。2.搜索Vue–>打开Vue.json文件并添加以下代码Vue.json代码如下：{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div c
复制链接

扫一扫

专栏目录