创建自己的Code Snippets在VSCode中

创建Vuejs文件模板代码片段

1. Go to Code → Preferences → User Snippets

2.弹出提示框,选择一个vue代码高亮插件,比如vue.js

3.VSCode会创建一个vue.json,开始自定义

*vue.json*

{

"New File":{

"prefix":"template",

"body":[

"",

"\t

"",

"",

"

"\texport default {",

"\t\tname: '${name}'",

"\t}",

"",

"",

"

"\t.${name} {",

"",

"\t}",

""

]

}

}

使用效果:

创建px2rem sass转换函数snippets

1. Go to Code → Preferences → User Snippets

2. 选择新建全局snippets file

3. VSCode会生成./vscode/px2rem.code-snippets,开始自定义:

{

// Place your giftmall_app workspace 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"

// }

"px2rem":{

"scope":"javascript,typescript,scss",

"prefix":"prm",

"body":[

"pxToRem($1)"

],

"description":"px to rem"

}

}

4.在中输入prm,就可以看到补全提示prm->px2rem(参数值)

这里只是一个简单介绍,可以在平时工作中,去多多实践,减少一些无意义的体力活。

snippets vscode 配置_创建自己的Code Snippets在VSCode中相关推荐

  1. 【C语言初级阶段学习1】使用vscode运行C语言,vscode配置环境超详细过程(包括安装vscode和MinGW-W64安装及后续配置使用的详细过程,vscode用户代码片段的使用)[考研专用]

    vscode配置c语言环境 前言 一.下载vscode和MinGW-W64和安装过程 1. vscode部分 1.1 vscode下载安装过程 1.2 vscode下载插件 2. MinGW-W64部 ...

  2. c# vscode 配置_用VS Code写C#

    一.安装配置 1.下载SDK 首先下载 .NET Core SDK .下载地址如下: 安装SDK: 安装完成后调出控制台 输入 : dotnet --version 弹出版本信息 说明安装成功 2.安 ...

  3. c# vscode 配置_[VSCode插件推荐] Code Runner: 代码一键运行,支持超过40种语言

    记得两年多前,笔者那时还在写 PHP,同时需要写 Python 和 Node.js .所以在那时,支持多种语言的 VS Code 已经是笔者的主力编辑器了.唯一不足的是,笔者希望在VS Code里,能 ...

  4. c# vscode 配置_使用VSCode开发C#项目

    1.安装C#语言的运行环境.net core sdk 下载网址:https://dotnet.microsoft.com/download 2.在vscode中安装C#语言的插件 3.新建C#项目,打 ...

  5. vscode 乱码_如何使用VS Code 编辑Keil项目(51/STM32)

    Keil作为一个很优秀的集编辑和编译于一体的开发软件,使用起来非常方便,记得10多年前我在大学51单片机的时候,用的就是Keil uvision2,现在已经是Keil uvision5了. 不过,令我 ...

  6. efcore 实体配置_创建并配置模型

    创建并配置模型Creating and configuring a model 10/13/2020 本文内容 Entity Framework 使用一组约定基于实体类的形状构建模型.Entity F ...

  7. 微信读书vscode插件_快来!让这款 VSCode 插件吹爆你的彩虹屁!

    公众号关注 "GitHubDaily" 设为 "星标",每天带你逛 GitHub! 大家好,我是小 G.不知道你们是否还记得,在去年三月份的时候,曾因在微信群内 ...

  8. java maven log4j配置_如何在Maven构建的Java项目中使用log4j

    参考: 说明: 本文仅仅作为项目开发过程中的记录,不提供详细的说明.按照步骤直接复制粘贴即可成功使用. 第一步:添加依赖 log4j log4j 1.2.17 第二步:添加配置文件 文件位置说明:直接 ...

  9. Code Snippets Library

    在做项目开发的过程中,实际上是比较麻烦的,因为相同内容,我们需要书写多次,无形中给我们的开发增加了工作量.那么有什么办法可以避免这样重复的工作量吗?这就是这里要说的Code Snippets Libr ...

最新文章

  1. 课程 | 中科院教授带你快速入门机器学习
  2. QIIME 2教程. 04人体微生物组分析Moving Pictures(2020.11)
  3. Mac 删除应用卸载后无法正常移除的图标
  4. inputstream重新赋值之前需要close吗_变量提升真的搞懂了吗?打脸的一道题
  5. 怎么判断冠词用a还是an_【语法微课堂】英语冠词的用法,学会这4点,轻松玩转a、an、the...
  6. eslint vscode 自动格式化_使用 VSCode 的必备三大神器,这才是开发 Vue 的真香解决方案...
  7. Python学习笔记之if语句(二)
  8. spring加载xml配置文件
  9. java 改文件名的例子
  10. python 规则引擎 drools_Drools 规则引擎环境搭建
  11. 51 单片机AD采集电压值的坑
  12. Win7 FTP搭建
  13. EXCEL workbook.saveas 函数详解
  14. Normalize.css的作用
  15. 人生不该有如此压力,来吃下这口缓解焦虑的良药[50P]
  16. 【子桓说】苏明哲该如何摆脱面子对人生的消极影响?
  17. hdu 4417 Super Mario
  18. 黑马程序员_程序代码实现进制转换
  19. Latex设置页面横置
  20. 苹果电话录到android,怎样从苹果手机导出通讯录到安卓手机

热门文章

  1. JQ实现小写金额转大写
  2. 手机WAN远程唤醒主机
  3. 面试中 项目遇见的难点答案_你和offer之间只差这几个面试问题!常见面试问题汇总...
  4. 人生的换档时刻?你是怎么度过的
  5. 19_09_13 关于c语言中位域的理解
  6. 【晒出你的第83行代码】《阿里巴巴Java开发手册》主要作者孤尽晒出入职第一年的代码...
  7. 二维码活码的诞生、技术原理及使用场景
  8. Ubuntu视频没有声音
  9. python五角星符号怎么打出来_如何使用python输出连续星号?
  10. matlab常用代码(读取文件、批量导入数据、与或非)