Trois astuces de l'éditeur Atom pour vous aider à apprendre le code plus rapidement !

J'ai récemment fait du mentorat avec l'organisation Ladies Learning Code et c'était génial ! Aider les gens à acquérir de nouvelles compétences et partager ces "aha!" moments avec de nouveaux apprenants est un sentiment assez génial.

Après avoir été mentor lors d'un événement d'apprentissage, je pense souvent à des moyens d'atténuer certains des goulots d'étranglement pour les étudiants. Des outils comme les éditeurs de texte ne devraient pas vous empêcher d'acquérir de nouvelles compétences. Ainsi, après ce dernier événement, j'ai fini par écrire trois conseils lors de l'utilisation d' Atom pour les étudiants, ou n'importe qui vraiment. J'espère qu'ils vous aideront !

1. Enregistrer automatiquement lors du changement de fenêtre

Nous savons tous que nous devrions « épargner tôt, épargner souvent », n'est-ce pas ? Cependant, parfois, nous oublions puis essayons de comprendre pourquoi les modifications de code que nous venons d'apporter ne s'affichent pas ! Voici une astuce pour qu'Atom enregistre automatiquement votre travail à chaque fois que vous changez de fenêtre sur votre ordinateur, comme changer pour actualiser votre projet dans le navigateur Chrome !

Configurons Atom pour enregistrer automatiquement votre travail.

• Si vous êtes sur Mac , allez dans Atom > Preferences > Packages
• Si vous êtes sous Windows , allez dans File > Settings > Packages
• Si vous êtes sous Linux , allez dans Edit > Preferences > Packages

À partir de là, vous pouvez utiliser le filtre pour rechercher le package, "enregistrement automatique". Vous devriez voir quelque chose comme ceci :

Allez-y et cliquez sur le bouton Enable . Désormais, chaque fois que vous changerez de fenêtre sur votre ordinateur, Atom enregistrera automatiquement vos dernières modifications ! Productivité améliorée ! 💯

2. Tapez moins avec les extraits de code

Les extraits de code sont un excellent moyen de vous faire gagner du temps en tapant moins. Chaque extrait se compose de petits morceaux de code reproductibles et, lorsqu'ils sont utilisés dans votre projet, ils aident à remplir les parties uniques. Par exemple, si vous avez besoin d'ajouter un nouveau point d'arrêt CSS pour votre site Web Responsive Design, vous devrez taper ceci :

@media ( max - width : [ break point ]px) { }

C'est beaucoup à retenir et la syntaxe exacte peut être délicate. Utilisons un extrait pour bien faire les choses du premier coup !

Il y a quelques morceaux de texte pour créer un extrait.

1. La première partie est le type de fichier dans lequel vous utiliserez l'extrait de code. Pour l'exemple de point d'arrêt, vous l'ajouterez à vos fichiers CSS. Ainsi, la première ligne de l'extrait sera 'source.css': . Cela indique à Atom de n'utiliser l'extrait que dans les fichiers CSS.
2. Ensuite, donnons à l'extrait une étiquette . Lorsque vous commencez à taper dans le fichier CSS, Atom affiche une liste d'extraits disponibles à utiliser. Appelons l'extrait, "Break Point !" Une fois le texte de l'étiquette décidé, la deuxième ligne de l'extrait de code sera 'Break Point!': .
3. Ajoutons maintenant le texte réel que nous allons taper afin qu'Atom sache quand insérer l'extrait de code. Pour simplifier les choses, ajoutons cette troisième ligne à notre extrait, 'prefix': 'breakpoint' . Avec cela en place, nous pouvons taper "point d'arrêt" et Atom affichera l'extrait dans la liste à choisir.
4. La dernière partie de l'extrait est le code qui est inséré dans vos fichiers CSS. Ceci est ajouté à la partie 'body': de l'extrait de code. Je vais montrer cette partie dans l'extrait final ci-dessous, mais ce qu'il est important de savoir, ce sont les bits qui ressemblent à $1 et $2 . A quoi servent-ils ? Ceux-ci représentent des taquets de tabulation . Notre curseur de clavier suivra les taquets de tabulation, dans l'ordre spécifié, ce qui facilitera le remplissage du reste de l'extrait de code. Après avoir rempli le premier taquet de tabulation, la valeur max-width maximale, appuyez simplement sur la touche Tab pour passer au taquet de tabulation suivant. À partir de là, vous pouvez facilement ajouter le CSS qui vous aidera à styliser votre site Web lorsque ce point d'arrêt sera atteint.

L'extrait terminé

Voici à quoi ressemble l'extrait final :

'.source.css' : 'Break Point!' : 'prefix' : 'breakpoint' 'body' : """ @media (max-width: $1) { $2 } """

Maintenant, toutes les pièces sont réunies pour former notre "Point de rupture !" fragment. Il ne reste plus qu'à ajouter l'extrait de code à Atom.

• Si vous êtes sur un Mac , allez dans Atom > Snippets
• Si vous êtes sous Windows , allez dans File > Snippets de code
• Si vous êtes sous Linux , allez dans Edit > Snippets de code

Allez-y et copiez le code d'extrait ci-dessus dans votre fichier Snippets et enregistrez. Maintenant, lorsque vous commencez à taper "point d'arrêt" dans un fichier CSS, un menu devrait apparaître avec notre extrait intitulé "Point d'arrêt !" Appuyez sur la touche Tab pour insérer l'extrait et remplissez le reste à l'aide des taquets de tabulation pratiques !

Phew! J'admets que la configuration de votre premier extrait est un peu de travail, mais cela en vaut vraiment la peine pour économiser toute la saisie que vous auriez à faire à l'avenir ! 👍

En savoir plus sur les extraits de code sur la page de manuel Atom Snippets .

3. Copiez et collez les chemins d'accès aux fichiers

Lorsque vous travaillez avec les fichiers de votre projet, il peut être un peu difficile d'obtenir le bon chemin d'accès à un fichier. Par exemple, pour définir une image d'arrière-plan dans votre fichier CSS, vous devez saisir le chemin relatif du document CSS au fichier image dans votre projet. Combien de fois avez-vous actualisé votre navigateur pour ne voir votre image nulle part sur le site ? Frustrant, je sais.

Voici un package Atom qui aide dans cette situation : ⚛️ tree-view-copy-relative-path .

Une fois ce package installé, il vous suffit de cliquer avec le bouton droit sur votre fichier image dans l'arborescence du projet, de cliquer sur "Copier", puis de "Coller" le chemin d'accès au fichier directement dans votre code CSS. Beaucoup plus facile!

Installation des packages Atom

Voici comment installer le package.

• Si vous êtes sur Mac , allez dans Atom > Preferences > Install
• Si vous êtes sous Windows , allez dans File > Settings > Install
• Si vous êtes sous Linux , allez dans Edit > Preferences > Install

À partir de là, vous pouvez utiliser le filtre pour rechercher le package "tree-view-copy-relative-path". Vous devriez voir quelque chose comme ceci :

Après avoir cliqué sur le bouton Install , vous devriez maintenant pouvoir cliquer avec le bouton droit sur un fichier dans votre arborescence de projet dans la barre de gauche et voir une option "Copier le chemin relatif" dans le menu contextuel. Maintenant, il ne vous reste plus qu'à coller le chemin dans l'éditeur de code et le tour est joué ! 💪

---

J'espère que ces quelques conseils sur l'éditeur Atom vous seront utiles la prochaine fois que vous travaillerez sur un projet ou que vous apprendrez de nouvelles compétences lors d'un événement de codage dans votre ville ! 💻😎