vscode自定义代码段

提高开发效率,这些你必须要会

注意:创建哪种语言的代码片段就进相应语言的代码片段区域,写js代码段就不要把代码段写在了php的代码段编写区

JavaScript代码段

1
2
3
4
5
6
7
8
9
{  
"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"
},
}

效果:

image

vue代码段

1
2
3
4
5
6
7
8
9
{  
"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文件的初始代码段"
},
}

效果:

image

还有一种更为直观的写法,更容易书写:

双引号需要在前面加上 \ 进行转义

1
2
3
4
5
6
7
8
9
10
11
12
"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"
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"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"
},