Page d'accueil » Codage » Comment ajouter des extraits de code personnalisés à Atom
Comment ajouter des extraits de code personnalisés à Atom
Ce n'est pas une coïncidence Atome, L'éditeur de code source créé par Github est populaire dans la communauté du développement Web. ce n'est pas seulement facilement extensible avec des milliers de forfaits Atom, et a un support de langue large, mais presque tout est personnalisable par l'utilisateur.
En tirant parti des atomes Snippets caractéristique, vous pouvez rendre votre flux de travail de codage plus productif, comme par réutilisation d'extraits de code récurrents vous pouvez réduire la partie répétitive de votre travail. Dans ce post, je vais vous montrer comment vous pouvez utiliser les extraits de code intégrés à Atom, et créez vos propres extraits personnalisés.
Utiliser des extraits de code intégrés
Par défaut, Atom est livré avec extraits de code intégrés, dont chacun est lié à une portée appartenant à un certain type de fichier. Par exemple, si vous travaillez sur un fichier avec .js extension, seuls les extraits appartenant à la portée de JavaScript seront disponibles pour ce fichier.
À voir tous les extraits disponibles pour votre type de fichier actuel, appuyez sur Alt + Maj + S. Si vous choisissez un extrait de code dans la liste déroulante et que vous cliquez dessus, Atom insérera l'extrait complet dans votre éditeur sans autre problème..
Si vous connaissez déjà les options, vous n'avez pas nécessairement à charger la liste complète. Lorsque vous commencez à taper, Atom apparaît Boîte de résultats à complétion automatique up, qui contient les extraits de code disponibles appartenant à une certaine portée et la chaîne que vous avez saisie jusqu'à présent.
Par exemple, si vous tapez le h personnage dans un .html fichier, 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 positionner le curseur entre les balises de départ et de fermeture.
Si vous ne voulez pas vous embêter 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 touches insérer l'extrait de code complet appartenant au préfixe de l'extrait.
Ajout de vos extraits de code personnalisés
1. Trouver le fichier de configuration
Pour ajouter vos propres extraits de code personnalisés à Atom, vous devez d'abord rechercher le fichier de configuration appelé snippets.cson c'est un Notation d'objets CoffeeScript fichier.
Clique sur le Fichier> Extraits de code… menu dans la barre du haut, et Atom ouvrira le snippets.cson fichier auquel vous pouvez ajouter vos propres extraits personnalisés.
2. Trouver la bonne portée
Tu auras besoin de quatre choses afin d'ajouter votre extrait personnalisé:
le nom de la portée
le nom de l'extrait
le préfixe cela fonctionnera comme la poignée de l'extrait
le corps de l'extrait
Le nom, le préfixe et le corps de l’extrait (2-4) dépendent uniquement de vous, mais vous devez trouver le nom de la portée (1) avant d'ajouter vos extraits personnalisés.
Pour trouver la portée dont vous avez besoin, cliquez sur le bouton Fichier> Paramètres menu dans la barre de menus supérieure, puis recherchez le Paquets onglet parmi les paramètres. Ici, lancez une recherche sur l'étendue dont vous avez besoin, par exemple si vous souhaitez ajouter des extraits de code au langage HTML, tapez HTML dans la barre de recherche.
Clique sur le paquet de support linguistique de la langue choisie et ouvrez ses propres paramètres. Parmi les Paramètres de grammaire, vous pouvez rapidement trouver le nom de l'oscilloscope, comme vous pouvez le voir sur la capture d'écran ci-dessous.
Voici quelques domaines que vous voudrez peut-être utiliser dans vos projets Atom:
Texte brut: .texte simple
HTML: .text.html.basic
CSS: .source.css
Toupet: .source.sass
MOINS: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
Java: .source.java
N'oubliez pas que vous aurez besoin de ajouter un point (.) devant le nom de la portée afin de l'utiliser dans le snippets.cson fichier.
3. Créer des extraits de code sur une seule ligne
Créer un extrait de code sur une seule ligne, vous devez ajouter la portée, le nom, le préfixe et le corps de l'extrait à l'élément snippets.cson fichier, en utilisant la syntaxe suivante:
'.text.html.basic': 'Titre du widget': 'Préfixe': 'wti "body': ''
Cet exemple d'extrait ajoute un tag avec le Titre du Widget classe à la portée HTML. Vous pouvez ajouter tout autre extrait de code d'une seule ligne à votre éditeur Atom en respectant cette syntaxe..
Après avoir enregistré le fichier de configuration, chaque fois que vous tapez le préfixe et appuyez sur la touche Tab, Atom collera le corps de l'extrait d'appartenance dans votre éditeur de code. Le nom de l'extrait de code (dans l'exemple Titre du Widget) sera affiché dans la boîte de résultats de saisie semi-automatique.
4. Créer des extraits de code multilignes
Extraits de code multilignes utilisez 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 d'extrait dans une paire de "" " (trois doubles guillemets).
'.text.html.basic': 'Lien de l'image': 'préfixe': 'iml "body':" "" "" "
Si vous voulez ajouter plus d'un extrait personnalisé à la même portée, ajouter le nom de la portée juste une fois, puis listez les extraits un par un:
Vous pouvez faciliter l'utilisation de vos extraits de code personnalisés en ajoutant onglet s'arrête au corps de l'extrait. Les taquets de tabulation indiquent les endroits où l'utilisateur peut naviguer à l'aide de la touche de tabulation. Avec les tabulations, vous pouvez économiser le temps nécessaire à la navigation dans le texte..
Vous pouvez ajouter des taquets de tabulation en utilisant le 1 $, 2 $, 3 $,… syntaxe. Atom va positionner le curseur à l'endroit qu'il trouve 1 $, alors vous pouvez sauter à 2 $ avec la touche Tab, puis à 3 $, etc.
'.text.html.basic': 'Lien de l'image': 'préfixe': 'iml "body':" "" "" "
6. Ajouter des paramètres facultatifs
Atom vous permet de ajouter des informations supplémentaires à vos extraits en utilisant paramètres optionnels. Cette fonctionnalité peut être utile si quelqu'un d'autre utilise également votre éditeur et que vous souhaitez lui indiquer l'objectif de l'extrait de code ou si vous avez des extraits de code personnalisés si complexes que vous devez leur ajouter des notes..
Les valeurs des paramètres optionnels sont affiché dans la boîte de résultats de saisie semi-automatique cela se produit lorsque vous commencez à taper un préfixe. Dans l'exemple ci-dessous, j'ai ajouté une description et un Plus… lien vers le précédent Titre du Widget extrait personnalisé:
'.text.html.basic': 'Titre du widget': 'Préfixe': 'wti "body': '"description": "Vous pouvez ajouter un titre de widget avec cet extrait à votre widget de barre latérale." descriptionMoreURL ':' http://hongkiat.com '
Lorsque l'utilisateur commence à taper le préfixe wti, les informations supplémentaires (description + lien) seront affichées au bas de la zone de résultats de la saisie semi-automatique. Regardez le autres paramètres optionnels vous pouvez utiliser pour ajouter des informations supplémentaires à vos extraits personnalisés.
