VS Code中如何自定义代码片段

最新推荐文章于 2024-04-23 00:58:44 发布

Xie_bro777

最新推荐文章于 2024-04-23 00:58:44 发布

阅读量267

点赞数 2

分类专栏：前端文章标签： html vue

本文链接：https://blog.csdn.net/xxxxxxxx00772299/article/details/108616372

版权

前端专栏收录该内容

34 篇文章 1 订阅

订阅专栏

VS Code中如何自定义代码片段

1.为了避免在学习vuejs的过程中重复写框架，所以我们先写好一个模版，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>模版</title>
  
  <!-- 此处需替换为自己的vue.js文件路径，为了方便学习，引用了bootcdn -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  
</head>
<body>

  <!-- html部分 -->
  <div id="app">
    {{message}}
  </div>
  
  <!-- js脚本 -->
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "hello!"
      },
    })
  </script>
  
</body>
</html>

2.然后打开 File-> Preference->User Snippets 出现选项。
汉化后的打开顺序：文件->首选项->用户代码片段
注：如果第一次进行操作，可能没有后缀.json，请选择html，不是vue-html。
在这里插入图片描述
3.在html.json中进行编写模版，在编写的过程中要注意，如果模版本身有引号，需要在引号的前面加上 **反斜线 \ **

{
	"vue":{
		"prefix": "vue", 
		"body": [
			"<!DOCTYPE html>"
			"<html lang=\"en\">"
			"<head>"
			"	<meta charset=\"UTF-8\">"
			"	<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"
			"	<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">"
			"	<title>模版</title>"
			""
			"	<!-- 此处需替换为自己的vue.js文件路径，为了方便学习，引用了bootcdn -->"
			"	<script src=\"https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js\"></script>"
			""
			"</head>"
			"<body>"
			""
			"	<!-- html部分 -->"
			"	<div id=\"app\">"
			"		{{message}}"
			"	</div>"
			""	
			"	<!-- js脚本 -->"
			"	<script>"
			"		const app = new Vue({"
			"			el: \"#app\","
			"			data: {"
			"				message: \"hello!\""
			"			},"
			"		})"
			"	</script>"
			""	
			"</body>"
			"</html>"
		],
		"description":"vue components"
	},
}

4.这样就设置完了，再需要写一样的模板的时候只需输vue，直接table，或选择如下图所示：
在这里插入图片描述

好了，今天的分享就结束了，每天一个小技巧，每天进步一点点！！！

Xie_bro777

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
VS Code中如何自定义代码片段

VS Code中如何自定义代码片段 1.为了避免在学习vuejs的过程中重复写框架，所以我们先写好一个模版，如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-
复制链接

扫一扫