在 VS-Code 中编写多行代码片段的最佳方法是什么？答案

【问题标题】：What's The Best Way To Write Multi-Line Code Snippets In VS-Code?在 VS-Code 中编写多行代码片段的最佳方法是什么？
【发布时间】：2017-06-10 22:26:48
【问题描述】：

在Sublime Text 中，可以在 sn-p 文件中使用空格定义多行代码 sn-ps。

但据我所知，VS-Code 需要一个 JSON 条目。这些要求：

硬分解成双引号字符串列表，或
使用换行符软中断长字符串\n

与其他 IDE 开箱即用的 WYSIWYG 方法相比，这很不方便。

有没有更好的方法来定义长代码块？

【问题讨论】：

标签： visual-studio-code editor sublimetext code-snippets vscode-snippets

【解决方案1】：

您可以将 sn-p 的主体定义为一个字符串数组，每个字符串都从一个新行开始。

像这样：

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

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

【讨论】：

谢谢。您在此处给出的 sn-p 是我的问题中的确切问题：我不想要多个带逗号的双引号字符串。我会试试这个扩展。

【解决方案2】：

我也找不到创建多行 sn-ps 的好方法。这可能是我最希望看到改进的功能之一。正如另一个答案所建议的那样，有几个扩展可以帮助创建片段（如this 和this）。但是，它们并没有逃避字面的美元符号，而且缩进也不是很好。

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

希望有帮助！

附： - 这是我添加的行：

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

【讨论】：

谢谢！必须破解才能完成这项工作，这太疯狂了。
请注意，original pen 之所以没有转义美元符号，是因为 VS Code 在您激活 sn-p 后使用 $1、$2 等来定位光标
好点，不敢相信我忽略了这一点！我已经更新了笔来说明美元符号后面的数字，当然，许多 sn-ps 可能需要数字前面的文字美元符号。我想没有很好的方法来解释文字美元符号，我可能应该保留原来的笔。

【解决方案3】：

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

【讨论】：

【解决方案4】：

您可以观看此视频以获取简短的快速教程

https://youtu.be/g1ouTcFxQSU

转到文件 --> 首选项 --> 用户片段。选择您的首选语言。
现在输入以下代码来创建一个 for 循环 sn-p：

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

你已经完成了。
在编辑器中输入“for”并使用第一个预测。

快捷方式--

安装Snippet-creator扩展。
突出显示生成 sn-p 所需的代码。
按 ctrl+shift+P 并在命令面板上键入“Create sn-p”，然后按 ENTER。
选择您要为其创建 sn-p 的语言（例如：-CPP），然后键入
sn-p 名称，键入 sn-p 快捷方式，然后键入 sn-p 描述。
您现在可以开始了。
在您在步骤 4 中输入的编辑器中键入 sn-p 快捷方式，然后选择首先出现的
预测（如果没有预测，请按 ctrl+空格）。

希望这会有所帮助:)

注意：转到文件->首选项->用户片段。然后选择您
创建 sn-p 时使用的语言。您会在那里找到 sn-p。

【讨论】：

附加说明：作为 Mac 用户，您可以从 Code->Preferences->User Snippets 访问您的 sn-ps。
@moff [CMD] + [SHIFT] + [P]（mac 用户）
旁注：sn-p 创建者已被标记为已弃用

【解决方案5】：

在 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"
  }
}

【讨论】：