VS Code 折腾记 - (6) 基本配置/快捷键定义/代码片段的录入(snippet)

前言

本来分成三篇来写的,但是想了想没必要,大家都是聪明人。。。简单的东西点一下就晓得了。复制代码

基本配置

这里写图片描述

这里写图片描述


快捷键自定义(Ctrl+K Ctrl + S)

这里写图片描述

  • 那个when支持条件表达式返回一个布尔值
  • 支持的快捷键组合快捷键的键值

这里写图片描述

更加详细的可以阅读这里: 你可以看到when的具体范围解释,非常详细。。这里我就不一一列举出来了。。。直接在链接的文章内搜索when Clause Contexts


代码片段

进入代码片段自定义有两种方式:

  1. 【菜单栏->文件->首选项->用户代码片段】
  2. 全局命令【ctrl+shift + p => snippet】

VSCODE的代码片段支持30多种编程语言,所以也免了代码片命名唯一和全局生效【所有文件】的尴尬

这里就选择一个sass的说下,内部有这么一段注释嗯

{
    /*
     // Place your snippets for Sass here. Each snippet is defined under a snippet name and has a prefix, body and 
     // description. 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
     // Example:
     "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
*/
    "utf-8": {
        "prefix": "utf-8",
        "body": [
            "@charset 'UTF-8';"
        ],
        "description": "插入文件编码"
    },
    "impout": {
        "prefix": "impcfg",
        "body": [
            "@import '../../../assets/scss_styles/custom_scss/_custom-export.scss';"
        ],
        "description": "插入配置文件"
    },
    "toRem": {
        "prefix": "rem",
        "body": [
            "toRem($0)"
        ],
        "description": "插入px转换函数"
    },
        "removeDedault": {
        "prefix": "ra",
        "body": [
            "@include remove-a-default-behavior"
        ],
        "description": "移除a的下划线"
    }

}复制代码

直接给效果图再来解释比较好理解

这里写图片描述

  • toRem: 只是一个单纯的描述
  • prefix: 是触发snippet的简写
  • body: 是展开的代码片段
    • $1,$2表示占位符,用于用户展开代码片段所需要替换的,也可以写成${1:label}键值对的方式
  • description : 用户你在输出snippet之前,方便自己识别的注释,而不用强行记忆那些简写的

总结

VS Code编辑器的项目很活跃,基本一个月到一个半月发布一个版本,每次都带来一些挺不错的特性。。 下篇文章让我想想写个什么好。。。。。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏破晓之歌

python之调用系统命令 原

os模块包装了不同操作系统的通用接口,使用户在不同操作系统下,可以使用相同的函数接口,返回相同结构的结果。

3534
来自专栏自动化测试实战

Flask第一篇——URL详解

3026
来自专栏深度学习自然语言处理

Linux基本命令之grep命令常见用法

grep命令可以说是Linux下面最常用的文本处理工具了,那么究竟我们可以用grep命令做什么了?首先我们想一想在windows下是我们是如何在整个文本中寻找我...

1712
来自专栏阮一峰的网络日志

npm scripts 使用指南

Node 开发离不开 npm,而脚本功能是 npm 最强大、最常用的功能之一。 本文介绍如何使用 npm 脚本(npm scripts)。 ? 一、什么是 np...

3597
来自专栏linux运维学习

linux学习第十七篇:vim介绍,颜色显示,移动光标,复制剪切粘贴

VIM VIM颜色显示和移动光标 VIM一般模式下移动光标 一般模式下复制剪切粘贴 ---- VIM介绍 vi这个命令,它是linux中必不可少的一个工具。没...

2308
来自专栏web前端教室

为什么不是0,1,2,3,4?setTimeout的奇怪问题

网上看到这样一个题目: for(let i=0;i<5;i++){ setTimeout(function(){alert(i)},0) } 它输出的顺序并不...

1909
来自专栏zhangdd.com

testlink报错“ask administrator to update localization file(< testlink_root >/locale/zh_CN/texts.php) –

testlink报错“ask administrator to update localization file(<testlink_root>/locale/...

1082
来自专栏技术博文

linux zip 命令详解(2)

linux zip 命令详解  功能说明:压缩文件。  语 法:zip [-AcdDfFghjJKlLmoqrSTuvVwXyz$][-b <工作目录>][-l...

3936
来自专栏企鹅号快讯

爬虫必备库‘requests’详解(二)

今日分享:requests库详解 上一篇文章爬虫必备库‘requests’主要说了下Pytohn第三方库--Requests库的安装与简单测试,今天详细介绍Re...

2769
来自专栏wym

转载[Linux/Ubuntu] vi/vim 使用方法讲解

源地址:http://www.cnblogs.com/emanlee/archive/2011/11/10/2243930.html

1242

扫码关注云+社区

领取腾讯云代金券