项目代码风格统一 —— Visual Studio Code 创建代码片段

以和为贵_大杀四方
335 阅读4分钟

前言

在前端开发的世界中，Visual Studio Code是我们团队的得力助手。然而，随着团队规模的扩大，每位成员独特的编码风格逐渐显现，导致同一个表单或表格的实现方式出现了多种版本。这种多样性虽然丰富了我们的视野，但长期下去，却可能使团队的规范变得松散，进而影响到开发效率。

为了维护代码的一致性，提升团队的协作效率，我们决定迈出关键的第一步：利用Visual Studio Code强大的代码片段功能。我们将创建一系列代码片段，整合团队中常用的文件模板和编码模式，通过设置统一的快捷键，使得每位成员都能够快速调用这些标准化的代码块。

通过这种方式，我们不仅能够确保代码风格的统一，还能够在编码过程中节省时间，提高开发速度。这将是我们迈向高效、协同工作的坚实一步，为团队的长远发展奠定基础。

开发

Visual Studio Code 找到代码片段配置项

  1. Code-->首选项-->配置用户代码片段（在window 系统上，文件-->首选项-->用户代码片段） image.png
  2. 通过快捷键「Command + Shift + P」打开命令窗口（all command window），输入「snippet」，通过候选栏中的选项进入目的语言的代码段设置文件。

image.png

选择自己要配置的代码片段

image.png

在这里我们以全局代码片段文件为例,输入对应的文件名，会出现如下文件 image.png

image.png

我们以下面的文件内容为例，完成同步内容修改,即在你创建的代码片段中输入如下内容，最终结果如下图所示：

{
	"测试数据": {
	"scope": "javascript,typescript",
	"prefix": "test",
	"body": [
	"const $1  = 'firstline'",
	"const two  = $1",
	],
	"description": "同步修改内容"
	}
}

image.png

效果为：

20240829085641.gif

构成和语法说明

构成

image.png

  • Print to console : 代码片段的名称，显示在代码片段提示列表中。
  • prefix: 是触发snippet的快捷键，当你键入这个前缀时，VSCode会自动提示该代码片段。
  • body: 代码片段的实际内容，以数组的形式列出。在数组中，可以使用 1、1、2 等占位3. 符来表示光标停留的位置，方便用户进行填写和编辑。
  • description: 代码片段的描述，当你在代码片段提示列表中看到该片段时，会显示该描述。

语法释义

Tabstops：制表符

它允许开发者在代码片段中定义多个光标位置，从而实现更高效的代码编辑

  • $1, $2, $3... ：这些是制表位的标识符，用于在代码片段中标记光标应该出现的位置。每个数字代表一个不同的光标位置，按照它们在代码片段中出现的顺序排列。
  • $0：这是一个特殊的制表位，它表示用户完成所有其他制表位的编辑后，光标最终应该停留的位置。

Placeholders：占位符,也可以作为默认值

  • body 内容 和效果如下:

        "${1:位置1}  内容1",
    "内容2 ${2:位置2}"

    20240829220220.gif

  • 占位符还可以嵌套使用，例如：${3:another ${4:placeholder}}

Choice：可选项，

占位符可以具有选择项作为值。语法是用竖线字符包围的逗号分隔的值的枚举，例如 ${1|one,two,three|}。当代码片段被插入并且选择了占位符时，将提示用户选择其中一个值。

  • body 内容 和效果如下: 
    "${1|first,two,three|}天天"
    20240829221134.gif

Variables：变量(更多)

  • 使用$name或${name:default}可以插入变量的值。 当未设置变量时，将插入其缺省值或空字符串。 当varibale未知（即，其名称未定义）时，将插入变量的名称，并将其转换为「placeholder」。

  • 可以使用以下「Variable」：

    • TM_SELECTED_TEXT：当前选定的文本或空字符串
    • TM_CURRENT_LINE：当前行的内容
    • TM_CURRENT_WORD：光标下的单词的内容或空字符串
    • TM_LINE_INDEX：基于零索引的行号
    • TM_LINE_NUMBER：基于一索引的行号
    • TM_FILENAME：当前文档的文件名
    • TM_FILENAME_BASE 当前文档的文件名（不含后缀名）
    • TM_DIRECTORY：当前文档的目录
    • TM_FILEPATH：当前文档的完整文件路径
    • CLIPBOARD 剪贴板的内容
     "当前文件： $TM_FILENAME",
 "当前日期： $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE"

    20240829222028.gif

transforms 变量转换

  • body 内容 和效果如下: 
    "${TM_FILENAME/(.*)\\.[a-z]+/${1:/upcase}/i}"
    20240829223208.gif

总结

Snippets 是 VS Code 中一个非常实用的功能，它通过提供可重用的代码片段，帮助开发者提高编程效率，减少重复劳动，是开发者在日常编程工作中不可或缺的工具之一‌。更过详细的用法等着我们去探索：官网

avatar
文章
阅读
粉丝