Atom, l’éditeur de code de Github, gagne en popularité jour après jour. Les développeurs préfèrent cet éditeur de code car il est léger, sa courbe d’apprentissage est faible et il peut être étendu avec une variété de packages Atom utiles.

Au début, Atom était utilisé comme outil interne pour Github, mais plus tard, il a été publié en tant qu’outil open source pour le grand public. La communauté a réagi rapidement et dispose désormais d’un écosystème florissant d’utilisateurs et de contributeurs.

En tant qu’éditeur multiplateforme prêt à l’emploi, Atom fonctionne sur OS X, Windows et Linux. Il a une auto-complétion intelligente, utile pour ceux qui veulent écrire rapidement du code propre, et il dispose d’un navigateur de fichiers pratique où vous pouvez ouvrir et ajouter des fichiers rapidement.

Si vous aspirez à devenir un utilisateur expérimenté d’Atom, voici une liste des meilleurs packages Atom qui augmenteront votre productivité et faciliteront grandement votre codage.

Continuez à en savoir plus sur ce sujet dans cet article créé par notre équipe sur wpDataTables, le plugin WP #1 pour créer des tableaux et des graphiques.

Découvrez quels packages Atom valent la peine d’être utilisés et pourquoi.

Les meilleurs packages Atom pour compléter votre configuration de codage

Certains disent qu’Atom est le meilleur éditeur de code généraliste du marché. Il est certainement comparable à Sublime Text et Notepad ++, avec ses propres avantages. L’éditeur de code regorge de toutes sortes de fonctionnalités qui améliorent le codage, parmi lesquelles il convient de mentionner :

Il est multiplateforme – quel que soit le système d’exploitation que vous utilisez, Atom fonctionne simplement
Il dispose d’un gestionnaire de packages intégré – si vous souhaitez installer les meilleurs packages Atom, vous n’aurez pas à vous soucier de leur gestion.
Fonction d’auto-complétion intelligente – vous pouvez écrire du code beaucoup plus rapidement avec cette fonction
Recherche de système de fichiers – dites adieu à la navigation trop longue dans les fichiers, car vous pouvez tout faire dans une seule fenêtre
Multi-volets – vous pouvez diviser l’interface d’Atom en plusieurs volets
Simplicité – Le plus grand point fort d’Atom est qu’il est très simple à utiliser

Comme vous pouvez le constater, Atom est déjà équipé de tout ce dont vous avez besoin pour coder. Pour des besoins plus spécialisés, vous pouvez vous tourner vers des packages fournis par la communauté, qui seront expliqués dans la section suivante.

Quels sont les meilleurs packages Atom et pourquoi en avons-nous besoin ?

Les packages Atom sont des programmes logiciels externes et des morceaux de code qui ajoutent des fonctions supplémentaires au produit principal, améliorant ainsi ses capacités. Avec Atom, un package est aussi parfois appelé «plugin» ou «extension ».

En ajoutant des packages Atom au programme principal, Atom devient beaucoup plus efficace et vous aide à en faire plus avec moins d’effort. Tous les utilisateurs peuvent faire leur propre choix en termes de packages Atom à utiliser.

Le téléchargement et l’installation des packages sont faciles et ils peuvent considérablement améliorer l’expérience utilisateur du programme principal. Beaucoup d’entre eux peuvent ne pas s’appliquer à votre flux de travail ou aux langues avec lesquelles vous travaillez, vous ne devez donc installer que les meilleurs packages Atom pour vous.

Mais d’abord, regardons comment installer un package Atom.

Comment installer les packages Atom

Lors de l’installation de votre premier package Atom, il est préférable de lire attentivement les étapes. Vous les apprendrez très probablement par cœur et n’aurez pas à utiliser cette liste à chaque fois. Une fois que vous avez sélectionné les meilleurs packages Atom pour vous, voici deux façons de les installer :

Cliquez sur Fichier > Paramètres. Cela fera apparaître la vue Paramètres. Ici, cliquez sur Installer et tapez le nom du package que vous envisagez d’installer. Un raccourci pour la vue Paramètres est ctrl +, (ctrl et virgule) sur PC et cmd +, sur Mac.
Vous pouvez utiliser la palette de commandes de la même manière. Accédez-y en appuyant sur ctrl + Maj + P sur PC ou cmd + Maj + P sur Mac. Tapez "install packages" ici. Ensuite, vous pouvez utiliser la vue Paramètres comme ci-dessus.

