Comment ajouter des extraits de code personnalisés dans VSCode?


100

Est-il possible d'ajouter des extraits de code personnalisés dans Visual Studio Code? Et si oui, comment? VSCode est basé sur Atom, donc cela devrait être possible.



2
vous pouvez également accéder à Préférences>
Extraits de code

Existe-t-il vraiment une relation entre VS Code en tant qu'Atom autre que le fait qu'ils utilisent tous les deux Electron sous le capot?
skelliam

Utilisez le service codessnippet pour ce faire. Vous pouvez créer des extraits personnalisés, modifier et synchroniser avec codessnippet cli tous les extraits à la fois, en les extrayant simplement du serveur!
user13428826

Je souhaite ajouter un lien vers une page Web dans la description, est-ce que quelqu'un sait comment le faire?
janvier

Réponses:


116
  1. Appuyez sur> shift+ command+ pet saisissez des extraits
  2. Sélectionnez Préférences: Ouvrez les extraits d'utilisateur
  3. Choisissez le type de langue pour lequel vous souhaitez ajouter l'extrait de code personnalisé
  4. vscode a des commentaires pour expliquer comment ajouter un extrait de code , comme décrit sur:> vsdoc

Disons que nous voulons ouvrir des extraits personnalisés pour la langue GO. Ensuite, nous pouvons faire:

  1. Frapper> command+p
  2. Tapez: go.json + enterEt vous arrivez sur la page d'extrait de code personnalisé

Les extraits de code sont définis au format JSON et stockés dans un fichier .json par utilisateur (languageId). Par exemple, les extraits de code Markdown sont placés dans un fichier markdown.json.


Mettre à jour les nouveaux outils:
site du générateur d'extraits de code: https://snippet-generator.app/


3
Le générateur d'
extraits de code

68

option - 1 Il existe un plugin VsCode appelé: snippet creator .

Après l'avoir installé, il ne vous reste plus qu'à:

  1. Sélectionnez le code dont vous souhaitez en faire un extrait.
  2. Faites un clic droit dessus et sélectionnez "Palette de commandes" (ou Ctrl+ Shift+ P).
  3. Écrivez «Créer un extrait».
  4. Choisissez le type de fichiers à regarder pour déclencher votre raccourci d'extrait de code.
  5. Choisissez un raccourci d'extrait de code.
  6. Choisissez un nom d'extrait.

option - 2 consultez ce site Web . vous pouvez générer des extraits pour vs code, sublime text et atom.

Une fois l'extrait de code généré sur ce site. Accédez au fichier d'extrait de code IDE respectif et collez-le. Par exemple, pour un extrait de code JS dans le code VS, allez dans Fichier-> préférence-> extrait d'utilisateur, puis il ouvre le fichier javascript.json, puis collez l'extrait de code du site ci-dessus à l'intérieur et nous sommes prêts à partir.


8
C'est un outil tellement génial! Je ne pouvais pas supporter d'écrire un extrait de code standard HTML personnalisé devant citer et échapper chaque ligne, donc c'est vraiment la réponse que je cherchais.
nabrown

3
Sérieusement, bouée de sauvetage ici.
JeremyW

Wow c'est un excellent outil fonctionnant parfaitement. Doit être marqué comme bonne réponse
StefanBob

Le lien du générateur d'extraits de code est rompu. Veuillez suivre ce lien: snippet-generator.app
Sandip Subedi

1
pourquoi avez-vous écrit step1 et step2? cela ressemble plus à option1 et option2, ou sont-ils liés?
Xsmael il y a

26

À partir de la version 0.10.6, vous pouvez ajouter des extraits de code personnalisés. Lisez la documentation sur la création de vos propres extraits . Vous pouvez trouver / créer des extraits de code personnalisés en plaçant le fichier json dans C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. Par exemple, un extrait de code javascript personnalisé serait dans un\snippets\javascript.json

Vous pouvez également publier vos extraits, ce qui est également une fonctionnalité très intéressante. John Papa a créé un joli extrait angulaire + dactylographié que vous pouvez télécharger en tant qu'extension sur le marché .

Voici un exemple d'extrait de code pris pour la documentation sur une boucle javascript for:

"For Loop": {
    "prefix": "for",
    "body": [
        "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
        "\tvar ${element} = ${array}[${index}];",
        "\t$0",
        "}"
    ],
    "description": "For Loop"
},

  • For Loop est le nom de l'extrait
  • prefixdéfinit un préfixe utilisé dans la liste déroulante IntelliSense. Dans ce cas pour.
  • bodyest le contenu de l'extrait. Les variables possibles sont:
    • 1 $, 2 $ pour les tabulations
    • $ {id} et $ {id: label} et $ {1: label} pour les variables
    • Les variables avec le même identifiant sont connectées.
  • description est la description utilisée dans la liste déroulante IntelliSense

