ATOM Éditeur Code Snippet: Tool de réutilisation de code efficace
Les extraits de code sont des blocs de code réutilisables qui peuvent rapidement insérer les fichiers du programme et sont la fonction principale de l'éditeur de texte Atom. Les fragments prédéfinis sont généralement fournis avec des packages d'atomes et une syntaxe linguistique.
Les extraits personnalisés peuvent être créés et définis dans le fichier ~/.atom situé dans votre dossier snippets.cson. Ils nécessitent des identificateurs de langue, des noms, du texte de déclenchement et du code corporel des fragments (onglets facultatifs).
Les extraits peuvent être utilisés dans tout langage de programmation pris en charge par l'atome, spécifiez simplement la portée correcte du langage lors de la définition du fragment. Ils peuvent contenir des variables et peuvent être utilisés pour insérer des blocs de code communs, gagner du temps et assurer la cohérence du code.
Les extraits de code sont des blocs de code communs que vous pouvez rapidement insérer des fichiers de programme. Ils sont très utiles et sont également la caractéristique principale de l'éditeur de texte Atom. Autrement dit, vous pouvez utiliser l'éditeur pendant des mois sans réaliser l'existence d'extraits de code ou expérimenter leur puissance! Les packages Atom et la syntaxe linguistique sont généralement livrés avec des extraits de code prédéfinis. Par exemple, démarrez ou ouvrez un nouveau fichier HTML, puis tapez IMG et appuyez sur l'onglet. Le code suivant apparaît:
<img src="" alt="" />
sera situé entre les citations d'attribut src. Appuyez à nouveau sur la touche Tab et le curseur se déplace vers la propriété alt. Appuyez sur la touche Tab pour la dernière fois et le curseur se déplacera à la fin de l'étiquette. Lorsque vous commencez à taper, le texte de déclenchement de l'extrait de code est indiqué par une flèche verte. Vous pouvez afficher tous les extraits de code définis du type de langue de fichier actuel en mettant le curseur n'importe où et en appuyant sur Alt-Shift-S. Faites défiler ou recherchez la liste pour trouver et utiliser des extraits de code spécifiques. Alternativement, ouvrez la liste des packages dans les paramètres et entrez la langue pour voir une liste de tous les types de syntaxe. Sélectionnez un et faites défiler la section de l'extrait de code pour afficher les déclencheurs et le code prédéfinis.
Comment créer votre propre extrait de code
Vous aurez vos propres blocs de code couramment utilisés qui peuvent être définis comme des extraits de code. La commande utile que j'utilise lors du débogage d'une application Node.js consiste à enregistrer l'objet en tant que chaîne JSON à la console:
console.log('%j', Object); ATOM a déjà un déclencheur prédéfini log pour console.log(); cependant, vous pouvez l'améliorer avec des extraits de code personnalisés. Les extraits de code personnalisés sont définis dans le fichier ~/.atom situé dans votre dossier snippets.cson. Sélectionnez Ouvrir votre extrait de code dans le menu Fichier pour le modifier. L'extrait de code nécessite les informations suivantes:
Aller à la fin de snippets.cson, tapez snip et appuyez sur Tab - Oui, il y a même un extrait de code qui peut vous aider à définir l'extrait de code! …
<img src="" alt="" />
Notez que CSON est une notation d'objet CoffeeScript. Il s'agit d'une syntaxe concise qui peut être mappée directement à JSON; Tout d'abord, vous avez besoin d'une chaîne de plage qui identifie la langue dans laquelle l'extrait de code peut être appliqué. Le moyen le plus simple de déterminer la portée est d'ouvrir la liste des packages dans les paramètres et de saisir "langue". Ouvrez le package de syntaxe requis et recherchez la définition de la "portée" près du haut.
La plage d'extrait de code dans snippets.cson doit également ajouter une période au début de la chaîne. Les gammes de langage Web populaires incluent:
.text.html.basic .source.css .source.sass .source.js .source.json .text.html.php .source.java .text.html.erb .source.python .text.plain Par conséquent, vous pouvez définir un extrait de code de journalisation JSON en utilisant la méthode suivante:
console.log('%j', Object); Une fois votre fichier snippets.cson enregistré, l'extrait de code prendra effet. Dans cet exemple:
.source.js (pour JavaScript) lj console.log('%j', Object); (cependant, nous avons ajouté un code de contrôle supplémentaire comme indiqué ci-dessous). Les citations simples du corps doivent être échappées avec une barre oblique inverse (). Les arrêts d'onglet sont définis à l'aide d'un panneau en dollars suivi d'un nombre, c'est-à-dire 1 $, 2 $, 3 $, etc. 1 $ est la première position d'onglet où le curseur apparaît. Lorsque la touche d'onglet est enfoncée, le curseur se déplacera à 2 $, etc. L'arrêt d'onglet ci-dessus 1 $ a été défini à l'aide du texte par défaut pour rappeler ou inviter l'utilisateur: ${1:Object}. Lorsque vous utilisez un extrait de code, Object est sélectionné dans console.log('%j', Object);, il peut donc être modifié en nom d'objet approprié.
D'autres extraits de code peuvent être ajoutés au bas du fichier snippets.cson. Si vous avez besoin de deux extraits de code ou plus de la même langue, ajoutez-les à la section de portée correspondante. Par exemple, vous pouvez créer un autre extrait de code JavaScript dans la portée de .source.js pour enregistrer la longueur de n'importe quel tableau:
'.source.js':
'Snippet Name':
'prefix': 'Snippet Trigger'
'body': 'Hello World!' Veuillez noter qu'il y a deux balises ${1:array}. Lorsque console.log('array length', array.length); apparaît, vous verrez deux curseurs et les deux instances de array seront mises en évidence - vous tapez simplement le nom du tableau une fois et les deux changeront!
Extrait de code multi-lignes
Si vous vous sentez plus aventureux, vous pouvez utiliser trois citations doubles "" "pour définir un extrait de code multi-ligne plus long au début et à la fin du code corporel. Cet extrait de code génère un 2 × 2 avec une seule ligne d'en-tête .
<img src="" alt="" />
L'indentation du code à l'intérieur du corps de l'extrait de code n'a aucun effet sur la définition du CSON, mais je vous recommande de le mettre en dehors de la définition du corps pour une plus grande lisibilité. Je vous souhaite une bonne écriture de l'extrait de code! Si vous êtes nouveau dans l'atome, vous devez également vous référer à 10 modules complémentaires ATOM essentiels pour les packages recommandés.
FAQ sur l'utilisation des extraits de code dans Atom
La création de nouveaux extraits de code dans Atom est un processus simple. Tout d'abord, vous devez ouvrir le fichier de l'extrait de code en allant dans le menu du fichier puis à l'extrait de code. Cela ouvrira un fichier .cson où vous pouvez définir l'extrait de code. Chaque extrait de code commence par une ligne .source qui spécifie le langage auquel il s'applique, suivi du nom de l'extrait de code en guillemets. Vous définissez ensuite le préfixe qui déclenchera l'extrait de code et le corps de l'extrait de code lui-même. Le corps peut être plusieurs lignes et utiliser la syntaxe ${1:default_text} pour spécifier des onglets.
Pour utiliser des extraits de code dans Atom, vous tapez simplement le préfixe défini pour l'extrait de code et appuyez sur la touche "Tab". Cela insère le corps de l'extrait de code au curseur. Si votre extrait de code a des onglets, vous pouvez utiliser la touche "Tab" pour se déplacer entre elles et entrer le texte souhaité.
Oui, vous pouvez utiliser des extraits de code pour tout langage de programmation pris en charge par Atom. Il vous suffit de spécifier la portée correcte de la langue lors de la définition de l'extrait de code. Par exemple, pour JavaScript, vous utiliserez .source.js et pour Python, vous utiliserez .source.python.
Si vous souhaitez partager votre extrait de code avec d'autres, vous pouvez simplement partager votre fichier snippets.cson. Ce fichier contient toutes vos définitions d'extrait de code et peut être trouvé dans votre répertoire de configuration atome. Alternativement, vous pouvez créer un package avec des extraits de code et le publier dans le référentiel du package Atom.
Absolument! Les extraits de code sont un excellent moyen d'insérer des blocs de code communs. Vous pouvez définir un extrait pour tout extrait que vous tapez fréquemment, puis l'insérer avec quelques clés. Cela peut vous faire gagner beaucoup de temps et aider à assurer la cohérence de votre code.
Pour modifier un extrait de code existant dans Atom, vous devez ouvrir le fichier snippets.cson et trouver l'extrait de code pour modifier. Vous pouvez ensuite modifier le préfixe, le corps ou la portée au besoin. Lorsque vous avez terminé, n'oubliez pas d'enregistrer le fichier pour appliquer les modifications.
Oui, vous pouvez utiliser des variables dans votre extrait de code. La variable est représentée par ${1:default_text}, où "1" est l'onglet et "Default_text" est le texte par défaut à insérer. Vous pouvez utiliser des variables pour créer des espaces réservés dans des extraits de code afin que vous puissiez rapidement remplir ces espaces réservés lors de l'insertion des extraits de code.
Pour supprimer un extrait de code dans Atom, vous devez ouvrir le fichier snippets.cson et trouver l'extrait de code à supprimer. Ensuite, supprimez simplement la ligne de code qui définit l'extrait de code et enregistrez le fichier. L'extrait de code sera supprimé immédiatement.
Bien que l'atome n'ait pas de fonctionnalité intégrée pour importer des extraits de code à partir d'autres éditeurs, vous pouvez copier manuellement des définitions d'extraits à partir d'autres éditeurs et les coller dans le fichier snippets.cson dans l'atome. Vous devrez peut-être modifier un peu la syntaxe pour correspondre à la syntaxe de l'extrait de code d'ATOM.
Oui, vous pouvez utiliser des extraits de code dans les fonctionnalités et remplacer les fonctionnalités d'ATOM. Lorsque vous ouvrez le panneau Rechercher et remplacer, vous pouvez saisir un extrait de code dans le champ Remplacer. Lorsque vous effectuez une opération de remplacement, l'extrait de code est inséré dans l'emplacement du texte trouvé.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Quelles sont les plateformes de vidéos courtes ?
Pourquoi l'ordinateur redémarre-t-il automatiquement ?
Comment utiliser la monnaie numérique
Étapes de création du projet SpringBoot
Le jeton de connexion n'est pas valide
Tendances récentes du marché de Ripple
Caractéristiques de l'outil de téléchargement raysource
Comment utiliser la fonction de classement
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
