Comment ajouter des extraits de code personnalisés à Atom

Ce n'est pas une coïncidence si Atom, l'éditeur de code source créé par Github, est populaire dans la communauté du développement web. Il est non seulement facilement extensible avec des milliers de paquets Atom, et possède un large support de langue, mais presque toutes ses parties sont personnalisables par l'utilisateur.

En tirant parti de la fonctionnalité Atom's Snippets, vous pouvez rendre votre workflow de codage plus productif, car en réutilisant des extraits de code récurrents, vous pouvez réduire la part répétitive de votre travail. Dans cet article, je vais vous montrer comment utiliser les extraits de code intégrés d'Atom et créer vos propres extraits personnalisés .

Utiliser des extraits de code intégrés

Par défaut, Atom est livré avec des extraits de code intégrés, chacun d'entre eux étant lié à une portée appartenant à un certain type de fichier. Par exemple, si vous travaillez sur un fichier avec l'extension .js, seuls les extraits appartenant à la portée JavaScript seront disponibles pour ce fichier.

Pour voir tous les extraits disponibles pour votre type de fichier actuel, appuyez sur Alt + Maj + S. Si vous choisissez un extrait dans la liste déroulante et que vous cliquez dessus, Atom insèrera l'extrait complet dans votre éditeur sans plus de tracas.

Si vous connaissez déjà les options, vous n'avez pas nécessairement à charger la liste entière. Lorsque vous commencez à taper, Atom affiche une boîte de résultats de saisie semi-automatique, qui contient les extraits de code disponibles appartenant à la portée définie et la chaîne que vous avez saisie jusqu'à présent.

Par exemple, si vous tapez le caractère h dans un fichier .html, une liste déroulante avec tous les extraits HTML intégrés commençant par h apparaîtra.

En cliquant sur une option, Atom va coller la balise HTML complète (par exemple

), et positionnez le curseur dans les balises de début et de fin .

Si vous ne voulez pas vous tracasser avec la liste déroulante, vous pouvez obtenir le même résultat en tapant h1, et en appuyant sur Tab ou Entrée - ces deux clés insèrent l'extrait de code complet appartenant au préfixe de l'extrait.

Ajouter vos extraits de code personnalisés

1. Trouvez le fichier de configuration

Pour ajouter vos propres extraits de code personnalisés à Atom, vous devez d'abord trouver le fichier de configuration appelé snippets.cson qui est un fichier de notation d'objet CoffeeScript .

Cliquez sur le menu File > Snippets... dans la barre supérieure, et Atom ouvrira le fichier snippets.cson auquel vous pourrez ajouter vos propres extraits personnalisés.

2. Trouver la bonne portée

Vous aurez besoin de quatre choses pour ajouter votre extrait personnalisé:

1. Le nom de la portée
2. Le nom de l'extrait
3. Le préfixe qui va fonctionner comme le handle de l'extrait
4. Le corps de l'extrait

Le nom, le préfixe et le corps de l'extrait (2-4) dépendent uniquement de vous. Toutefois, vous devez trouver le nom de l'étendue (1) avant d'ajouter vos extraits personnalisés.

Pour trouver la portée dont vous avez besoin, cliquez sur le menu File > Settings dans la barre de menu supérieure, puis trouvez l'onglet Packages parmi les paramètres. Ici, lancez une recherche de la portée dont vous avez besoin, par exemple si vous souhaitez ajouter des extraits de code au langage HTML, tapez HTML dans la barre de recherche.

Cliquez sur le package de support linguistique de la langue choisie et ouvrez ses propres paramètres. Parmi les paramètres Grammar, vous pouvez trouver rapidement le nom de la portée, comme vous pouvez le voir sur la capture d'écran ci-dessous.

Voici quelques champs d'application que vous pouvez utiliser dans vos projets Atom:

