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编辑器的项目很活跃,基本一个月到一个半月发布一个版本,

目录
相关文章
|
20天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
185 4
|
22天前
|
Linux C++ iOS开发
vs code常见的查找快捷键大全
本文来自 frozencola 技术日志,介绍了 VS Code 中常用的查找快捷键,包括快速打开文件、文件资源管理器、全局搜索、查找符号、查找文件中的文本、查找并替换、文件导航和使用命令面板。掌握这些快捷键可以显著提升开发效率。
52 4
|
22天前
|
C++
vs code常见的查找快捷键大全
【11月更文挑战第1天】本文介绍了 VS Code 中的基本查找和替换操作,包括在当前文件中查找(Ctrl + F)、查找替换(Ctrl + H)、查找下一个(F3)和查找上一个(Shift + F3)。还涵盖了在多个文件中查找(Ctrl + Shift + F)和查找替换(Ctrl + Shift + H),以及符号查找相关操作,如转到符号(Ctrl + T)和在文件中查找符号(Ctrl + Shift + O)。这些快捷键和功能帮助用户高效地管理和编辑代码。
|
1月前
|
Ubuntu Linux 编译器
Linux/Ubuntu下使用VS Code配置C/C++项目环境调用OpenCV
通过以上步骤,您已经成功在Ubuntu系统下的VS Code中配置了C/C++项目环境,并能够调用OpenCV库进行开发。请确保每一步都按照您的系统实际情况进行适当调整。
275 3
|
6月前
|
Python
新手向 Python:VsCode环境下Manim配置
该文介绍了如何准备和配置开发环境以使用Manim,主要包括两个步骤:一是准备工作,需要下载并安装VsCode和Anaconda,其中Anaconda需添加到系统PATH环境变量,并通过清华镜像源配置;二是配置环境,VsCode中安装中文插件和Python扩展,激活并配置虚拟环境。最后,安装ffmpeg和manim,通过VsCode运行测试代码验证配置成功。
384 1
|
3月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
2月前
|
JSON 数据格式
vscode配置latex
本文档介绍如何在VSCode中配置LaTeX环境。首先需安装texlive和VSCode,并提前安装SumatraPDF以查看PDF文件。配置包括设置自动编译、PDF预览程序及正反向搜索等。提供了详细的`settings.json`配置示例,涵盖不同操作系统下的编译选项与方案。此外,还介绍了如何配置SumatraPDF实现与VSCode的跳转功能,以及相关快捷键的使用方法。
|
3月前
|
NoSQL 编译器 C语言
VSCode配置配置C++环境
VSCode配置配置C++环境
98 1
|
3月前
|
Dart
Flutter笔记:手动配置VSCode中Dart代码自动格式化
Flutter笔记:手动配置VSCode中Dart代码自动格式化
466 5
|
3月前
|
Rust Shell 开发者
7步开始rust(自定义环境安装与vscode开发环境配置)
本文档详细记录了当改变Rust安装路径至特定目录(如 `/home/local_rust`)时,如何在VSCode环境中正确配置Rust开发环境的过程。主要包括:设置环境变量、使用清华大学镜像安装Rust及更新镜像源、手动部署 `rust-analyzer`、安装标准库源码、安装与配置VSCode插件等七个步骤,确保开发者能够顺利搭建并使用定制化的Rust开发环境。
526 0