博客记录点滴

开发

  • 安装脚手架 npm install -g yo generator-code
  • 然后执行命令 yo code
  • 选择 New Code Snippet，然后输入基础信息，回车

创建片段

发布

代码片段语法

  • tabStops(按 tab 时焦点停留位置) $1, $2 ... 为 tab 键依次停留位置 $0 为最后停留位置并退出代码片段
# example 基础for循环
"basic for": {
    "prefix": "bfor",
    "body" : "for (const ${1} of ${2:array}) {\n  $0 \n}"
}

RUNOOB 图标

  • placeholders(占位符)：在 tab 位置填入默认值

# example 带占位符的for循环
"placeholder for": {
    "prefix": "pfor",
    "body" : "for (const ${1:ele} of ${2:array}) {\n  $0 \n}"
}

RUNOOB 图标

  • choice（下拉选择）：在 tab 位置展示下拉菜单

    # example 带下拉菜单的for循环
"test for": {
  "prefix": "tfor",
  "body" : "for (const ${1|ele,key,item|} of ${2:array}) {\n  $0 \n}"
}

    RUNOOB 图标

  • 内置变量: 格式为$name 或 ${name:默认值}常见 vscode 内置变量：VSCode variables

  • 快速生成基本 React 页面:

"React Function Comp": {
    "prefix": "trfc",
    "body": [
      "import React, { useEffect } from 'react'",
      "",
      "type IProps = {}",
      "",
      "const ${TM_FILENAME/(.*).js/$1/i} = (props: IProps) => {",
      "  return (",
      "    null
",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME/(.*).js/$1/i}",
      ""
    ],
    "description": "react 函数式组件快速命令"
 }

RUNOOB 图标

  • 在注释中使用日期变量
"作者和时间注释": {
    "prefix": "zs-Author & Time",
    "body": [
      "/**",
      " * Created by laiye on $CURRENT_YEAR/$CURRENT_MONTH/$CURRENT_DATE",
      " */",
      "$0"
    ],
    "description": "添加作者和时间注释"
}

RUNOOB 图标

  • 变量转换 : 变量转化能够让你在变量的值被插入之前，得到一个修改插入值的机会语法：${var_name/regular_expression/format_string/options}

    • var_name: 变量名
    • regular_expression: 正则表达式
    • format_string: 格式化字符串
    • options: 选项

  • 例如：生成 react 文件时，将文件名变量首字母大写：

"React Function Comp": {
    "prefix": "trfc",
    "body": [
      "import React, { useEffect } from 'react'",
      "",
      "type IProps = {}",
      "",
      "const ${TM_FILENAME/(.*).js/${1:/capitalize}/i} = (props: IProps) => {",
      "  return (",
      "    null
",
      "  )",
      "}",
      "",
      "export default ${TM_FILENAME/(.*).js/${1:/capitalize}/i}",
      ""
    ],
    "description": "react 函数式组件快速命令"
 }

RUNOOB 图标

  • 获取变量结果时，可以用条件判断最终显示内容:
"format_string if":{
    "prefix": "tstr",
    "body": "${TM_FILENAME/verify.js(x)?/${1:?jsx:tsx}/}",
}

假设我们有一个「verify.js」文件，我们有这么一条 snippet: "body": "${TM_FILENAME/verify\\.j(s)?/${1:?jsx:tsx}/}"。整个模式串匹配成功，括号中的 s 也成功，则写入 jsx，否则写入 tsx

RUNOOB 图标

  • 占位符转换(tab 切换光标时，对占位符进行格式化)
  • 举例：react 中使用 useState
const [ ${1}, set${1/(.*)/${1:/capitalize}/} ] = useState($2)

RUNOOB 图标

参考资料