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

Question

在 Sublime Text 中，可以在代码片段文件中使用空格来定义多行代码片段。

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

1. 硬中断为双引号字符串列表，或者
2. 使用换行符软中断长字符串

   \n

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

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

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

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

https://youtu.be/g1ouTcFxQSU

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

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

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

快捷方式--

1. 安装Snippet-creator扩展。
   
2. 突出显示您需要制作片段的代码。
   
3. 按 ctrl+shift+P 并在命令面板上键入“创建片段”，然后 按 ENTER 键。
   
4. 选择您要为其创建代码片段的语言（例如：-CPP），然后输入
   代码片段名称，输入代码片段快捷方式，然后输入代码片段描述。
   现在就可以出发了。
   在编辑器中输入您在步骤 4 中输入的代码片段快捷方式，然后选择第一个出现的
   预测（如果没有预测，请按 ctrl+space）。
   

希望这有帮助:)

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

Answer 3

我也找不到创建多行片段的好方法。这可能是我最希望看到改进的功能之一。正如另一个答案所建议的，有一些扩展可以帮助创建片段（例如

this 和 this）。然而，它们无法逃避字面的美元符号，而且缩进也不是很好。

在浏览此问题的答案时，我偶然发现了一支

Denis Malinochkin 的笔（链接自此问题）。然而，它也没有正确地转义美元符号，所以我分叉了它并添加了这一行来处理文字美元符号。 这里是：https://codepen.io/cbejensen/pen/WXLxaE

希望有帮助！

附注- 这是我添加的行：

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

Answer 4

我创建了一个扩展来将片段存储在 Markdown 文件中：

https://marketplace.visualstudio.com/items?itemName=用户名hw.snippets-in-markdown

Answer 5

在 mac 计算机上点击 cmd+shift+p，然后搜索“配置用户片段”，然后创建一个文件并粘贴下面的 json 代码。 提供前缀、正文和描述。 参考：

https://code.visualstudio.com/docs/editor/userdefinesnippets

{
    "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 6

我使用这个 JSON Escape 格式化程序（？）将大量 HTML 处理成片段：

https://www.freeformatter.com/json-escape.html

（此过程的结果应添加在引号“...”中到 JSON 对象的“主体”部分。

Answer 7

我编写了一个脚本，您可以创建自己的复杂片段。只需使用您想要的文件即可。因此您不需要将源代码写入字符串或字符串数组中。

https://github.com/banxi1988/vscode-snippets-ext-template

Answer 8

截至 2023 年 10 月 31 日，使用 VSCode 1.83.1，我能够通过位于目录 %AppData 中的文件 java.json 中的以下条目创建相当于 JetBrains IntelliJ 内置“psvm”Java 快捷方式的 VSCode %\Code\User\snippets\ :

"public static void main": 
{
    "prefix": "psvm",
    "description": "Creates an empty static main method",
    "body" : [
    "public static void main(String[] args)",
    "{",
    "\t$0",
    "}"
    ]
}