{
// Place your snippets for vue 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里面的代码段了
"body": ["console.log('$1');", "$2"],
"description": "Log output to console" // 代码段详细的描述信息
},
"Print to Vue.js template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"$1\">$2</div>", // \是为了转义双引号，光标默认停留在$1的位置，然后输出tab键进入$2位置，依次类推，找不到$之后就直接跳到行尾
"</template>",
"",
"<script>",
"export default {",
" name: '',",
" components: {},",
" props: {},",
" data () {",
" return {}",
" },",
" computed: {},",
" watch: {},",
" created () {},",
" mounted () {},",
" methods: {}",
"}",
"</script>",
"",
"<style scoped lang=\"less\"></style>",
""
],
"description": "generator vue template"
}
}
{
// Place your snippets for javascript 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"
},
"watch param immediate": {
"prefix": "im",
"body": "immediate: true"
},
"eslint disable": {
"prefix": "esd",
"body": "eslint-disable"
},
"eslint disable line": {
"prefix": "esdl",
"body": "eslint-disable-line"
},
"eslint disable next": {
"prefix": "esdn",
"body": "eslint-disable-next-line"
},
"console.log a variable": {
"prefix": "cv",
"body": "console.log('${0}:', ${0})"
},
"console.dir": {
"prefix": "cd",
"body": ["console.dir($1);"],
"description": "Code snippet for \"console.dir\""
},
"console.error": {
"prefix": "ce",
"body": ["console.error($1);"],
"description": "Code snippet for \"console.error\""
},
"console.info": {
"prefix": "ci",
"body": ["console.info($1);"],
"description": "Code snippet for \"console.info\""
},
"console.log": {
"prefix": "cl",
"body": ["console.log($1);"],
"description": "Code snippet for \"console.log\""
},
"console.warn": {
"prefix": "cw",
"body": ["console.warn($1);"],
"description": "Code snippet for \"console.warn\""
},
"debugger": {
"prefix": "de",
"body": ["debugger$1"],
"description": "Code snippet for \"debugger\""
},
"promise": {
"prefix": "prom",
"body": "return new Promise((resolve, reject) => {\n\t${1}\n});",
"description": "Creates and returns a new Promise in the standard ES6 syntax"
},
"thenCatch": {
"prefix": "thenc",
"body": ".then((${1:result}) => {\n\t${2}\n}).catch((${3:err}) => {\n\t${4}\n});",
"description": "Add the .then and .catch methods to handle promises"
},
"try/catch": {
"prefix": "tc",
"body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n}"
},
"try/catch/finally": {
"prefix": "tcf",
"body": "try {\n\t${0}\n} catch (${1:err}) {\n\t\n} finally {\n\t\n}"
},
"throw new Error": {
"prefix": "tn",
"body": "throw new ${0:error}"
},
"class": {
"prefix": "cla",
"body": "class ${1:name} {\n\tconstructor (${2:arguments}) {\n\t\t${0}\n\t}\n}"
},
"constructor": {
"prefix": "con",
"body": "constructor(${1:params}) {\n\t${0}\n}",
"description": "Add default constructor in a class in ES6 syntax"
},
"key/valuePair": {
"prefix": "kv",
"body": "${1:key}: ${2:'value'}",
"description": "key/value pair"
},
"forLoop": {
"prefix": "forl",
"body": "for (let ${1:i} = 0; ${1:i} < ${2:iterable}${3:.length}; ${1:i}++) {\n ${4}\n}",
"description": "for loop"
},
"forInLoop": {
"prefix": "fori",
"body": "for (let ${1:key} in ${2:source}) {\n if (${2:source}.hasOwnProperty(${1:key})) {\n ${3}\n }\n}",
"description": "for in loop"
},
"forOfLoop": {
"prefix": "foro",
"body": "for (let ${1:key} of ${2:source}) {\n ${3}\n}",
"description": "for of loop"
},
"ifStatement": {
"prefix": "if",
"body": "if (${1:condition}) {\n ${2}\n}",
"description": "if statement"
},
"elseStatement": {
"prefix": "el",
"body": "else {\n ${1}\n}",
"description": "else statement"
},
"if/elseStatement": {
"prefix": "ife",
"body": "if (${1:condition}) {\n ${2}\n} else {\n ${3}\n}",
"description": "if/else statement"
},
"elseIfStatement": {
"prefix": "ei",
"body": "else if (${1:condition}) {\n ${2}\n}",
"description": "else if statement"
},
"methods": {
"prefix": "me",
"body": "${1:methods}: {\n\t${0}\n},"
},
"watch value change": {
"prefix": "watch:value",
"body": [
"watch: { ",
" value: { ",
" immediate: true, ",
" handler() { ",
"",
" }",
" }",
"}, "
],
"description": ""
},
"named function": {
"prefix": "fn",
"body": "function ${1:name} (${2:arguments}) {\n\t${0}\n}"
},
"async function": {
"prefix": "afn",
"body": "async function (${1:arguments}) {\n\t${0}\n}"
},
"async arrow function": {
"prefix": "aafn",
"body": "async (${1:arguments}) => {\n\t${0}\n}"
},
"immediately-invoked function expression": {
"prefix": "iife",
"body": ";(function (${1:arguments}) {\n\t${0}\n})(${2})"
},
"async immediately-invoked function expression": {
"prefix": "aiife",
"body": ";(async (${1:arguments}) => {\n\t${0}\n})(${2})"
}
}
vue.json
{
// Place your snippets for vue 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里面的代码段了
"body": ["console.log('$1');", "$2"],
"description": "Log output to console" // 代码段详细的描述信息
},
"Print to Vue.js template": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"$1\">$2</div>", // \是为了转义双引号，光标默认停留在$1的位置，然后输出tab键进入$2位置，依次类推，找不到$之后就直接跳到行尾
"</template>",
"",
"<script>",
"export default {",
" name: '',",
" components: {},",
" props: {},",
" data() {",
" return {}",
" },",
" computed: {},",
" watch: {},",
" created() {},",
" mounted() {},",
" methods: {}",
"}",
"</script>",
"",
"<style scoped lang=\"scss\">\n\n</style>",
""
],
"description": "generator vue template"
},
"vue3 template": {
"prefix": "vue3",
"body": [
"<template>",
" <div class=\"$1\"></div>",
"</template>",
"",
"<script setup>\n\n</script>",
"",
"<style lang=\"scss\" scoped>\n\n</style>"
],
"description": "vue3 template"
}
}
目录
Setting.json
Plugins
<a>将自动补全</a><a>为<b>，将自动修改结尾标签</a>为</b>All List
Keybindings.json
快捷命令
外观：
General
全局：
文件
fold 快捷命令：
光标：
\编辑：
主题与字体
跳转到定义
jsconfig.json
以 vue 项目为例，在项目根目录新建
jsconfig.json：tsconfig.json
以 vue + ts 项目为例，在项目根目录新建
tsconfig.json：vscode 配置 vue 代码片段
在 vscode 中使用 ctrl+shift+p 打开一个选项窗口，然后找到配置用户代码片段，点击进去，输入 vue.json 找到对应的配置文件点击进去，然后粘贴下面配置替换即可。
这个时候你在.vue 的文件中输入 vue 就会生成出下面的代码模版。
具体定制代码段的方法如下。
进入https://snippet-generator.app/这个网站，然后将你要生成代码块的代码片段丢到左侧位置，右侧会自动生成出对应的 vscode 的代码段，当然你也可以点击右侧上面的 tab 栏切换不同编辑器下的代码块，这里以 vscode 为例，将右侧的代码块复制粘贴到 vue.json 配置文件中，配置对应的代码前缀名称即可。
javascript.json
vue.json
参考