1. Open the json file of a specific language
File (File) -> Preferences (Preferences) -> User Snippets (Configure User Snippets) -> Select the language the snippets should be displayed in. (Use vue as an example below)
Note: macOS: Code (Code) > Preferences (Preferences)
2. Add code segment
"Print to console": code block name;
"prefix": prefix, used to trigger code segment, expand and insert in the text;
"body": code block content;
"description": description;
Official example:
vue.json
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
vue-example
vue.json
{
"vue2 code": {
"prefix": "vue2",
"body": [
"<template>",
"\t<div>",
" ",
"\t</div>",
"</template>",
"<script>",
"export default {",
"\tname:'',",
"\tcomponents: {",
" ",
"\t},",
"\tdata() {",
"\t\treturn {",
" ",
"\t\t}",
"\t},",
"\tcreated() {",
"",
"\t},",
"\tmethods: {",
" ",
"\t},",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
" ",
"</style>"
],
"description": "vue2 basic module"
},
}
3. Set multiple code blocks
to write multiple objects in the json file.
vue.json
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
},
"vue2 code": {
"prefix": "vue2",
"body": [
"<template>",
"\t<div>",
" ",
"\t</div>",
"</template>",
"<script>",
"export default {",
"\tname:'',",
"\tcomponents: {",
" ",
"\t},",
"\tdata() {",
"\t\treturn {",
" ",
"\t\t}",
"\t},",
"\tcreated() {",
"",
"\t},",
"\tmethods: {",
" ",
"\t},",
"}",
"</script>",
"<style lang=\"scss\" scoped>",
" ",
"</style>"
],
"description": "vue2 basic module"
},
}
4. Use code blocks
Where you need to insert code blocks, enter the prefix (vue2) and press Enter.
example