6
Ils ont vraiment besoin d'une sorte de syntaxe littérale de chaîne multiligne ou d'un moyen d'extraire le corps dans un fichier séparé. Citer et échapper à chaque ligne est fou.
Mark Wilbur

Désolé pour le vote contre cette réponse, c'était un clic voyou 🙄
Giles Butler

16

Vous pouvez consulter cette vidéo pour un court tutoriel rapide

https://youtu.be/g1ouTcFxQSU

Allez dans Fichier -> Préférences -> Extraits d'utilisateur . Sélectionnez votre langue préférée.
Tapez maintenant le code suivant pour créer un extrait de boucle for:

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

Vous avez terminé.
Tapez "pour" dans l'éditeur et utilisez la première prédiction.

RACCOURCI--

  1. installez l' extension Snippet-creator .
  2. Mettez en surbrillance le code dont vous avez besoin pour créer l'extrait.
  3. appuyez sur ctrl+shift + Pet tapez "Créer un extrait" sur 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 saisissez la description de l'extrait.
    Vous êtes maintenant prêt à partir.
    Tapez le raccourci de l'extrait de code dans l'éditeur que vous avez entré à l'étape 4, puis sélectionnez le
    prédiction (si aucune prédiction ne vient, appuyez sur ctrl + espace) qui vient en premier.

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

Remarque: allez dans File-> Preferences-> User Snippets. Sélectionnez ensuite la langue dans laquelle vous avez
créé l'extrait. Vous y trouverez l'extrait.


9

Il existe un plug-in VsCode appelé: snippet creator .

Après l'avoir installé, il ne vous reste plus qu'à:

  1. Sélectionnez le code dont vous souhaitez en faire un extrait.
  2. Faites un clic droit dessus et sélectionnez "Palette de commandes" (ou Ctrl+ Shift+P).
  3. Écrivez «Créer un extrait».
  4. Choisissez le type de fichiers à regarder pour déclencher votre raccourci d'extrait de code.
  5. Choisissez un raccourci d'extrait de code.
  6. Choisissez un nom d'extrait.

C'est tout ..

Remarque: si vous souhaitez modifier vos extraits, vous les trouverez dans [fileType] .json
Exemple: Ctrl+ P, puis sélectionnez "javascript.json"


5

Vous pouvez ajouter des scripts personnalisés, allez à File --> Preferences --> User Snippets. Sélectionnez votre langue préférée.

Si vous choisissez Javascript, vous pouvez voir le script personnalisé par défaut pour console.log(' ');comme ceci:

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},

5

J'ai essayé d'ajouter des extraits dans javascriptreact.json mais cela n'a pas fonctionné pour moi.

J'ai essayé d'ajouter des extraits dans la portée mondiale, et cela fonctionne comme un charme.

FILE --> Preferences --> User snippets

ici sélectionnez New Global Snippets File, donnez le nom javas criptreact.code-snippets.

Pour les autres langues, vous pouvez nommer [your_longuage] .code-snippets

entrez la description de l'image ici


4

Il s'agit d'une fonctionnalité non documentée pour le moment mais arrive bientôt. Il existe un dossier dans lequel vous pouvez les ajouter et ils apparaîtront, mais il peut changer (il n'est pas documenté pour une raison).

Le meilleur conseil est de l'ajouter au site uservoice et d'attendre sa fin. Mais ça arrive.



0

Si vous préférez ne pas écrire vos extraits en JSON, consultez Snipster . Il vous permet d'écrire des extraits comme vous écririez le code lui-même - sans avoir à mettre chaque ligne entre guillemets, à échapper des caractères, à ajouter des méta-informations, etc.

Il vous permet également d' écrire une fois, de publier n'importe où . Vous pouvez donc utiliser votre extrait de code dans VS Code, Atom et Sublime, ainsi que d'autres éditeurs à l'avenir. Plus d'infos ici .


0

Ce n'est peut-être pas une vraie réponse (comme certains l'ont répondu ci-dessus), mais si vous souhaitez créer des extraits de code personnalisés pour d'autres personnes, vous pouvez créer des extensions à l'aide de yeoman et npm (qui par défaut vient avec NodeJS). REMARQUE: il s'agit uniquement de créer des extraits de code pour les autres systèmes. Mais cela fonctionne aussi pour vous! Sauf que vous avez besoin de code JS pour tout.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.