vscode 新建文件,自定义vue代码块
第一步 添加配置,让vscode允许自定义的代码片段提示出来文件 --> 首选项 --> 设置 ---> 添加这2项// 控制代码片段是否与其他建议一起显示及其排列的位置。"editor.snippetSuggestions": "top",// 控制编辑器是否应自动设置粘贴内容的格式。格式化程序必须可用并且能设置文
·
第一步 添加配置,让vscode允许自定义的代码片段提示出来
文件 --> 首选项 --> 设置 ---> 添加这2项
// 控制代码片段是否与其他建议一起显示及其排列的位置。
"editor.snippetSuggestions": "top",
// 控制编辑器是否应自动设置粘贴内容的格式。格式化程序必须可用并且能设置文档中某一范围的格式。
"editor.formatOnPaste": true
第二步 新建代码块模板
文件 --> 首选项 --> 用户代码片段 --> 输入vue,选择vue.json --> 复制 模板, 替换内容 --> 保存之后,重启vscode
> $0 是光标的停止位置,可以根据自己的习惯设置模板。
{
// 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": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class=\"$0\">\n",
" </div>",
"</template>\n",
"<script type=\"text/javascript\">",
"export default {",
" data() {",
" return {\n",
" }",
" },",
" components: {\n",
" }",
"}",
"</script>\n",
"<style lang=\"stylus\" scoped>",
"</style>",
"$2"
],
"description": "Log output to console"
}
}
第三步 测试是否设置成功
新建vue后缀文件,输入vue,出现提示,按下tab键,OK。
大功告成,再也不用每次新建 vue 文件都手写一次模板了。
更多推荐
已为社区贡献3条内容
所有评论(0)