vscode里怎么添加vue代码片段

简介: vscode里怎么添加vue代码片段

第一步

安装 vscode,可以去官网下载安装



第二步

安装拓展插件 veturVue tooling for VS Code.


2021032510222072.png


第三步

找到用户片段:文件---->首选项—>用户片段


20210325102614815.png


第四步

点击新建全局代码片段,然后输入 vue.json

20210325102802950.png


第五步

vue.json.code-snippets 文件里添加下面代码,然后保存

{
  // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  // is left empty or omitted, the snippet gets applied to all languages. 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": {
  //  "scope": "javascript,typescript",
  //  "prefix": "log",
  //  "body": [
  //    "console.log('$1');",
  //    "$2"
  //  ],
  //  "description": "Log output to console"
  // }
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<template>",
      "\t<div class=''>\n\t\t$1\n\t</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "\tdata () {",
      "\t\treturn {",
      "\t\t\t$2",
      "\t\t};",
      "\t},",
    "\tcomponents: {",
      "\t\t$2",
      "\t},",
    "\tcreated() {",
      "\t\t$2",
      "\t},",
      "\tmounted() {",
      "\t\t$2",
      "\t},",
      "\tmethods: {",
      "\t\t$2",
      "\t},",
      "};",
      "</script>",
      "",
      "<style lang='scss' scoped>",
      "",
      "</style>"
    ],
    "description": "vue output to vue-template"
  }
}


第六步

新增一个文件 .vue,然后输入 vue 然后按 tab


22ad161c8f074d4fb923933fff8d9e95.png

目录
相关文章
|
2天前
|
JSON JavaScript 数据格式
vue在vscode代码格式化
vue在vscode代码格式化
10 2
|
1月前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
1002 0
|
14天前
|
JavaScript C++ 应用服务中间件
vs code 搭建 vue 开发环境
vs code 搭建 vue 开发环境
15 4
|
1月前
|
数据采集 Web App开发 JavaScript
vscode跟踪vue代码方法
vscode跟踪vue代码方法
19 0
|
1月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
32 0
|
1月前
|
JSON JavaScript 前端开发
【vscode】 VsCode 代码片段
【vscode】 VsCode 代码片段
18 0
|
1月前
|
JavaScript
VSCode 开发 Vue 语法提示
VSCode 开发 Vue 语法提示
|
1月前
|
JavaScript 前端开发 API
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
vue、vuex、vue-router初学导航配合elementui及vscode快捷键
224 0
|
1月前
|
JSON 数据格式
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
【❤强哥推荐❣】VSCode常用快捷键配置文件表、代码片段,记得收藏
|
1月前
|
JavaScript
设置VSCode快捷键vue生成代码片段
设置VSCode快捷键vue生成代码片段
设置VSCode快捷键vue生成代码片段