Certains packages sont inclus par défaut avec Atom. Ils sont appelés Core Packages et peuvent être désactivés. Il est toutefois recommandé de ne pas les désactiver, car ils influencent le comportement général de l’éditeur. Les autres packages que vous installerez seront répertoriés sous Community Packages.

Une liste des meilleurs packages Atom à installer immédiatement

Atom est polyvalent, et il serait dommage de ne pas l’enrichir de nouvelles fonctionnalités en quelques clics seulement.

Cela dit, il existe plus de 8 000 packages et prendre une décision peut être très difficile si vous ne savez pas exactement ce que vous voulez.

Pour vous aider dans votre recherche, consultez notre liste des meilleurs packages Atom ci-dessous :

Emmet

Emmet est l’un des meilleurs packages Atom car il est universellement utile dans de nombreuses langues.

Il s’agit d’un outil d’extrait de code qui aide les développeurs frontaux à créer rapidement du HTML et du CSS, et il peut également être utilisé pour créer des extraits de code personnalisés pour toute autre chose. Pour ce faire, Emmet utilise des abréviations qui sont converties en chaînes de texte plus longues.

Demander à la pile

Aucun développeur ne trouve pratique de passer du navigateur à l’éditeur et vice-versa toute la journée. Ask Stack Overflow est un package qui vous permet de rechercher Stack Overflow et d’obtenir vos exemples de code directement dans Atom, sans avoir à parcourir les réponses pour les trouver vous-même.

git-blame

Un autre des meilleurs packages Atom, git-blame vous permet de basculer les annotations dans l’éditeur Atom. Pour ce faire, il vous suffit d’appuyer sur ctrl + B ou de faire un clic droit sur votre fichier puis de sélectionner Git Blame.

Assurez-vous de le faire dans le bon fichier ; sinon, vous risquez de basculer le mauvais élément ou de réduire vos dossiers dans une barre latérale arborescente.

Linter

Il s’agit d’un package qui ne fait pas grand-chose par lui-même, mais il fournit une base que vous pouvez utiliser dans Atom pour ajouter plus rapidement des plugins linter. Il prend en charge la plupart des langages et fonctionne avec HTML, HAML, JSON, CSS, SCSS, Java, etc.

Linter propose également des plugins pour les langages back-end. Il y a une liste complète sur la page d’accueil du package.

Globalement, les linters sont utilisés pour améliorer la qualité du code et réduire le nombre d’erreurs.

git-time-machine

Parfois, avoir un visuel de toutes vos actions passées devant vous peut être d’une grande aide. C’est pourquoi git-time-machine mérite de figurer dans la liste des meilleurs packages Atom du marché.

Il vous permet de visualiser le tracé visuel de vos commits de fichiers, et il est également interactif. Vous pouvez cliquer sur le graphique temporel et voir les commits dans une plage de temps spécifique.

Atome embellir

Un code clair est beaucoup plus facile à parcourir et à corriger si des bogues sont rencontrés. Le rendre lisible sans impliquer beaucoup d’efforts est possible avec Atom Beautify, un package Atom qui nécessite un seul clic pour nettoyer des centaines de lignes de code.

Ceux qui travaillent dans de plus grandes équipes pourraient trouver ce package très utile, car le code sera formaté de manière standard que tout le monde pourra lire sans problème. Le package prend en charge divers langages, notamment HTML, CSS, Python, Ruby, C, etc.

JavaScript turbo

Si vous utilisez Atom pour coder en JavaScript, ce package ne peut pas manquer dans votre liste. Il vous permet d’utiliser des extraits de code JavaScript qui améliorent votre flux de travail et optimisent votre code.

Ces extraits fonctionnent bien pour ECMAScript 6 et sont très faciles à apprendre car leurs noms sont intuitifs, courts et accrocheurs. Un exemple serait "if" qui représente un bloc "if" entier.

langue-liquide

Les développeurs frontaux qui utilisent le langage de modèle Liquid de Shopify peuvent utiliser language-liquid pour mettre en évidence leur syntaxe.

Atom a une option de surbrillance incluse par défaut, mais elle n’est pas disponible lors de l’utilisation de Liquid. C’est là que language-liquid intervient et évite aux utilisateurs de perdre des heures à vérifier leur code.

