Extraits de code VS: l'outil le plus puissant pour booster votre productivité de codage

Écrivez plus de code avec moins de frappes

Tout le monde veut pouvoir produire plus de code en moins de frappes. Les fonctions de flèches en JavaScript sont devenues incroyablement populaires récemment - et elles ne vous font gagner que 6 caractères!

(function(){console.log('a')})() // 32 charachters(()=>{console.log('a')})() // 26 charachters

Mais il existe un meilleur moyen d'enregistrer la saisie - et cet article vous montrera l'outil pour le faire.

Extraits de code

Pendant des années, les gens ont utilisé des extraits de code pour gagner du temps - qu'il s'agisse de fonctions courantes, de structures de fichiers ou même de modèles pour des systèmes entiers. Ce n'est pas une nouvelle idée.

Le problème avec de nombreux systèmes existants est que ces extraits étaient souvent stockés dans des fichiers texte ou d'autres systèmes de fichiers et devaient être copiés et collés manuellement là où ils étaient nécessaires.

C'était parfait pour les gros extraits de code. Mais les one-liners étaient souvent plus rapides à taper que de rechercher le fichier, de le copier et de le coller.

L'étape suivante était des outils tels que TextExpander ou AutoHotKeys, où des séquences de touches spéciales pouvaient être configurées pour coller des extraits de code là où vous étiez en train de taper. Celles-ci sont excellentes et peuvent vous faire gagner beaucoup de temps… mais nous pouvons aller plus loin.

Extraits de code VS

VS Code a un système qui est plus puissant que même TextExpander ou AutoHotKeys. Ses extraits de code intégrés peuvent être configurés pour faire bien plus que simplement coller le code.

Avant de parler des fonctionnalités sophistiquées, nous allons apprendre à créer un extrait de code.

Dans VS Code, appuyez sur ctrl + shift + P pour ouvrir la palette de commandes et rechercher un extrait de code. La sélection de «Configurer les extraits de code utilisateur» vous présente une liste de langages de codage pour lesquels vous pouvez créer un extrait de code. Nous allons utiliser JavaScript.

Cela ouvre l'éditeur d'extraits de code. Un commentaire vous montre comment créer un extrait de code de base, mais nous allons créer le nôtre.

Cet extrait de code est ma ligne de code préférée. C'est un joli modèle pour la gestion des promesses.

const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);

Pour créer notre extrait, nous devons créer une nouvelle clé dans l'objet. Cette clé pointe vers un objet avec un prefix, bodyet description.

"insert handle function": { "prefix": "", "body": [], "description": ""}

Le préfixe est le texte que nous voulons entrer pour déclencher cet extrait de code. Vous devez vous assurer que cela est unique. L'appeler handledéclencherait l'extrait de code à chaque fois que vous appelez la fonction afin que nous puissions utiliser quelque chose comme promHandle.

Le corps est un tableau des lignes de l'extrait de code. Si vous avez plusieurs lignes de code, vous aurez plusieurs chaînes dans le tableau de corps. La description est ce qui sera affiché lorsque vous verrez la suggestion dans VS Code.

Lorsque tout cela est terminé, vous obtenez quelque chose comme ceci:

"insert handlefunction": { "prefix": "promHandle", "body": [ "const handle = prom => prom.then(res => [null, res]).catch(err => [err, null]);" ], "description": "inserting a 'handle' function"}

Une fois votre fichier d'extrait enregistré, lorsque vous commencez à taper, promhandlevous obtenez une nouvelle suggestion. La clé vers cela montre la description de l'extrait de code ainsi que la première ligne du code.

Vous pouvez désormais enregistrer des centaines de personnages en créant vos propres extraits. Mais il existe des fonctionnalités encore plus puissantes!

Points d'insertion d'onglets

Lorsque vous collez vos extraits, vous devez généralement ajouter des informations. Qu'il s'agisse de nommer une fonction ou de choisir les variables, vous pouvez définir des points dans votre code où vous devez saisir des données. Lorsque vous collez ces extraits, vous pouvez passer d'un point d'insertion à l'autre.

Pour ajouter un point d'insertion, il vous suffit d'ajouter $1pour le premier point, $2pour le second et ainsi de suite. C'est vraiment utile pour les fonctions où elles attendent un objet.

"sendMessage": { "prefix": "sendMessage", "body": [ "await botHelper.sendToUser({message$1, userID});" ], "description": "await sending a message using bot helper"},

Vous pouvez avoir plusieurs points de tabulation répartis dans le code, ce qui signifie que vous pouvez rapidement et facilement remplir votre extrait de code sans avoir à cliquer ou à appuyer sur la touche fléchée vers chaque point.

Extraits de code spécifiques à la langue

Lorsque nous avons ouvert l'éditeur d'extraits de code pour la première fois, une liste de langues nous a été présentée. Nous avons choisi JavaScript, mais vous auriez pu choisir l'une des 44 autres langues. L'avantage des extraits de code VS, c'est qu'ils peuvent être verrouillés sur un type de fichier spécifique.

Si vous écrivez un fichier HTML, vous n'obtiendrez pas tous vos extraits de code JavaScript ou Python. Cela signifie également que vous pouvez faire en sorte que le même préfixe produise différents extraits en fonction du type de fichier dans lequel vous travaillez actuellement! Mais ne vous inquiétez pas, vous pouvez toujours ajouter des extraits globaux si vous voulez pouvoir les utiliser dans n'importe quel type de fichier.

Extraits de site spécifiques

De la même manière que les extraits de code spécifiques à une langue, vous pouvez également créer des extraits de code spécifiques à un dossier. Cela peut être formidable lorsque la même fonction nommée fait une chose différente dans deux projets différents.

Sélectionnez simplement New Snippet file for '...'votre langue.

Créer plus d'extraits

Maintenant que vous connaissez les moyens puissants dont les extraits de code VS peuvent améliorer votre productivité, vous souhaitez probablement effectuer des charges. Malheureusement, ils peuvent être frustrants à créer. Heureusement, il existe deux solutions:

Générateur d'extraits de code

Snippet Generator est un site qui vous permet de coller du code et de le convertir facilement au format d'extrait de code.

Il est vraiment facile à utiliser et vous permet de créer rapidement des extraits que vous pouvez simplement copier et coller directement dans vos fichiers d'extraits. Il fonctionnera avec n'importe quelle langue et est entièrement gratuit.

Extensions d'extraits de code

Si vous utilisez un framework, tel que React ou Angular, il y a beaucoup d'extraits que vous allez vouloir créer. Heureusement, c'est un problème que d'autres personnes ont déjà rencontré, ils ont donc créé des bibliothèques d'extraits de code communs pour chaque framework.

La recherche snippetssur le marché des extensions VS Code produit des centaines de résultats que vous pouvez installer. Tout de React, Angular et Vue à ES6 JS, C # et PHP. Ceux-ci ont souvent une gamme complète d'extraits de code pour réduire considérablement le temps passé à taper.

Le seul inconvénient de ces extensions est que vous devrez apprendre quels sont les préfixes (déclencheurs), mais vous mémoriserez rapidement ceux que vous utilisez le plus.

Merci d'avoir lu cet article sur l'augmentation de votre productivité de codage avec VS Code Snippets. Si vous avez appris quelque chose, cliquez sur ce bouton clap? Et suivez-moi pour plus de conseils, astuces et tutoriels!