12 packages Atom essentiels pour le développement Web

Dans cet article, nous allons explorer 12 des meilleurs packages Atom pour les développeurs Web. Atom a de nombreux concurrents, y compris Visual Studio Code et Sublime Text, mais il reste un outil de développement Web populaire et compétent.

Pourquoi utiliser l’éditeur Atom ?

VS Code a peut-être gagné le cœur et l’esprit des développeurs Web au cours des dernières années, mais L’atome de GitHub editor reste l’un des éditeurs de code les meilleurs et les plus performants du marché. Les raisons de l’aimer beaucoup incluent:

• les programmes d’installation sont disponibles pour Windows, Mac et Linux
• il a été continuellement mis à jour au cours de la dernière décennie
• la vitesse s’est améliorée suite à certaines critiques des versions initiales
• il est toujours gratuit à télécharger et à utiliser sans restrictions ni écrans de rappel

Microsoft a acquis GitHub en 2018, de sorte que la société dispose désormais de deux bons éditeurs de code basés sur Electron. L’avenir à long terme d’Atom est probablement remis en question, mais le développement se poursuit. Si vous cherchez un nouvel éditeur de code — peut-être après Supports abandonnés Adobe — Atom devrait être vers le haut de votre liste.

Forfaits et thèmes Atom

Atom s’est toujours présenté comme un « éditeur de texte piratable pour le 21e siècle ». L’installation de base a relativement peu de fonctionnalités, mais vous pouvez l’étendre avec des modules complémentaires appelés paquets.

Au moment de la rédaction, plus de 3 000 thèmes Atom et 9 000 packages Atom sont disponibles. Cela s’explique en partie par le fait qu’Atom peut être étendu à l’aide des technologies Web. Si vous êtes un développeur Node.js ou JavaScript côté client, vous en savez assez pour créer vos propres packages Atom et améliorer Atom comme vous le souhaitez.

Comment installer les packages Atom

L’ajout de packages Atom est assez simple, car Atom est livré avec un gestionnaire de packages intégré. (De nombreux développeurs sont attirés par Atom en partie parce qu’il est si facile d’installer des packages Atom.)

Ouvrez l’éditeur Atom, cliquez sur le Modifier menu dans la barre de navigation supérieure, puis sélectionnez Préférences. Un nouveau Réglages l’onglet s’ouvrira. Clique sur le + Installer élément de menu et un champ de recherche apparaîtra sur la droite. Cela vous permettra de rechercher de nouveaux packages Atom par nom. Lorsque vous avez localisé le package Atom que vous désirez, appuyez sur le Installer bouton.

En cliquant sur le Paquets L’élément de menu vous montrera quels packages Atom sont actuellement installés. Tout ce que vous avez installé vous-même apparaîtra sous Forfaits communautaires élément du menu. Vous remarquerez qu’il y a aussi un Forfaits de base élément du menu. Cela répertorie les packages installés par défaut. Vous pouvez les désactiver si vous le souhaitez, mais il est préférable de ne pas le faire, car cela affectera les fonctionnalités de base de l’éditeur.

Installation des packages Atom à partir de la ligne de commande

Atom est également livré avec un outil de ligne de commande appelé apm (qui signifie Atom Package Manager). Vous pouvez également utiliser cet outil pour installer des packages directement depuis le terminal.

La syntaxe est la suivante : apm install <package-name>.

Vous pouvez configurer apm en utilisant le apm config option de ligne de commande ou en modifiant manuellement le ~/.atom/.apmrc dossier. Dactylographie apm help vous donnera une idée de ce qu’il peut faire d’autre.

Et cela dit, voici douze des meilleurs packages Atom – plus quelques options bonus — qui font d’Atom un éditeur de code encore meilleur…

1. Icônes de fichiers

Les icônes de fichiers et de dossiers par défaut d’Atom sont mieux décrites comme « fonctionnelles ». Un jeu d’icônes tel que file-icons améliore l’apparence de l’éditeur et facilite la localisation des fichiers d’un type spécifique.

Recherchez « icône » dans le + Installer volet pour localiser des dizaines d’options alternatives.

2. Chef de projet

Atom fournit une gestion de projet simple basée sur des dossiers. C’est suffisant si vous passez d’un projet à l’autre, mais project-manager est idéal pour tout ce qui est plus sophistiqué. Il offre des options de palette de commandes et un fichier JSON modifiable dans lequel vous pouvez définir des projets et avec leurs propres paramètres personnalisés tels que les couleurs, les préférences d’onglet, etc.

3. Paramètres de synchronisation

Si vous exécutez Atom sur plusieurs appareils, il est utile de synchroniser les paramètres, les raccourcis clavier et les extraits entre les installations. Vous pouvez synchroniser manuellement en clonant des fichiers dans le dossier Config (Réglagesalors Ouvrir le dossier de configuration), mais sync-settings fournit une option automatisée plus facile. Les paramètres sont enregistrés dans un Gist, mais d’autres packages Atom vous permettent de choisir un dossier local ou alors Référentiel Git.

4. Chaque spectacle

