vscode配置自定义代码片段:让vscode具有和IDEA一样的代码段生成快捷键(sout或psvm)的配置方法为例说明/自定义html代码片段

文章目录

• ​​官方文档​​
• ​​打开配置入口​​

• ​​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."
  }
}

效果