VSCode 自定义代码段的多个版本

Question

我正在 VS Code 中创建自定义 javascript 片段。我有一个创建 React 组件 class 的片段，但使用相同的前缀，我想要一个稍微不同的 React 组件版本 class。这是我的代码：

   "Creates a React component class": {
        "prefix": "rcc",
        "body": [
          "import React from 'react'",
          "",
          "class ${1:className} extends React.Component {",
          "    render() {",
          "        return (",
          "            <div>",
          "",
          "            </div>",
          "        )",
          "    }",
          "}",
          "",
          "export default ${1:className}"
        ],
        "description": "Creates a React component class"
    },

我想输入 rcc 并让它给我两个选项，一个是默认选项，另一个粘贴此代码：

   "Creates a React component class": {
        "prefix": "rcc",
        "body": [
          "import React from 'react'",
          "",
          "class ${1:className} extends React.Component {",    
          "    render() {",
          "        const runCallback = (cb) => {",
          "            return cb()",
          "         }",
          "        return (",
          "            <div>",
          "",
          "            </div>",
          "        )",
          "    }",
          "}",
          "",
          "export default ${1:className}"
        ],
        "description": "Creates a React component class"
    },

Answer 1

我开始意识到你不能以这种规模做到这一点。 VS Code 自定义代码片段中的选择功能，只允许您在代码中的几个单行词之间进行选择。

看起来像这样：

${1|choice1, choice2|}

Answer 2

您可以不加选择地执行此操作：

  "Creates a React component class": {
  "prefix": "rcc",
  "body": [
    "import React from 'react'",
    "",
    "class ${1:className} extends React.Component {",    
    "    render() {",
    "        ${2:const runCallback = (cb) => {\n\t\t\t\t\treturn cb()\n\t\t\t\t\t\}}",
    
    "        return (",
    "            <div>",
    "",
    "            </div>",
    "        )",
    "    }",
    "}",
    "",
    "export default ${1:className}"
  ],
  "description": "Creates a React component class"
}

choices 似乎不允许 returns 在其中，但默认选项允许。

如果不想要默认选项，选中时Ctr+X两次

如果你想要tab.

VSCode 自定义代码段的多个版本

VSCode multiple versions of custom snippets

javascript

visual-studio-code

vscode-snippets