Vous avez démarré Atom, ouvert un dossier, puis… et ensuite? Le todo-show Le package Atom révèle des commentaires éparpillés dans votre projet contenant des mots clés tels que TODO, FIXME et CHANGEDmais vous pouvez également ajouter vos propres expressions régulières.

• Obtenez le package Atom Todo Show ici: tout afficher

5. Mini-carte

minimap est l’un des packages Atom les plus populaires, avec plus de sept millions de téléchargements. Il affiche une vue condensée de votre code sur le côté droit de la fenêtre de l’éditeur de code, ce qui est d’une grande aide pour une navigation rapide. Cette fonctionnalité entre dans votre subconscient ; vous ne penserez pas que vous l’utilisez, mais il vous manquera quand il n’est pas là.

Obtenez le package Atom Minimap ici: mini-carte

6. Mettez en surbrillance la sélection

Lorsque vous sélectionnez un mot-clé ou une variable dans VS Code, Sublime Text ou Notepad ++, il met en surbrillance toutes les autres instances. highlight-selected apporte cette fonctionnalité à Atom et est encore meilleure lorsqu’elle est combinée avec minimap-highlight-selected:

7. HTML de fermeture automatique

Comme son nom l’indique, ce package ajoutera automatiquement une balise HTML de fermeture lorsque vous compléterez la balise d’ouverture. Il s’agit peut-être d’un simple package, mais je ne peux pas m’en passer sans les balises HTML à fermeture automatique ! autoclose-html double votre vitesse de création de balisage. Cela fonctionne prêt à l’emploi, mais le package vous permet également de définir quelles balises doivent être complétées en ligne (telles que <p></p> ou alors <li></li>) et qui devrait créer des blocs de retour à la ligne (tels que <article> ... </article> ou alors <ol> ... <ol>).

8. Pigments

La plupart des éditeurs ont des aperçus de couleur CSS, mais peu correspondent à la pigments package pour Atom. Il analyse les couleurs, les propriétés personnalisées CSS, les variables de préprocesseur et exécute même des fonctions de changement de couleur telles que lighten() et darken(). Il analyse vos fichiers source pour créer une palette de couleurs afin que vous puissiez les référencer n’importe où.

• Obtenez le package Pigments Atom ici: pigments

En outre, le package Color Picker est destiné à tous ceux qui préfèrent sélectionner des couleurs plutôt que de se souvenir de leurs noms ou de leurs valeurs hexadécimales.

9. Linter

Vous pouvez exécuter des linters à partir de la ligne de commande, mais ce n’est pas aussi rapide ou efficace que la validation de code en direct dans l’éditeur. Linter est l’un des meilleurs. C’est rapide et moins intrusif que certains concurrents.

Notez que Linter est le package principal d’Atom qui fournit une API pour des dizaines de langages de programmation. Certains, comme HTML et CSS, ne nécessitent aucun logiciel supplémentaire. D’autres, comme eslintnécessitent le module Node et les paramètres de configuration (des instructions complètes sont fournies).

Le linting de votre code améliorera considérablement la qualité de votre code, je vous encourage donc à l’essayer.

10. Détection automatique de l’indentation

Les codeurs ne seront jamais d’accord pour utiliser des tabulations ou des espaces. Même lorsqu’ils le font, ils peuvent les préférer en deux, quatre ou huit saveurs de caractères. J’opte généralement pour ce qui agace le plus les gens (onglets durs à trois caractères ?) Mais auto-detect-indentation détermine ce que le projet nécessite afin que vous n’ayez jamais à vous en soucier.

Alternativement, vous pouvez forcer le code de tout le monde à correspondre à votre style préféré en utilisant Atom Beautify :

11. Téléscripteur

Si vous avez déjà utilisé Partage en direct pour VS Code, vous comprendrez comment il a révolutionné la programmation en binôme. L’extension permet à deux personnes de modifier à distance du code dans le même espace de travail en même temps.

teletype est le package équivalent pour Atom. C’est un service bêta, mais il a l’air bien et semble fiable.

• Obtenez le package Atom Teletype ici: télétype

12. Plus de forfaits Atom

Nous avons couvert ce qui sont, à mon avis, certains des meilleurs packages Atom. Nous terminerons avec quelques mentions spéciales qui n’ont pas figuré en tête de liste mais qui sont toujours très utiles et qui valent la peine d’être examinées.

• Emmet (anciennement connu sous le nom de Zen Code) peut développer des expressions de type CSS dans des balises HTML : emmet
• Si vous créez des services Web REST, le client REST d’Atom fournit un outil de test HTTP rapide. Il n’est pas à la hauteur d’alternatives puissantes telles que Facteurmais est idéal pour les tests rapides et sales : rest-client

  

• Enfin, il n’est pas nécessaire de vérifier manuellement les mises à jour. auto-update-packages vérifie vos colis toutes les six heures et fait le travail pour vous : paquets de mise à jour automatique

Suppléments après les heures d’ouverture

Si votre clé compte (nombre de clés) prouve que vous en avez assez fait pour la journée, détendez-vous en lisant bandes dessinées xkcdou faites une petite partie de Tétris, Inversé, Pong, Serpentou alors SimCité!

Ai-je raté votre add-on Atom préféré ?