• Texte .text.plain : .text.plain
• HTML: .text.html.basic
• CSS: .source.css
• Sass: .source.sass
• MOINS: .source.css.less
• JavaScript: .source.js
• PHP: .text.html.php
• Python: .source.python
• Java: .source.java

N'oubliez pas que vous devrez ajouter un point ( . ) Devant le nom de la portée afin de l'utiliser dans le fichier snippets.cson .

3. Créer des extraits de code d'une seule ligne

Pour créer un extrait de code d' une seule ligne, vous devez ajouter l'étendue, le nom, le préfixe et le corps de l'extrait au fichier snippets.cson, en utilisant la syntaxe suivante:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 ' 

Cet exemple d'extrait ajoute un

tag avec la classe widget-title dans la portée HTML. Vous pouvez ajouter n'importe quel autre extrait de code à ligne unique à votre éditeur Atom en suivant cette syntaxe.

Après avoir enregistré le fichier de configuration, à chaque fois que vous tapez le préfixe & appuyez sur la touche Tab, Atom va coller le corps de l'extrait d'appartenance dans votre éditeur de code. Le nom de l'extrait (dans l'exemple Widget Title ) s'affichera dans la zone de saisie semi-automatique.

4. Créer des extraits de code multiligne

Les extraits de code multiligne utilisent une syntaxe un peu différente. Vous devez ajouter les mêmes données que pour les extraits de ligne unique: la portée, le nom, le préfixe et le corps de l'extrait.

Ce qui est différent ici, c'est que vous devez placer le corps de l'extrait dans une paire de """ (trois doubles guillemets) .

 '.text.html.basic': 'Image Link': 'préfixe': 'iml' 'body': "" " 
 
 "" " 

Si vous souhaitez ajouter plusieurs fragments personnalisés à la même portée, ajoutez le nom de la portée une seule fois, puis répertoriez les extraits un par un:

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 '' Image Link '': 'préfixe': 'iml' 'body': "" " 
 
 "" " 

5. Ajouter des tabulations

Vous pouvez également faciliter l'utilisation de vos extraits de code personnalisés en ajoutant des taquets de tabulation au corps de l'extrait. Les taquets de tabulation indiquent les endroits où l'utilisateur peut naviguer en utilisant la touche de tabulation. Avec les taquets de tabulation, vous pouvez économiser le temps nécessaire à la navigation dans le texte.

Vous pouvez ajouter des tabulations en utilisant la syntaxe $1, $2, $3, ... Atom positionnera le curseur à l'endroit où il trouve $1, alors vous pouvez passer à $2 avec la touche Tab, puis à $3, et ainsi de suite.

 '.text.html.basic': 'Image Link': 'préfixe': 'iml' 'body': "" " 
 
 "" " 

6. Ajouter des paramètres facultatifs

Atom vous permet d' ajouter des informations supplémentaires à vos extraits en utilisant des paramètres facultatifs . Cette fonctionnalité peut être utile si quelqu'un d'autre utilise également votre éditeur et que vous voulez lui faire connaître le but de l'extrait, ou si vous avez des extraits personnalisés si compliqués que vous avez besoin d'ajouter des notes.

Les valeurs des paramètres facultatifs sont affichées dans la zone de résultats de saisie semi-automatique qui s'affiche lorsque vous commencez à taper un préfixe. Dans l'exemple ci-dessous, j'ai ajouté une description & un lien More... vers l'extrait personnalisé précédent de Widget Title :

 '.text.html.basic': 'Widget Title': 'prefix': 'wti' 'body': ' 
 '' description ':' Vous pouvez ajouter un titre de widget avec cet extrait à votre widget sidebar. ' 'descriptionMoreURL': 'http://hongkiat.com' 

Lorsque l'utilisateur commence à taper le préfixe wti, les informations supplémentaires (description + lien) seront affichées en bas de la boîte de résultats de saisie semi-automatique. Jetez un coup d'œil aux autres paramètres facultatifs que vous pouvez utiliser pour ajouter des informations supplémentaires à vos extraits personnalisés.