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

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


前言


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


基本配置




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



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



更加详细的可以阅读这里: 你可以看到when的具体范围解释,非常详细。

这里我就不一一列举出来了。直接在链接的文章内搜索when Clause Contexts


代码片段


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


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

VS Code的代码片段支持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编辑器的项目很活跃,基本一个月到一个半月发布一个版本,

目录
相关文章
|
4月前
|
Python
新手向 Python:VsCode环境下Manim配置
该文介绍了如何准备和配置开发环境以使用Manim,主要包括两个步骤:一是准备工作,需要下载并安装VsCode和Anaconda,其中Anaconda需添加到系统PATH环境变量,并通过清华镜像源配置;二是配置环境,VsCode中安装中文插件和Python扩展,激活并配置虚拟环境。最后,安装ffmpeg和manim,通过VsCode运行测试代码验证配置成功。
183 1
|
30天前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
16天前
|
JSON 数据格式
vscode配置latex
本文档介绍如何在VSCode中配置LaTeX环境。首先需安装texlive和VSCode,并提前安装SumatraPDF以查看PDF文件。配置包括设置自动编译、PDF预览程序及正反向搜索等。提供了详细的`settings.json`配置示例,涵盖不同操作系统下的编译选项与方案。此外,还介绍了如何配置SumatraPDF实现与VSCode的跳转功能,以及相关快捷键的使用方法。
|
1月前
|
NoSQL 编译器 C语言
VSCode配置配置C++环境
VSCode配置配置C++环境
56 1
|
1月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
150 5
|
1月前
|
Rust Shell 开发者
7步开始rust(自定义环境安装与vscode开发环境配置)
本文档详细记录了当改变Rust安装路径至特定目录(如 `/home/local_rust`)时,如何在VSCode环境中正确配置Rust开发环境的过程。主要包括:设置环境变量、使用清华大学镜像安装Rust及更新镜像源、手动部署 `rust-analyzer`、安装标准库源码、安装与配置VSCode插件等七个步骤,确保开发者能够顺利搭建并使用定制化的Rust开发环境。
134 0
|
3月前
|
C++ iOS开发 MacOS
常用的 VSCode 快捷键【大全】,提升你的编码速度
常用的 VSCode 快捷键【大全】,提升你的编码速度
常用的 VSCode 快捷键【大全】,提升你的编码速度
|
2月前
|
缓存
如何彻底卸载VSCode及其原来的插件配置缓存
如何彻底卸载VSCode及其原来的插件配置缓存
271 0
|
3月前
cocos creator+vscode安装及配置介绍
cocos creator+vscode安装及配置介绍
166 0
|
4月前
|
C++
VS code debug c代码 配置
VS code debug c代码 配置
51 0