web-dev-qa-db-ja.com

VSコードで複数行のコードスニペットを定義するより良い方法は？

Sublime Textでは、通常のドキュメントを作成するときに、スニペットファイルに空白を含む複数行のコードスニペットを定義できますが、Visual Studio Codeにあるものは、私が知る限り、ハードブレークする必要があるJSONエントリです二重引用符で囲まれた文字列のリストに行を分割するか、改行（\ n）文字を使用して長い文字列をソフトブレークします。他のIDEがそのまま使用できるWYSIWYGアプローチと比較すると、不便です。

より長いコードブロックのスニペットを定義するためのより良い方法があるのだろうか。

editorvisual-studio-codecode-snippets
16
kakyo

スニペットの本文を文字列の配列として定義し、それぞれを新しい行で開始できます。

このような：

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

または、Easy Snippet Maker拡張機能をインストールすると、テキストを強調表示してスニペットを作成できます。

9
Armin

複数行のスニペットを作成する良い方法も見つけられません。それはおそらく、私が最も改善してほしい機能の1つです。別の回答が示唆しているように、スニペットの作成に役立つ拡張機能がいくつかあります（ this や this など）。ただし、文字どおりのドル記号をエスケープしないため、インデントは適切ではありません。

これに対する回答を探しているとき、私は Pen by Denis Malinochkin （ this issue からリンク）を偶然見つけました。ただし、ドル記号も適切にエスケープされなかったため、フォークして、文字通りのドル記号を処理するためにこの行を追加しました。 ここにあります： https://codepen.io/cbejensen/pen/WXLxaE

お役に立てば幸いです。

追伸-これは私が追加した行です：

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

Snippet-creator は、必要な拡張機能です。

  1. 拡張機能をインストールします。
  2. スニペットを作成するために必要なコードを強調表示します。
  3. ctrl + Shift + Pキーを押して、コマンドパレットに「スニペットの作成」と入力し、Enterキーを押します。
  4. スニペット（例：-CPP）を作成する言語を選択し、スニペット名、スニペットショートカット、スニペットの説明の順に入力します。

これで準備完了です。手順4で入力したエディターにスニペットショートカットを入力し、最初に表示される予測を選択します（予測が表示されない場合は、Ctrl +スペースを押します）。

お役に立てれば ：）

注：「ファイル」->「設定」->「ユーザー・スニペット」に進みます。次に、スニペットを作成した言語を選択します。そこにスニペットがあります。

4
vinod

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"
  }
}
2
vineet sagar

独自の複雑なスニペットを作成できるスクリプトを作成しました。必要なファイルを使用するだけです。そのため、ソースコードを文字列または文字列配列で記述する必要はありません。 https://github.com/banxi1988/vscode-snippets-ext-template

0
banxi1988