• 如何设置?
  • 选择或创建
  • 配置代码
  • 如何使用?

一、如何设置?

进入vs code主界面-->使用快捷键“ctrl + shift + p”:

如果你是使用Preferences:Configure User Snippets或者之前的记录被清除的话,这个选项不会出现在第一行,这时候你可以在搜索栏输入:Configure User Snippets,然后就可以找到这个选项了。

二、选择或创建vue.json

进入Configure User Snippets后会看到下面这个界面:

根上面的情况一样,第一次进入不会出现在第一行,这时候在搜索栏输入:vue.json,然后点击进入编辑,这个环节是如果原来有vue.json文件的话就会打开原来的文件,如果没有的话点击“vue.json”就会创建这个文件并进入到编辑界面:

三、配置代码

  1. "Print to console": {
  2. "prefix": "vue:5",
  3. "body": [
  4. "<template>",
  5. "",
  6. "",
  7. "</template>",
  8. "",
  9. "<script>",
  10. "export default {",
  11. "",
  12. "}",
  13. "</script>",
  14. "",
  15. "<style scoped>",
  16. "",
  17. "</style>"
  18. ],
  19. "description": "Log output to console"
  20. }

四、如何使用?

在vue文件中输入:vue:5 ,然后按下Tab键就可以自动生成vue文件的代码结构了。

生成的代码结构长这样:

  1. <template>
  2.  
  3. </template>
  4.  
  5. <script>
  6. export default {
  7.  
  8. }
  9. </script>
  10.  
  11. <style scoped>
  12.  
  13. </style>

以上就是vue代码片段的vs code的配置方法的全部过程了。

vue进阶:vs code添加vue代码片段的更多相关文章

  1. VSCode添加用户代码片段,自定义用户代码片段

    在使用VScode开发中经常会有一些重复使用的代码块,复制粘贴也很麻烦,这时可以在VScode中添加用户代码片段,输入简写即可快捷输入. VScode中添加用户自定义代码片段很简单. 1.在VScod ...

  2. Sublime Text3—Code Snippets(自定义代码片段)

    摘要 程序员总是会不断的重复写一些简单的代码片段,为了提高编码效率,我们可以把经常用到的代码保存起来再调用. 平时用sublime安装各种插件,使用Tab键快速补全,便是snippets(可译为代码片 ...

  3. vue进阶:vue-router(vue路由)的安装与基本使用

    vue路由安装与基本使用 vue嵌套路由 vue动态路由(路由组件传参) vue路由重定向和一些其他的路由相关 官方手册:https://router.vuejs.org/zh/ 一.vue路由安装与 ...

  4. Visual Studio Code 添加设置代码段(snippet)

    从VSCode发布以来就在关注,最近已经更新到版本0.10.8,已经支持了插件功能.日常使用编辑器已经由Sublime Text迁移到了VSCode.使用中遇到了这个问题,在网上也没搜到解决方案.记录 ...

  5. VS code自定义用户代码片段snippet

    打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix   就是你自定义的快捷键 body    就是你自定义的代码片段 description 就是这 ...

  6. 利用 share code 插件同步代码片段

    利用 Settings Sync可以同步 VS code 配置,但它只能同步插件,利用  Settings Sync 再配合 share code 插件可以同步自定义代码片段,可以把 VS code ...

  7. visual studio 的 code snippet(代码片段)

    visual studio自带代码片段,用了6年visual studio才知道有这么个玩意……惭愧 最简单例子 for循环,for,连点两下tab……自己研究吧

  8. Xcode的代码片段快捷方式-Code Snippet Library(代码片段库)

    最近换了新电脑,装上Xcode敲代码发现很多以前攒的Code Snippet忘记备份了,总结了一下Code Snippet的设置方法,且行且添加,慢慢积累吧. 如下图:   Title - Code ...

  9. 教你用VS code 生成vue-cli代码片段

    可以自定义设置名字:name.json { "Print to console": { "prefix": "vue", "bod ...

随机推荐

  1. 前端知识点回顾——HTML,CSS篇

    前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...

  2. ssy-publish

    github地址: https://github.com/shangyueyue/ssy-publish 一.安装 npm install ssy-publish -D 二.在process.cwd( ...

  3. 从数组中找出所有组合为s的数

    java版本 package numCombine; /** * 从数组中找出所有组合为s的数 * @author root * */ public class NumComberAll { publ ...

  4. 在matlab中读取trc文件

    用matlab的load()函数 1.相对路径读法(将文件放入'MATLAB\bin'目录): a = load('aizhenjiang_g10.trc') 2.绝对路径读法(任何位置) a = f ...

  5. React Native中Navigator的安装与使用

    一.安装Navigator 1.安装react-native-deprecated-custom-components npm install react-native-deprecated-cust ...

  6. #dokcer部署code-server web版vscode+golang

    codercom/code-server:latest不支持插件在线安装 codercom/code-server:v2目前为最新版1. #创建 docker rm -f vscode docker ...

  7. 字符串写入到json文件

    背景: PHP产生公告 ,发送到CGI ,在CGI把该公告的json 字符串写入到文件内(转义后的字符串) 通过 jsoncpp 操作 int write_notice_to_json(string ...

  8. Mybatis 属性配置

    properties  定义配置,配置的属性可以在整个配置文件中的其他位置进行引用 <properties resource="db.properties"></ ...

  9. 27.IP承载网容量仿真

    接入,汇聚,核心 参考资料: 学堂在线,移动通信技术(2019秋)https://next.xuetangx.com/learn/SZIIT61031001367/SZIIT61031001367/1 ...

  10. eclipse控制台界面乱码问题

    一.首先,eclipse的控制台必须用GBK编码,必须满足以下两个条件: 1.Windows---->Preferences---->Workspace---->Text file ...