You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{
// 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
All List
Keybindings.json
快捷命令
外观：
General
全局：
文件
fold 快捷命令：
光标：
\编辑：
相关资源
跳转到定义
jsconfig.json
以 vue 项目为例，在项目根目录新建
jsconfig.json：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"], "core/*": ["./src/core/*"], "shared/*": ["./src/shared/*"], "compiler/*": ["./src/compiler/*"], "sfc/*": ["./src/sfc/*"], "server/*": ["./src/server/*"] }, "target": "ES6", "module": "es6", "allowSyntheticDefaultImports": true }, "include": ["src/**/*", "test/**/*"], "exclude": ["node_modules"] }tsconfig.json
以 vue + ts 项目为例，在项目根目录新建
tsconfig.json：{ "compilerOptions": { "baseUrl": ".", "moduleResolution": "node", "strict": true, "jsx": "preserve", "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strictPropertyInitialization": false, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "allowJs": true, "paths": { "@/*": ["src/*"] } }, "include": [ "types/**/.d.ts", "types/**/*.ts", "src/**/*.d.ts", "src/**/*.vue", "src/**/*.ts", "src/**/*.js" ], "exclude": ["node_modules", "dist"] }vscode 配置 vue 代码片段
在 vscode 中使用 ctrl+shift+p 打开一个选项窗口，然后找到配置用户代码片段，点击进去，输入 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=\"less\"></style>", "" ], "description": "generator vue template" } }这个时候你在.vue 的文件中输入 vue 就会生成出下面的代码模版。
具体定制代码段的方法如下。
进入https://snippet-generator.app/这个网站，然后将你要生成代码块的代码片段丢到左侧位置，右侧会自动生成出对应的 vscode 的代码段，当然你也可以点击右侧上面的 tab 栏切换不同编辑器下的代码块，这里以 vscode 为例，将右侧的代码块复制粘贴到 vue.json 配置文件中，配置对应的代码前缀名称即可。
javascript.json
{ // 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" } }参考
The text was updated successfully, but these errors were encountered: