vscode 之 snippets 妙用
目录
snippets 介绍
常见 snippets 代码块
常见 snippets 变量
如何转化变量
开发中常见有固定模板，每次都 copy 会显得有点憨憨，vscode 提供了 snippets（代码块）功能，就免去了复制的麻烦。
# snippets 介绍
实用的介绍参考Snippets 设置超实用的代码块 (opens new window)，下面是本人的实践经验。
# 设置
Windows 系统: 文件 > 首选项 > 用户代码片段
Mac 系统: Code > Perference > User Snippets。
# 生效范围
代码片段分为全局文件和某类文件类型两种。
如果代码块非常通用，就设置一个全局的代码块 json，vscode 会在User/snippets下新建global-snippets..code-snippets文件，会对所有文件生效。
如果只想让代码块在某一类文件生效，比如.vue，则可以搜索vue.json，进行配置。
# 常见 snippets 代码块
json 文件会给出一个示例，照着就可以自定义自己的代码块。如下：
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
2
3
4
5
6
7
8
代码块分为 2 部分
静态代码块
占位符
占位符的变量基本可覆盖常用的场景，详细见下面小节。举一个本人使用的代码块。
"vue3 js template": {
"prefix": "vue3-js",
"body": [
"<template>",
"\t<div class=\"$TM_FILENAME_BASE-wrap\">$1</div>",
"</template>\n",
"<script setup>",
"</script>\n",
"<style lang=\"scss\" scoped>",
".$TM_FILENAME_BASE-wrap{}",
"</style>"
],
"description": "vue3 template"
},
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
只需要在 vue 文件中输入vue3字样，就可以直接显示一个 vue3 的模板代码块，顺便带上文件名（组件名）。
# 常见 snippets 变量
下面是搬运的翻译（Snippets 设置超实用的代码块 (opens new window)），原文 见官方文档 (opens new window)。
1）文档相关：
| 变量 | 变量含义 |
|---|---|
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 | 剪贴板的内容 |
WORKSPACE_NAME | 已打开的工作空间或文件夹的名称 |
2）当前日期和时间：
| 变量 | 变量含义 |
|---|---|
CURRENT_YEAR | 当前年份 |
CURRENT_YEAR_SHORT | 当前年份的最后两位数 |
CURRENT_MONTH | 月份为两位数（例如'02'） |
CURRENT_MONTH_NAME | 月份的全名（例如'June'）（中文语言对应六月） |
CURRENT_MONTH_NAME_SHORT | 月份的简称（例如'Jun'）（中文语言对应是 6 月） |
CURRENT_DATE | 这个月的哪一天 |
CURRENT_DAY_NAME | 当天是星期几（例如'星期一'） |
CURRENT_DAY_NAME_SHORT | 当天是星期几的简称（例如'Mon'）（中文对应周一） |
CURRENT_HOUR | 24 小时时钟格式的当前小时 |
CURRENT_MINUTE | 当前分 |
CURRENT_SECOND | 当前秒 |
3）要插入行或块注释，请遵循当前语言：
| 变量 | 变量含义 |
|---|---|
BLOCK_COMMENT_START | 输出：PHP /*或 HTML 格式<!-- |
BLOCK_COMMENT_END | 输出：PHP */或 HTML 格式--> |
LINE_COMMENT | 输出：PHP //或 HTML 格式 |
# 如何转化变量
这个是在实践中遇到的。比如前面 vue3 模板的代码块，其实存在一个问题，就是在大驼峰的 vue 组件中，由于使用了$TM_FILENAME_BASE 变量，它会将大驼峰命名赋给 class 类 名。虽然对开发没影响，但看起来不专业，可能会被人诟病。
在经过无数次的生成代码块，然后重新修改命名后，终于受不了了，我开始寻找一步到位的方法。经历了 2 个过程。
# 第一阶段：使用 vscode 插件
由于一开始没看英文文档，以为只能用$TM_FILENAME_BASE 这种变量名。于是开始从插件市场寻找方案。
我找到一个用来转换变量命名的插件string transform (opens new window)，它可以将输入的变量进行 大驼峰，小驼峰等的转换，具体如下：
转换成 `helloWorld` 命名方式
转换成 `HelloWorld` 命名方式
转换成 `HELLO_WORLD` 命名方式
转换成 `hello_world` 命名方式
转换成 `hello-world` 命名方式
2
3
4
5
使用方式为：
command+shift+p 弹出命令窗口，输入to hello-world，即可进行转化。
为了进一步简化，可以将该命令绑定为快捷键，比如command+k+f。这样就可以在生成文件后，通过command+d选中要转换的变量，然后快捷键进行转换。
# 第二阶段：直接改写 snippets 变量
上面的方式还是半自动的，在查询官网文档的过程中，发现了占位符是支持转换的，于是开始转换之旅。
使用方式也很简单，就是通过正则进行匹配，然后转换。
列举一段官方的示例：
| Example | Output | Explanation |
|---|---|---|
"${TM_FILENAME/[\\.]/_/}" | example-123_456-TEST.js | Replace the first . with _ |
"${TM_FILENAME/[\\.-]/_/g}" | example_123_456_TEST_js | Replace each . or - with _ |
"${TM_FILENAME/(.*)/${1:/upcase}/}" | EXAMPLE-123.456-TEST.JS | Change to all uppercase |
"${TM_FILENAME/[^0-9^a-z]//gi}" | example123456TESTjs | Remove non-alphanumeric characters |
在改造过程中遇到了转换的问题，最终解决方案在文末，过程如下：
首先改造代码如下：
- "\t<div class=\"$TM_FILENAME_BASE-wrap\">$1</div>",
+ "\t<div class=\"${TM_FILENAME_BASE/(\\w)([A-Z])/${1:/downcase}-${2:/downcase}/g}-wrap\">$1</div>",
2
发现只能将MyBox转为My-box，头部大写字母去不掉。
"\t<div class=\"${TM_FILENAME_BASE/([A-Z])/-${1:/downcase}/g}-wrap\"></div>",
将MyBox转为-my-box，多出一截-。
至此陷入困境：如何利用正则将大驼峰转为 kebab case？
去 github 寻找方案，发现有人也遇到类似的问题，见issues (opens new window)。最终找到官方提供 的方案 (opens new window)。
"${TM_FILENAME_BASE/([A-Z][a-z]+)([A-Z][a-z]+$)?/${1:/downcase}-${2:/downcase}/g}",
果然可以转大驼峰了。
不过还有点小问题，它转不了如下几个格式。
myBob->mybob-MBox->Mbox-Box->box-（这个没解决）
最后，改写下，即可。
"${TM_FILENAME_BASE/(\\w[a-z]*)([A-Z][a-z]+$)?/${1:/downcase}-${2:/downcase}/g}"