关键词:
VSCode中有一些自带的自动代码,比如输入!然后Tab或者Enter会自动创建html代码
那么如何像这样很方便地创建自定义的自动代码段呢,本文以新建Vue实例代码段为例进行介绍。
1. 按F1,然后输入snippets
2. 选择编辑现有的全局代码片段,也可以新建全局代码片段
3. 输入命名,然后就会打开或者新建该自定义.code-snippets代码设置文件,可以直接复制粘贴
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and $1:label, $2:another for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console":
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
//
"New a html with vue":
"prefix": "vh", //输入的提示关键词
"body": [ //引用的代码段,每一行是一个字符串,用逗号隔开
"<!DOCTYPE html>",
"<html lang=\\"en\\">",
"<head>",
"\\t<meta charset=\\"UTF-8\\">",
"\\t<meta http-equiv=\\"X-UA-Compatible\\" content=\\"IE=edge\\">",
"\\t<meta name=\\"viewport\\" content=\\"width=device-width, initial-scale=1.0\\">",
"\\t<title>Document</title>",
"\\t<script src=\\"./lib/vue.js\\"></script>",
"</head>",
"",
"<body>",
"\\t<div id=\\"app\\"></div>",
"\\t",
"\\t<script>",
"\\t\\t//创建Vue实例,得到ViewModel",
"\\t\\tvar vm = new Vue(",
"\\t\\t\\tel: \\"#app\\",",
"\\t\\t\\tdata: ,",
"\\t\\t\\tmethods: ",
"\\t\\t);",
"\\t</script>",
"\\t",
"</body>",
"",
"</html>"
],
"description": "New a html with vue"
- prefix:这个参数是使用代码段的快捷入口,比如这里的ifmain在使用时输入ifmain会有智能感知
- body:这个是代码段的主体.需要设置的代码放在这里,字符串间换行的话使用\\r\\n换行符隔开.注意如果值里包含特殊字符需要进行转义,多行语句的以,隔开
- $1:这个为光标的所在位置.
- $2:使用这个参数后会光标的下一位置将会另起一行,按tab键可进行快速切换,还可以有$3,$4,$5…
- description:代码段描述,在使用智能感知时的描述
body中的 <script src="./lib/vue.js"></script>
是本地vue的文件路径,可以修改为自己相应的本地路径或者url
prefix中的快捷入口为vh,这样在新建html文件后输入vh然后Enter就可以直接新建一个带有Vue实例html代码,如下所示:
可以根据需要修改相应.code-snippets文件,不用每次从头写了。
使用vscode,新建.vue文件,tab(enter)自动生成vue代码模板(代码片段)
...制第三步中的模板内容中内容保存第二步:添加配置,让vscode允许自定义的代码片段提示出来文件-->首选项-->设置--->添加这2项//Specifiesthelocationofsnippetsinthesuggestionwidget"editor.snippetSuggestions":"top",//Controlswhetherformatonpasteisonoroff... 查看详情
vscode自定义代码片段11——vue路由的配置(代码片段)
...由的配置 //v'router //11如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //vue的路由 "Printtoconsole": "pref... 查看详情
vscode自定义代码片段2——.vue文件的模板(代码片段)
.vue文件的模板 //v' //2如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //.vue文件的模板 "Printtoconsole": ... 查看详情
vscode自定义代码片段13——vue的状态大管家(代码片段)
...状态大管家 //V'Vuex //13如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的状态大管家 "Printtoconsole": ... 查看详情
vscode自定义代码片段13——vue的状态大管家(代码片段)
...状态大管家 //V'Vuex //13如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的状态大管家 "Printtoconsole": ... 查看详情
vscode自定义代码片段13——vue的状态大管家(代码片段)
...状态大管家 //V'Vuex //13如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的状态大管家 "Printtoconsole": ... 查看详情
vscode配置用户自定义代码片段自定义自动代码补充(代码片段)
...中使用sout自动补充System.out.println("")等,但是在VSCode中需要自己配置2配置方法设置方式|-文件|-首选项 |-配置用户代码片段 |-在命令行栏选择相应的语言模板 "Printtoconsole": "prefix":"main", "body":[ ... 查看详情
vscode自定义代码片段14——vue的axios网络请求封装(代码片段)
...络请求封装 //V'axios //14如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的axios网络请求封装 "Printtoconso... 查看详情
vscode自定义代码片段14——vue的axios网络请求封装(代码片段)
...络请求封装 //V'axios //14如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //Vue的axios网络请求封装 "Printtoconso... 查看详情
vscode自定义代码片段11——vue路由的配置(代码片段)
...由的配置 //v'router //11如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //vue的路由 "Printtoconsole": "pref... 查看详情
vscode自定义代码片段1——vue主模板(代码片段)
VSCode自定义代码片段(vue主模板) //vue //1,自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //vue主模板 "Printtoconsole": "prefix":"vue"... 查看详情
VSCode 自定义代码格式和语言自动缩进(Django-Template 缩进)
】VSCode自定义代码格式和语言自动缩进(Django-Template缩进)【英文标题】:VSCodecustomcodeformattingandautoindentionforlanguage(Django-Templateindention)【发布时间】:2021-03-2622:32:08【问题描述】:我进行了大量搜索以找到创建或覆盖现有的vscod... 查看详情
vscode新建vue生产vue的模版
vscode新建vue文件后,生成vue的模版点击设置,选择用户代码段,输入vue回车,生成vue.json的全局配置然后配置模版就可以//Placeyoursnippetsforvuehere.Eachsnippetisdefinedunderasnippet 查看详情
vscode怎么自定义html模版
目标:新建html快捷键解说:当我们想在VSCode中新建html代码时,可以输入vh然后回车或者Tab即可自动生成一个html文件模板步骤:1.点击设置-----用户代码片段----搜索html,出现html.json文件,点击即可;2.{"h5template":{"prefix":"vh","body":["... 查看详情
vscode自定义vuesnippets,快速生成vue模板(代码片段)
命令行Ctrl+Shift+P#选择ConfigureUserSnippets#选择Vue.json原始的Vue.json //Placeyoursnippetsforvuehere.Eachsnippetisdefinedunderasnippetnameandhasaprefix,bodyand //description.Theprefixiswhatisusedtotriggerthes 查看详情
vscode自定义用户代码片段snippet
打开VScode,“文件-首选项-用户代码片段-选择新建全局代码片段文件“ 属性介绍:prefix 就是你自定义的快捷键 body 就是你自定义的代码片段 description就是这段代码的注... 查看详情
vscode编辑器如何自定义代码片段(代码片段)
本文以Vue为例第一步:点击设置-》用户代码片段第二步:找到vue.json第三步:在该文件中输入如下内容即可"vue": "prefix":"vue", "body":[ "<!---->", "<template>", 查看详情
vscode自定义代码片段3——url大全(代码片段)
url大全 //url' //3如何自定义用户代码片段:VSCode=》左下角设置=》用户代码片段=》新建全局代码片段文件...=》自定义片段名称=》编辑用户片段=》ctrl+S保存 //url大全 "Printtoconsole": "prefix":... 查看详情