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 beaucoup de 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, maisL'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èsSupports 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éspaquets.

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 leModifiermenu dans la barre de navigation supérieure, puis sélectionnezPréférences . Un nouveauRé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 leInstallerbouton.

En cliquant sur lePaquets 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 sousForfaits communautaires élément du menu. Vous remarquerez qu'il y a aussi unForfaits 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éaprès-midi (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 installer.

Vous pouvez configureraprès-midien utilisant leconfiguration apmoption de ligne de commande ou en modifiant manuellement le~/.atom/.apmrc dossier. Dactylographieapm aidevous 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 queicônes de fichiersaméliore l'apparence de l'éditeur et facilite la localisation des fichiers d'un type spécifique.

Recherchez « icône » dans le+ Installervolet 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, maischef de projet 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églagesalorsOuvrir le dossier de configuration), maisparamètres de synchronisation 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 undossier localou alorsRéférentiel Git.

4. Chaque spectacle

Vous avez démarré Atom, ouvert un dossier, puis…et ensuite?Letout afficherLe package Atom révèle des commentaires éparpillés dans votre projet contenant des mots clés tels queTOUT,RÉPARE-MOIetMODIFIÉmais vous pouvez également ajouter vos propres expressions régulières.

• Obtenez le package Atom Todo Show ici:tout afficher

5. Mini-carte

mini-carte 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.sélectionné en surbrillanceapporte cette fonctionnalité à Atom et est encore meilleure lorsqu'elle est combinée avecminimap-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 !fermeture automatique-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

ou alors

) et qui devrait créer des blocs de retour à la ligne (tels que

ou alors

...
).

8. Pigments

La plupart des éditeurs ont des aperçus de couleur CSS, mais peu correspondent à lapigments 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 quealléger()etassombrir() . 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 pourdes dizaines de langages de programmation . Certains, comme HTML et CSS, ne nécessitent aucun logiciel supplémentaire. D'autres, commefrondené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 ?) Maisauto-détection-indentationdé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.

télétype 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 queFacteurmais 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.paquets de mise à jour automatiquevé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 lisantbandes dessinées xkcdou faites une petite partie deTétris,Inversé,Pong,Serpentou alorsSimCité!



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