VSCode 用户代码片段 最佳实践

语法

1. 光标位置

使用tab键来逐一切换位置

$1 第一个位置
$2 第二个位置
... 以此类推

$0 光标最终位置,并退出"片段模式"

${1:value1}
${2:value1}
...

2. 默认值

使用字符串"MyName" (直接按tab,即可自动填写默认值)

${1:MyName}

枚举选择

${1|one,two,three|}

使用内置的变量 (下一部分中介绍)

${1:TM_FILENAME_BASE}

3. 变量

变量名	说明	例子
TM_SELECTED_TEXT	当前选择的文本 或 空字符
TM_CURRENT_LINE	当前行的内容
TM_CURRENT_WORD	光标或空字符串下单词的内容
TM_LINE_INDEX	从0开始的行索引	261
TM_LINE_NUMBER	从1开始的行号	262
TM_FILENAME	当前文档的文件名	index.tsx
TM_FILENAME_BASE	不带扩展名的当前文档的文件名	index
TM_DIRECTORY	当前文档的目录	E:\ReactProject\hello-react\src\product
TM_FILEPATH	当前文档的完整文件路径	E:\ReactProject\hello-react\src\product\index.tsx
RELATIVE_FILEPATH	当前文档的相对（打开的工作区或文件夹）文件路径	src\product\index.tsx
CLIPBOARD	剪贴板上的内容
WORKSPACE_NAME	开的工作区或文件夹的名称	hello-react
WORKSPACE_FOLDER	打开的工作区或文件夹的路径	E:\ReactProject\hello-react

当前日期与时间

变量名	说明	例子 (英|中)
CURRENT_YEAR	年份	2022
CURRENT_YEAR_SHORT	年份的最后两位	22
CURRENT_MONTH	月份的两位数 ( 例如: “02” )	02
CURRENT_MONTH_NAME	月份的全名	July | 5月
CURRENT_MONTH_NAME_SHORT	月份的简称	Jul | 5月
CURRENT_DATE	日期的两位数	08
CURRENT_DAY_NAME	天的名称 ( 例如: “Monday” )	Monday | 星期一
CURRENT_DAY_NAME_SHORT	天的短名称 ( 例如: “Mon” )	Mon | 周一
CURRENT_HOUR	以24小时时钟格式显示的当前小时数	22
CURRENT_MINUTE	分钟的两位数	50
CURRENT_SECOND	秒的两位数	26
CURRENT_SECONDS_UNIX	自Unix时代以来的秒数	1651503086

随机数

变量名	说明	例子
RANDOM	6位随机数 ( 10进制 )	962381
RANDOM_HEX	6位随机数 ( 16进制 )	bcf06a
UUID	版本4 UUID	decf8023-7e3c-4455-a05e-a3758c530fea

行注释 / 块注释

变量名	说明
BLOCK_COMMENT_START	输出示例：PHP /* 或 HTML <!--
BLOCK_COMMENT_END	输出示例：PHP */ 或 HTML -->
LINE_COMMENT	输出示例：PHP //

例子:

下面的代码段在JavaScript文件中插入/* Hello World */

在HTML 文件中插入<!-- Hello World -->

{
  "hello": {
    "scope": "javascript,html",
    "prefix": "hello",
    "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
  }
}

4. 正则处理内容

表达式分为3部分,

${ 普通的变量 / 过滤符合条件的内容 / 输出的格式 /}

常用的表达式

首字母大写

${1/(.*)/${1:/capitalize}/}

 (输入小写单词,然后按tab键,即可自动转换结果)
 输出:
 index -> Index

文件名首字母大写 – (不包含扩展名)

${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}

输出:
index.tsx -> Index

替换第一个.为_

${TM_FILENAME/[\\.]/_/}

输出:
example-123.456-TEST.js ----> example-123_456-TEST.js

字母全部大写

${TM_FILENAME/(.*)/${1:/upcase}/}

输出:
example-123.456-TEST.js ----> EXAMPLE-123.456-TEST.JS

替换所有的.和-为_

${TM_FILENAME/[\\.-]/_/g}

输出:
example-123.456-TEST.js ---->  example_123_456_TEST_js

删除非数字字母

${TM_FILENAME/[^0-9^a-z]//gi}

输出:
example-123.456-TEST.js ----> example123456TESTjs

5. 一些例子

一些 scope (请举一反三)
"scope": "typescript,typescriptreact,javascript,javascriptreact,vue"

"创建 React 17 ts 函数组件": {
  "prefix": "rit17",
  "body": [
    "import { FC, memo } from 'react';",
    "",
    "interface IProps {}",
    "let ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}: FC<IProps> = function (props) {",
    "    return (",
    "        <>",
    "            <h1>$TM_FILENAME_BASE</h1>",
    "        </>",
    "    );",
    "};",
    "",
    "export default memo(${TM_FILENAME_BASE/(.*)/${1:/capitalize}/});"
  ],
  "scope": "typescriptreact"

"创建 React 18 ts 函数组件": {
  "prefix": "rit",
  "body": [
    "import { FC, memo, PropsWithChildren } from 'react';",
    "",
    "interface IProps {}",
    "let ${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}: FC<PropsWithChildren<IProps>> = function (props) {",
    "    return (",
    "        <>",
    "            <h1>$TM_FILENAME_BASE</h1>",
    "        </>",
    "    );",
    "};",
    "",
    "export default memo(${TM_FILENAME_BASE/(.*)/${1:/capitalize}/});"
  ],
  "scope": "typescriptreact"
},

"for计次循环": {
  "prefix": "fori",
  "body": ["for (let i = 0; i < $1; i++) {", "    ", "}"]
},

"react测试组件Render刷新次数": {
  "prefix": "rcr",
  "body": [
    "let renderCountRef = useRef(0);",
    "renderCountRef.current++;",
    "console.log(\"$TM_FILENAME_BASE: \", renderCountRef.current);"
  ],
  "scope": "typescriptreact"
},

更多的代码片段

https://github.com/dsznajder/vscode-react-javascript-snippets

6. 快速生成代码片段

源码: https://github.com/pawelgrzybek/snippet-generator

网站: https://snippet-generator.app

7. 更多用户代码片段高级内容 到 官方原文 查看