vscode 配置自定义代码片段:让 vscode 和 IDEA 拥有相同的代码片段生成快捷方式(sout 或 psvm)配置方法作为示例说明/自定义 HTML 代码片段
最编程
2024-03-31 13:57:11
...
文章目录
- 官方文档
- 打开配置入口
- ctrl+shift+p配置
- 配置基本原理
- java.json (实例1)
- sout/psvm配置样例
- 效果(注意不要太着急enter/tab,不然vscode还没反应过来)
- html 片段实例
- 效果
官方文档
优先查阅文档
包含更多的信息
打开配置入口
ctrl+shift+p配置
输入preferences:configure user Snippets
(或者只输入snippet
)
配置基本原理
事实上几乎所有语言的snippet套路是一样的,都是将设计好的代码模板(初步设计的代码可能就是可以运行的一段代码片段)
将其中的每一行用引号包围起来(如果语句本身含有引号,那么请使用反斜杠来转转义它),这些被包装成字符串的语句(乃至符号/空行)都将分别作为json中的body:属性的值(数组值)中的一个元素
java.json (实例1)
再输入java,点击确认,编辑java.json
- 也可以直接按路径找到java.json
- 根据文件中的注释内容给出的json说明,可以自行配置
sout/psvm配置样例
将Java.json
里面的内容用如下代码覆盖(比如:添加sout,psvm的补全效果)
{
// Place your snippets for java here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"main 代码段": {
"prefix": "psvm",
"body": [
"public static void main(String[] args){",
"\t$1",
"}"
],
"description": "main代码段"
},
"print": {
"prefix": "sout",
"body": [
"System.out.println(\"$1\");"
// "${1:}",
// ")"
],
"description": "System.out.println"
}
}
具体的代码为:(可以不必深究)
"main 代码段": {
"prefix": "psvm",
"body": [
"public static void main(String[] args){",
"\t$1",
"}"
],
"description": "main代码段"
},
"print": {
"prefix": "sout",
"body": [
"System.out.println(\"$1\");"
// "${1:}",
// ")"
],
"description": "System.out.println"
}
效果(注意不要太着急enter/tab,不然vscode还没反应过来)
html 片段实例
{
// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
//there ,the `print to console" will be the tip shows on the suggestion list
// the prefix field there:`log` is the trigger to introduce and insert the code snippet.
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"vue html snippet": {
"prefix": "vueHtml",
"body": [
"<!-- import vue cdn: -->",
"<script src=\"https://unpkg.com/vue@next\"></script>",
"<div id=\"app\">",
"<!-- write your vue tags or common html tages there: -->",
"</div>",
"<!-- write your js code: -->",
"<script>",
"\tVue.createApp({",
/* define your variables (which will be bind to tags properties there:) */
"\tdata(\t){",
"\t\t$1",
"\t\t/* separate your variables by comma:`,` */ ",
"\t\t$2 ",
"\t},",
/* write your methods there:(including callbacks and so on) */
"\tmethods:{",
"\t\t$3",
"\t\t/* separate your variables by comma:`,` */ ",
"\t\t$4",
"\t}",
"}).mount(\"#app\")",
"\t</script>",
/* */
],
"description": "insert the vue basic template."
}
}