VSCode添加用户代码片段,自定义用户代码片段
在使用VScode开发中经常会有一些重复使用的代码块,复制粘贴也很麻烦,这时可以在VScode中添加用户代码片段,输入简写即可快捷输入。
VScode中添加用户自定义代码片段很简单。
1.在VScode主界面->点击左下角设置图标->点击用户代码片段
2.在弹出的窗口中选择->新建全局代码片段文件(也可选择项目内的代码片段,使用范围不一样而已)
3.输入文件名-回车 (文件名可自定义)
4.这时就会生成并打开对应的配置文件,注释着相关描述和一个示例
参数描述:
scope:此代码段使用的语言名称列表,例如 "typescript,javascript"(非必填)。
prefix:选择代码片段时要使用的前缀。
body:代码片段内容
5.比如我插入一段js注释代码片段然后保存。
{
// 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 jsNoteTitle": {
"scope": "",
"prefix": "jsNoteTitle",
"body": [
"/****************",
" *@description:",
" *@author: 小明同学",
" *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
" *@version: V1.0.0",
"*************************************************************************/"
],
"description": "对应开始标题注释"
},
}
6.在编辑代码时只要输入js就会提示出对应的代码片段,然后回车或者tab就好了~非常的方便哈哈哈~
vue常用模板代码片段
<!-- -->
<template>
<div class=''></div>
</template> <script>
//这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等)
//例如:import 《组件名称》 from '《组件路径》'; export default {
//import引入的组件需要注入到对象中才能使用
components: {},
data() {
//这里存放数据
return { };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: { },
//生命周期 - 创建完成(可以访问当前this实例)
created() { },
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() { },
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能,这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类 </style>
结束:小明是一名前端小白,第一次写博客,也是希望能记录自己的学习过程,和分享一些问题的解决方法,写得不对的地方欢迎大佬们批评指出。让我们一起进步。
参考资料:Snippets in Visual Studio Code (官网有详细的使用描述)
VSCode添加用户代码片段,自定义用户代码片段的更多相关文章
- Cordova应用的JavaScript代码和自定义插件代码的调试
我之前写过三篇Cordova相关的技术文章.当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候. 本文就介绍Cordova应用的调试步骤. 如果 ...
- 自定义markdown代码高亮显示-cnblog
这个代码高亮..一点儿都不高亮...... cnblog里已经有闻道先者贴出代码了, https://www.cnblogs.com/liutongqing/p/7745413.html 效果大概是这 ...
- VS code自定义用户代码片段snippet
打开VS code,“文件-首选项-用户代码片段-选择新建全局代码片段文件 “ 属性介绍:prefix 就是你自定义的快捷键 body 就是你自定义的代码片段 description 就是这 ...
- VS Code项目中共享自定义的代码片段方案
VS Code项目中共享自定义的代码片段方案 一.问题背景 项目中注释风格不统一,如何统一注释风格 一些第三方组件库名称太长,每次使用都需要找文档,然后复制粘贴 部分组件库有自己的Snippets插件 ...
- 自定义sublime代码片段
sublime text 已经有一些他们内置的一些代码片段,但是有时候,这些并不能满足我们,这就需要我们自定义一些代码片段. 步骤如下: 1.打开sublime text 2.选择 tools -&g ...
- Phabricator代码审核Audit用户指南
作者: shaneZhang 分类: 互联网技术 发布时间: 2015-07-04 13:37 概览 Phabricator支持两种代码审查工作流:“review”(提交前审查)和 “audit”(提 ...
- 【奔走相告】- Github送福利:用户可免费创建私有代码库啦
最新消息 PingWest品玩1月8日讯,据TheNextWeb消息,据美国科技媒体The Next Web报道,被微软收购的代码平台GitHub最近调整政策,用户免费创建无限空间私有代码库(priv ...
- C# 代码实现设置用户"NETWORK SERVICE"具有对文件夹的读取权限。
设置用户"NETWORK SERVICE"具有对文件夹的读取权限. 原帖地址: http://www.cnblogs.com/sjhrun2001/archive/2009/03/ ...
- JavaWeb实现用户登录注册功能实例代码(基于Servlet+JSP+JavaBean模式)
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
随机推荐
- vlc音视频开发(二)环境搭建(VS篇)
来源:微信公众号「编程学习基地」 目录 简介 VS配置vlc开发环境 下载vlc源码 创建vlc环境 测试vlc代码 运行vlc程序 完成项目文件获取 简介 VLC 是一款自由.开源的跨平台多媒体播放 ...
- Spring Cloud实战: 基于Spring Cloud Gateway + vue-element-admin 实现的RBAC权限管理系统,实现网关对RESTful接口方法权限和自定义Vue指令对按钮权限的细粒度控制
一. 前言 信我的哈,明天过年. 这应该是农历年前的关于开源项目 的最后一篇文章了. 有来商城 是基于 Spring Cloud OAuth2 + Spring Cloud Gateway + JWT ...
- Python 3的f-Strings:增强的字符串格式语法(指南)
最近也在一个视频网站的爬虫,项目已经完成,中间有不少需要总结的经验. 从Python 3.6开始,f-Strings是格式化字符串的一种很棒的新方法.与其他格式化方式相比,它们不仅更具可读性,更简洁且 ...
- js & document.designMode
js & document.designMode js 一键开启页面编辑模式 var mode = document.designMode; document.designMode = val ...
- Swift 5.3
Swift 5.3 https://swift.org/blog/ refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
- Web Components All In One
Web Components All In One Web Components https://www.webcomponents.org/ HTML Template Custom Element ...
- web development all in one
web development all in one https://javascript.xgqfrms.xyz/web-development-all-in-one.html refs https ...
- ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await
ES Next & Arrow function & Promise & Iterator & Generator yield & Async Await co ...
- CSS & SASS & SCSS & less
CSS & SASS & SCSS & less less vs scss https://github.com/vecerek/less2sass/wiki/Less-vs. ...
- Nodejs file path to url path
import * as path from 'path'; import * as url from 'url'; const savePath = path.join('public', 'imag ...