web-dev-qa-db-fra.com

Une meilleure façon de définir des extraits de code multi-lignes dans du code VS?

Dans Sublime Text, vous pouvez définir des extraits de code multi-lignes avec des espaces dans un fichier d'extraits lorsque vous écrivez un document normal, mais ce que nous avons avec Visual Studio Code, pour autant que je sache, est une entrée JSON où vous devez interrompre brutalement les lignes vers le bas dans une liste de chaînes entre guillemets doubles ou fractionnez une chaîne longue à l'aide de caractères de saut de ligne (\ n). Il n'est pas pratique par rapport aux approches WYSIWYG fournies par d'autres IDE.

Je me demande s'il existe de meilleures façons de définir des extraits de code pour des blocs de code plus longs.

editorvisual-studio-codecode-snippets
16
kakyo

Vous pouvez définir le corps de votre extrait de code comme un tableau de chaînes, chacune commençant sur une nouvelle ligne.

Comme ça:

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

ou si vous installez Easy Snippet Maker extension, vous pouvez créer vos extraits en surlignant des textes.

9
Armin

Je ne trouve pas non plus un bon moyen de créer des extraits de plusieurs lignes. C'est probablement l'une des fonctionnalités que j'aimerais le plus améliorer. Comme une autre réponse l'a suggéré, il existe quelques extensions pour aider à la création d'extraits de code (comme this et this ). Cependant, ils n'échappent pas aux signes littéraux du dollar et l'indentation n'est pas géniale.

Lors de la recherche de réponses à cette question, je suis tombé sur un Pen par Denis Malinochkin (lié à partir de ce numéro ). Cependant, il n'a pas non plus échappé correctement aux signes dollar, donc je l'ai fourché et j'ai ajouté cette ligne pour gérer les signes dollar littéraux. Le voici: https://codepen.io/cbejensen/pen/WXLxaE

J'espère que cela pourra aider!

P.S. - Voici la ligne que j'ai ajoutée:

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

Snippet-creator est l'extension dont vous avez besoin.

  1. installez l'extension.
  2. Mettez en surbrillance le code dont vous avez besoin pour créer l'extrait.
  3. appuyez sur ctrl + shift + P et tapez "Créer un extrait" dans la palette de commandes et appuyez sur ENTRÉE.
  4. sélectionnez la langue pour laquelle vous souhaitez créer un extrait (par exemple: -CPP), puis saisissez le nom de l'extrait, saisissez le raccourci de l'extrait, puis tapez la description de l'extrait.

Vous êtes maintenant prêt à partir. Tapez le raccourci d'extrait dans l'éditeur que vous avez entré à l'étape 4 et sélectionnez la prédiction (si aucune prédiction ne vient appuyer sur ctrl + espace) qui vient en premier.

J'espère que cela t'aides :)

Remarque: allez dans Fichier-> Préférences-> Extraits d'utilisateur. Sélectionnez ensuite la langue dans laquelle vous avez créé l'extrait. Vous y trouverez l'extrait de code.

4
vinod

Appuyez sur cmd + shift + p sur la machine mac et recherchez "Configurer les extraits d'utilisateur", puis créez un fichier et collez-le sous le code json. fournir le préfixe, le corps et la description. Référence: 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

J'ai écrit un script que vous pouvez créer vos propres extraits complexes. en utilisant simplement le fichier que vous souhaitez. vous n'avez donc pas besoin d'écrire le code source dans une chaîne ou un tableau de chaînes. https://github.com/banxi1988/vscode-snippets-ext-template

0
banxi1988