用vscode做开发时,平时所用的代码段比较简洁,为了提高开发效率,我们需要自定义我们用着习惯方便的代码段,这里只是以js,vue为例。
相信大家一看就明白,至于代码段在哪里编写,在这我就不多说了,大家都明白。
我们就可以自定义开发中常用的代码段,节省时间,大大提高开发效率。
(注意:创建哪种语言的代码片段就进相应语言的代码片段区域,写js代码段就不要把代码段写在了php的代码段编写区)
\r\n:代表换行,填写几个代表换几行,
\t:tab数,有几个代表有几个tab
代码片段
js代码段:
{
"Print to vue": {
"prefix":"vue",
"body": [
"new Vue({\r\n\tel:'#app',\r\n\tdata:{\r\n\t\t$2\r\n\t},\r\n})",
],
"description":"script中的vue"
},
}
效果:
vue代码段:
{
"Print to vue": {
"prefix": "vue",
"body": [
"<template>\r\n\t$1\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\t\t\t\t\r\n\t\t\t}\r\n\t\t},\r\n\t}\r\n</script>\r\n\r\n<style scoped>\r\n\t$3\r\n</style>"
],
"description": "vue文件的初始代码段"
},
}
效果:
还有一种更为直观的写法,更容易书写:
双引号需要在前面加上 \ 进行转义
"Print to js": {
"prefix": "js",
"body": [
"<script src=\"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js\"></script>",
"<script>",
"\t$(function() {",
"\t\t$1",
"\t})",
"</script>"
],
"description": "Log output to js"
},
"Print to jsvue": {
"prefix": "jsvue",
"body": [
"<div id=\"app\"></div>",
"<script src=\"https://cdn.bootcss.com/vue/2.5.16/vue.min.js\"></script>",
"<script>",
"\tnew Vue({",
"\t\tel: 'app',",
"\t\tdata: {",
"\t\t\t$1",
"\t\t}",
"\t})",
"</script>"
],
"description": "Log output to jsvue"
},
这两种写法,推荐第二种,易写,易读,更为直观,不管哪种能提高效率就行