Si vous utilisez une autre langue qui nécessite une prise en charge supplémentaire de la coloration syntaxique, essayez de rechercher un package similaire avec un autre nom de langue.

Mettre en surbrillance la sélection

Sur la même note que la coloration syntaxique, mais avec une fonction différente, Highlight Selected est utilisé pour signaler les occurrences d’un mot spécifique dans votre code.

Vous pouvez sélectionner n’importe quel mot en double-cliquant dessus et Highlight Selected vous montrera tous les autres endroits où ce mot apparaît. Simple, mais extrêmement pratique !

Hé, saviez-vous que les données peuvent aussi être belles ?

wpDataTables peut le faire de cette façon. Il y a une bonne raison pour laquelle c’est le plugin WordPress #1 pour créer des tableaux et des graphiques réactifs.

Un exemple réel de wpDataTables dans la nature

Et c’est vraiment facile de faire quelque chose comme ça :

Vous fournissez les données du tableau
Configurez-le et personnalisez-le
Publiez-le dans un article ou une page

Et ce n’est pas seulement joli, mais aussi pratique. Vous pouvez créer de grandes tables avec jusqu’à des millions de lignes, ou vous pouvez utiliser des filtres et une recherche avancés, ou vous pouvez vous déchaîner et les rendre modifiables.

"Ouais, mais j’aime trop Excel et il n’y a rien de tel sur les sites Web". Oui, il y en a. Vous pouvez utiliser une mise en forme conditionnelle comme dans Excel ou Google Sheets.

Vous ai-je dit que vous pouviez également créer des graphiques avec vos données ? Et ce n’est qu’une petite partie. Il y a beaucoup d’autres fonctionnalités pour vous.

Télétype

Teletype mérite sa place dans la liste des meilleurs packages Atom car il apporte quelque chose de nouveau à la table: vous permettre, à vous et à votre équipe, de collaborer dans un seul espace de travail.

Teletype vous permet de partager votre code avec un autre programmeur et leur donne accès à son édition en temps réel. Dans certains cas, cela est très utile car les programmeurs débutants sont encouragés à suivre des programmeurs plus expérimentés et à apprendre leurs façons de gérer un projet.

Le télétype peut également être utilisé pour établir des collaborations en équipe, il ne se limite donc pas au partage de code avec une seule personne, mais avec plusieurs. Ce package est le résultat de la créativité et de l’innovation de l’équipe GitHub.

Depuis 2017, Teletype fait partie des packages préférés de nombreux développeurs, encourageant des concepts tels que la programmation en binôme et le codage social.

Advanced-open-file (par Osmose)

Advanced Open File est un package Atom qui aide les utilisateurs à ouvrir des fichiers et à parcourir des dossiers plus facilement. Vous pouvez également en créer de nouveaux dans Advanced Open File, ce qui réduit le temps nécessaire pour le faire dans Atom. Vous pouvez y accéder en appuyant sur Alt + cmd/ctrl + O.

LessThan-Slash

Ceux qui utilisent davantage le HTML par rapport aux autres langages devraient essayer Less Than-Slash. Des meilleurs packages Atom, Less Than-Slash se différencie par sa simplicité et son efficacité.

Le package ajoute une balise HTML de fermeture après avoir tapé </. De plus, le package peut reconnaître quelle balise doit être fermée et l’ajoute automatiquement tout en ignorant les balises similaires ou similaires.

Vous pouvez également spécifier toutes les balises que vous préférez ignorer dans le panneau des paramètres du package. De plus, vous pouvez profiter de l’option de curseur de retour, qui envoie votre curseur au début de la balise de fermeture, ce qui rend la réécriture moins compliquée.

Icônes de fichiers

Atom est programmé pour afficher le nom du fichier dans l’arborescence lors de l’accès à la fenêtre de l’éditeur. Ceci est parfois perçu comme un inconvénient, étant donné que certaines personnes préfèrent connaître le nom du fichier sur lequel elles travaillent dans l’icône du fichier.

Comme son nom l’indique, File Icons est le package Atom qui fait exactement cela. C’est un petit changement avec un grand effet, vous devriez donc l’essayer et voir comment votre flux de travail s’améliore.

Disposition des volets Plus

