43

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

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

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

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

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

4

5 回答 5

39

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

像这样：

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

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

于 2017-04-01T17:31:02.760 回答
16

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

https://youtu.be/g1ouTcFxQSU

转到File --> Preferences --> User Snippets。选择您的首选语言。
现在输入以下代码来创建一个 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+空格）。

希望这可以帮助 ：）

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

于 2019-01-27T12:37:07.773 回答
8

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

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

希望有帮助！

PS - 这是我添加的行：

line = line.replace(new RegExp(/\$/, 'g'), '\\$');
于 2017-11-30T22:32:52.467 回答
2

在 mac 机器上按 cmd+shift+p，然后搜索“Configure User Snippets”，然后创建一个文件并粘贴到 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"
  }
}
于 2019-05-04T23:21:38.330 回答
0

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

于 2018-05-27T10:37:10.247 回答