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

VScode中添加用户自定义代码片段很简单。

1.在VScode主界面->点击左下角设置图标->点击用户代码片段

2.在弹出的窗口中选择->新建全局代码片段文件(也可选择项目内的代码片段,使用范围不一样而已)

3.输入文件名-回车 (文件名可自定义)

4.这时就会生成并打开对应的配置文件,注释着相关描述和一个示例

参数描述:

scope:此代码段使用的语言名称列表,例如 "typescript,javascript"(非必填)。

prefix:选择代码片段时要使用的前缀。

body:代码片段内容

description:代码片段描述。
 
接下来我们就可以在这个大括号里添加我们需要的代码片段了

5.比如我插入一段js注释代码片段然后保存。

  1. {
  2. // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
  3. // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
  4. // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
  5. // used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  6. // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
  7. // Placeholders with the same ids are connected.
  8. // Example:
  9. // "Print to console": {
  10. // "scope": "javascript,typescript",
  11. // "prefix": "log",
  12. // "body": [
  13. // "console.log('$1');",
  14. // "$2"
  15. // ],
  16. // "description": "Log output to console"
  17. // }
  18. "Print to jsNoteTitle": {
  19. "scope": "",
  20. "prefix": "jsNoteTitle",
  21. "body": [
  22. "/****************",
  23. " *@description:",
  24. " *@author: 小明同学",
  25. " *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
  26. " *@version: V1.0.0",
  27. "*************************************************************************/"
  28. ],
  29. "description": "对应开始标题注释"
  30. },
  31. }

6.在编辑代码时只要输入js就会提示出对应的代码片段,然后回车或者tab就好了~非常的方便哈哈哈~

vue常用模板代码片段

  1. <!-- -->
  2. <template>
  3. <div class=''></div>
  4. </template>
  5.  
  6. <script>
  7. //这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
  8. //例如:import 《组件名称》 from '《组件路径》';
  9.  
  10. export default {
  11. //import引入的组件需要注入到对象中才能使用
  12. components: {},
  13. data() {
  14. //这里存放数据
  15. return {
  16.  
  17. };
  18. },
  19. //监听属性 类似于data概念
  20. computed: {},
  21. //监控data中的数据变化
  22. watch: {},
  23. //方法集合
  24. methods: {
  25.  
  26. },
  27. //生命周期 - 创建完成(可以访问当前this实例)
  28. created() {
  29.  
  30. },
  31. //生命周期 - 挂载完成(可以访问DOM元素)
  32. mounted() {
  33.  
  34. },
  35. beforeCreate() {}, //生命周期 - 创建之前
  36. beforeMount() {}, //生命周期 - 挂载之前
  37. beforeUpdate() {}, //生命周期 - 更新之前
  38. updated() {}, //生命周期 - 更新之后
  39. beforeDestroy() {}, //生命周期 - 销毁之前
  40. destroyed() {}, //生命周期 - 销毁完成
  41. activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
  42. }
  43. </script>
  44. <style lang='scss' scoped>
  45. //@import url(); 引入公共css类
  46.  
  47. </style>

结束:小明是一名前端小白,第一次写博客,也是希望能记录自己的学习过程,和分享一些问题的解决方法,写得不对的地方欢迎大佬们批评指出。让我们一起进步。

参考资料:Snippets in Visual Studio Code (官网有详细的使用描述)

VSCode添加用户代码片段,自定义用户代码片段的更多相关文章

  1. Cordova应用的JavaScript代码和自定义插件代码的调试

    我之前写过三篇Cordova相关的技术文章.当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候. 本文就介绍Cordova应用的调试步骤. 如果 ...

  2. 自定义markdown代码高亮显示-cnblog

    这个代码高亮..一点儿都不高亮...... cnblog里已经有闻道先者贴出代码了, https://www.cnblogs.com/liutongqing/p/7745413.html 效果大概是这 ...

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

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

  4. VS Code项目中共享自定义的代码片段方案

    VS Code项目中共享自定义的代码片段方案 一.问题背景 项目中注释风格不统一,如何统一注释风格 一些第三方组件库名称太长,每次使用都需要找文档,然后复制粘贴 部分组件库有自己的Snippets插件 ...

  5. 自定义sublime代码片段

    sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -&g ...

  6. Phabricator代码审核Audit用户指南

    作者: shaneZhang 分类: 互联网技术 发布时间: 2015-07-04 13:37 概览 Phabricator支持两种代码审查工作流:“review”(提交前审查)和 “audit”(提 ...

  7. 【奔走相告】- Github送福利:用户可免费创建私有代码库啦

    最新消息 PingWest品玩1月8日讯,据TheNextWeb消息,据美国科技媒体The Next Web报道,被微软收购的代码平台GitHub最近调整政策,用户免费创建无限空间私有代码库(priv ...

  8. C# 代码实现设置用户"NETWORK SERVICE"具有对文件夹的读取权限。

    设置用户"NETWORK SERVICE"具有对文件夹的读取权限. 原帖地址: http://www.cnblogs.com/sjhrun2001/archive/2009/03/ ...

  9. JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)

    一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...

随机推荐

  1. Jmeter入门使用

    1. 什么是Jmeter 转自:https://www.cnblogs.com/lijuanhu321/p/9537185.html#testComponent https://www.cnblogs ...

  2. Docker网络模式详解

    一.Docker四种工作模式 安装Docker时,它会自动创建三个网络,bridge(创建容器默认连接到此网络). none .hosthost:容器将不会虚拟出自己的网卡,配置自己的IP等,而是使用 ...

  3. Redis Cluster 分布式集群(下)

    Redis Cluster 搭建(工具) 环境准备 节点 IP 端口 节点① 172.16.1.121 6379,6380 节点② 172.16.1.122 6379,6380 节点③ 172.16. ...

  4. 1054D Changing Array 【位运算+思维】

    题目:戳这里 题意:两个数n,k,满足给的n个数小于2的k次方.每个数可以进行一次操作,即把a[i]换成a[i]^(1<<k-1);求最多的连续区间数使得 区间[L,R] (1<=L ...

  5. IO - 同步,异步,阻塞,非阻塞 (亡羊补牢篇)【转】

    同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别? 详细请看下链接: IO ...

  6. 2017.8.11 think list

    递推式与模数不互质,如何利用中国剩余定理综合答案

  7. 洛谷p1637 三元上升子序列(树状数组

    题目描述 Erwin最近对一种叫"thair"的东西巨感兴趣... 在含有n个整数的序列a1,a2......an中, 三个数被称作"thair"当且仅当i&l ...

  8. Spring(一)概述

    Spring 的前世今生 相信经历过不使用框架开发 Web 项目的 70 后.80 后都会有如此感触,如今的程序员开发项目太轻松 了,基本只需要关心业务如何实现,通用技术问题只需要集成框架便可.早在 ...

  9. SQLite在C#的使用

    SQLite在C#的使用 http://www.cnblogs.com/SharkBin/archive/2012/11/03/2752277.html System.Data.SQLite.DLL的 ...

  10. markdown & git diff

    markdown & git diff "dependencies": { "core-js": "3.6.5", "el ...