Vous rencontrez des problèmes avec l’organisation des volets dans Atom ? Page Layout Plus vous permet de contrôler la distribution de chaque volet, vous donnant également la possibilité d’utiliser des raccourcis. À l’aide des raccourcis, vous pouvez passer d’une colonne à l’autre ou définir des mises en page.

Forfait Git-Plus

Faire des actions dans Gitis assez difficile car il faut toujours basculer sur le terminal. Git-Plus vous aide à effectuer des actions Git sans avoir à changer pour le faire. Il est basé sur des shortcodes et vous n’avez qu’à appuyer sur cmd/ctrl + Maj + H. Toutes les commandes Git peuvent être exécutées avec ce package.

Pigments (par abe33)

Dans la conception Web, les codes de couleur sont tout. Pigments est un package pratique qui analyse votre fichier et détecte les codes de couleur existants qui sont ensuite affichés. Les pigments couvrent HEX, RVB et HSL.

Si vous travaillez avec des fonctions de transformation de couleur comme LESS ou Stylus CSS, Pigments peut également vous aider, car il dispose de fonctionnalités prêtes à l’emploi. Vous pouvez personnaliser le type de marqueur ou définir des mots de couleur différente pour chaque fichier.

Pipette à couleurs

En parlant des meilleurs packages Atom en termes de gestion des couleurs, Color Picker mérite une place ici. Vous pouvez ajuster les valeurs de couleur beaucoup plus rapidement dans un fichier CSS, ce qui est une fonctionnalité utile pour ceux qui travaillent dans l’industrie de la conception Web.

Le sélecteur de couleurs apparaîtra à l’écran en appuyant sur cmd/ctrl + Maj + C. Savoir quelles couleurs vous utilisez avec une telle facilité réduit le temps nécessaire pour ajuster les teintes.

Minimap (par atom-minimap)

Pour ceux qui connaissent Sublime Text, une mini-carte est une fonctionnalité utile pour les développeurs qui aiment voir un aperçu du contenu de leur fichier dans la fenêtre de l’éditeur de code. Avoir l’un d’entre eux à l’écran aide les développeurs à maintenir leur orientation et leur concentration.

Minimap est un package pour Atom qui vous permet de faire la même chose. Outre sa fonctionnalité principale, vous pouvez également afficher des signets, des marqueurs linter et des couleurs de pigments.

TODO-Show

Voulez-vous que tous les commentaires TODO, FIXME et CHANGED soient répertoriés sur votre écran ? Si oui, utilisez TODO-Show. C’est un package sympa qui est très pratique pour les développeurs qui préfèrent écrire leurs notes directement dans le code.

Parmi les meilleurs packages Atom, celui-ci semble être l’un des plus utiles. Gardez à l’esprit que vous pouvez également créer des commentaires personnalisés en plus des commentaires prédéfinis.

Chef de projet

Passer rapidement d’un projet à l’autre n’est pas le fort d’Atom. C’est pourquoi vous devriez essayer ce package qui vous permet de changer beaucoup plus facilement.

Enregistrez vos projets à l’aide de la palette de commandes en tapant dans Project Manager: Save Project. Ensuite, une fois que vous les avez enregistrés, vous pouvez filtrer vos projets et basculer facilement entre eux.

Atom Tabs Exposé

Ce package Atom vous donne la possibilité de tabuler sur les fichiers ouverts dans le programme. Si vous connaissez Mission Control de Mac, c’est assez similaire. Le package affichera les volets actifs et un aperçu de chaque onglet.

Réflexions finales sur les meilleurs packages Atom

Bien que cette liste devrait vous donner suffisamment à mâcher, elle n’est pas exhaustive de tous les meilleurs packages Atom disponibles. N’oubliez pas qu’il en existe plus de 8 000, alors prenez votre temps pour trouver celles qui s’appliquent le mieux aux langues que vous utilisez.

Atom est suffisamment puissant sans tous ces packages, mais ces packages Atom faciles à installer et disponibles gratuitement étendront ses fonctionnalités pour le rendre plus pratique à utiliser.

Si vous avez aimé lire cet article sur les meilleurs packages Atom, vous devriez consulter celui-ci sur les thèmes Sublime Text.

Nous avons également écrit sur quelques sujets connexes tels que les plugins Sublime Text et comment devenir développeur front-end.

Source d’enregistrement: wpdatatables.com