在VS代码中定义多行代码片段的更好方法是什么？

Question

在Sublime Text中，您可以在编写常规文档时在片段文件中定义带有空格的多行代码片段，但是当涉及Visual Studio Code中类似的多行片段时，据我所知它必须是JSON条目，您必须将每行分解为列表中的双引号字符串元素，或在一个字符串中使用显式ASCII换行符（\ n）。

我想知道是否有更好的方法来定义代码片段，特别是当它很长时。

Answer 1

您可以将代码段的主体定义为字符串数组，每个字符串都以新行开头。

像这样：

  "Create for loop":{
    "prefix": "mkfor",
    "body":[
      "for(int i = 0; i < 3; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

或者如果您安装Easy Snippet Maker扩展，您可以通过突出显示文本来创建您的片段。

Answer 2

我找不到创建多行片段的好方法。这可能是我希望看到改进最多的功能之一。正如另一个答案所示，有一些扩展可以帮助创建Snippet（如this和this）。然而，它们并没有逃避字面上的美元符号，而且压痕也不是很大。

在浏览这个问题的答案时，我偶然发现了Pen by Denis Malinochkin（从this issue链接）。然而，它也没有正确地逃脱美元符号，所以我分叉它并添加这一行来处理文字美元符号。这是：https://codepen.io/cbejensen/pen/WXLxaE

希望有所帮助！

附： - 这是我添加的行：

line = line.replace(new RegExp(/\$/, 'g'), '\\$');

Answer 3

Snippet-creator是您需要的扩展。

1. 安装扩展。
2. 突出显示制作代码段所需的代码。
3. 按ctrl + shift + P并在命令面板上键入“Create snippet”，然后按ENTER。
4. 选择要为其创建代码段的语言（例如：-CPP），然后键入代码段名称，键入代码段快捷方式，然后键入代码段说明。

你现在很高兴。在步骤4中输入的编辑器中键入代码段快捷方式，然后选择首先出现的预测（如果没有预测，请按ctrl + space）。

希望这可以帮助 ：）

注意：转到文件 - >首选项 - >用户代码段。然后选择您在其中创建代码段的语言。你会在那里找到片段。

Answer 4

在mac机器上点击cmd + shift + p，然后搜索“配置用户代码片段”，然后创建一个文件并粘贴到json代码下面。提供前缀，正文和描述。参考：https://code.visualstudio.com/docs/editor/userdefinedsnippets

{
    "forLoop": {
        "prefix": "forLoop",
        "body": [
            "for (const ${2:element} of ${1:array}) {",
            "\t$0",
            "}"
        ],
        "description": "For Loop"
    },

    "reactClass": {
        "prefix": "reactClass",
        "body": [
            "import React from 'react';",
            "class ${1:ComponentName} extends React.Component {",
            "\t$0constructor(props) {",
            "\t$0\t$0super(props)",
            "",
            "render() {",
            "return (<div> ${2:Component} </div>)",
            "}",
            "export default ${3:ComponentName}"
        ],
        "description": "For React Component class"
    },
    "function": {
    "scope": "javascript,typescript",
    "prefix": "function",
    "body": [
        "import React from 'react';",
        "import withStyles from '@material-ui/core/styles/withStyles';",
        "import { makeStyles } from '@material-ui/core/styles';",
        "",
        "import Styles from  './style.js';",
        "",
        "const useStyles = makeStyles(Styles);",
        "",
        "function $1(props){",
        "const classes = useStyles();",
        "\treturn (",
        "\t\t<React.Fragment>",
        "\t\t\t<div className={classes.root}>",
        "\t\t\t\t$1",
        "\t\t\t</div>",
        "\t\t</React.Fragment>",
        "\t)",
        "}",
        "export default withStyles(useStyles)($1);"
    ],
    "description": "react class"
  }
}

Answer 5

我写了一个脚本，你可以创建自己的复杂片段。只需使用您想要的文件。所以你不需要在字符串或字符串数​​组中编写源代码。 https://github.com/banxi1988/vscode-snippets-ext-template