add code snippets fragment vscode

A common code template structure may be provided directly to the General Page snippets, then the next band by the direct shortcuts.

file (File) -> Preferences (Preference) -> User Snippets (consumer segment)

 

 

Third choice, create a new segment of the global file.

 

 

 snippets file

{
  // here placed global segments. Each segment comprises a segment name, a scope, a prefix, a description of the contents and the segment of this fragment. 
  // Value Scope plurality of different field values ​​separated by commas. If the Scope field is omitted or no value, this fragment can be applied to all locales. Prefix is ​​used to trigger a fragment, the fragment is then filled into the contents of the file.
  // General variables $ 1 and $ 2 for setting the position of the tab to which to jump, $ 0 is the final position of the cursor. $ {1: label}, $ {2: another} placeholder for.
// $ 1 is the default cursor in place. Then press the tab key, the cursor will go to the place where the $ 2 to go.
  // Example:
  // "Print to console": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "Vue template": {
    "prefix": "vue",
    "body": [
      "<template>\r  <div class='wrap'>$1</div>\r</template>",
      "<script>\rexport default {\r  data () {\r    return {\r    }\r  }\r}\r</script>",
      "<style lang='scss'>\r</style>"
    ],
 "description": '这个片段是一个vue文件的模板片段'
  }
}
 
设置后,保存这个配置文件。然后在文件里面,输入设置的prefix值,此处为vue,并按下enter键,就会把vue替换成body里面的内容。
替换后如图:

 

 

 

Guess you like

Origin www.cnblogs.com/coconutGirl/p/12328184.html