用久了vscode,对于一些常用的代码我们总是希望可以快捷的完成,所以我们今天就来自定义一些常用的代码吧;
首先我们在 File --Preference–keyborder shortcut
中可以看到我们常用的快捷键,当然我们也可以自己去定义一些自己用着顺手的代码;
在File-Preference–snippets中
prefix :代码片段名字,即输入此名字就可以调用代码片段。
body :这个是代码段的主体.需要编写的代码放在这里,
$1 :生成代码后光标的初始位置.
$2 :生成代码后光标的第二个位置,按tab键可进行快速切换,还可以有$3,$4,$5.....
${1,字符} :生成代码后光标的初始位置(其中1表示光标开始的序号,
字符表示生成代码后光标会直接选中字符。)
description :代码段描述,输入名字后编辑器显示的提示信息。
示例如图:
代码片段转化网站: 网站工具
常用的代码片段:
1.Vue template
"vue template":{
"prefix": "vue template",
"body": [
"<template>",
"\t<div class='container'>",
"",
"\t</div>",
"</template>",
"",
"<script>",
"export default {",
"\tcomponents: {",
"",
"\t},",
"\tcomputed: {",
"",
"\t},",
"\tdata() {",
"\t\treturn{",
"",
"\t\t}",
"\t},",
"\twatch: {",
"",
"\t},",
"\tmethods: {",
"",
"\t},",
"\tmounted() {",
"",
"\t},",
"\tprops: {",
"",
"\t},",
"\tdestroyed() {",
"",
"\t},",
"}",
"</script>",
"",
"<style lang='scss' scoped>",
"",
"</style>",
"$0"
],
"description": "create a vue template"
}
2.ajax
{
"ajax": {
"prefix": "ajax",
"body": [
"$.ajax({",
" url: '$1',",
" method: '${2:POST}',",
" datatype: 'json',",
" success: data => {",
" $3;",
" },",
" error: err => {",
" $4;",
" }",
"})"
],
"description": "ajax模块"
}
}
写在最后;当然适合自己的才是最好的