Atom

Outilhtml

Publié par le , mis à jour le (37184 lectures)

code atom éditeur

Dans le top 4 des éditeurs de code source nouvelle génération aux côtés de SublimeText, Brackets et Visual Studio Code, Atom est certainement l'un des plus hackable comme l'annonce son slogan.

Atom

Outre ce qui fait la force de tous les éditeurs récents (commandes rapidement accessibles, thèmes, extensions, arborescence des fichiers) ses avantages sont :

  • Développé par les gens de GitHub en open-source (gratuit), donc très pratique avec ses outils intégrés pour git (facultatif).
  • Basé sur Electron, framework pour développer des applications de bureau avec des technologies web (Visual Studio Code l'est d'ailleurs aussi).
  • Multi-plateforme (Windows, macOS, Linux).
  • Mis à jour très régulièrement (suivez le blog officiel d'Atom).
  • Installation des extensions (packages) facile directement dans l'interface depuis un catalogue officiel (plus simple que SublimeText).
  • Tous les raccourcis clavier facilement personnalisables dans les paramètres.
  • Rechercher/remplacer visuel et puissant (multiples fichiers, expressions régulières, etc).
  • Auto-complétion pour la quasi totalité des langages, y compris l'API WordPress.
  • Des panneaux multiples pour visualiser plusieurs fichiers ouverts en même temps ou comparer.

Atom screenshot code

Visuellement, on peut voir les fichiers qui ont été modifiés depuis le commit précédent, ce qui est bien pratique (orange : modifications, vert : ajouts, rouge : suppressions). Il y a également un outil préinstallé d'aperçu markdown.

Packages pratiques

Voici une sélection des meilleures extensions pour Atom disponibles actuellement. On peut facilement les retrouver avec leur nom dans les paramètres d'installation de l'éditeur.

  • pigments : affiche les couleurs directement dans les fichiers
  • editorconfig : prend en compte le fichier de configuration .editorconfig dans un projet (pour définir les espaces/tabulations par défaut par exemple)
  • minimap : carte d'aperçu du fichier
  • project-manager : pour passer rapidement d'un projet à l'autre
  • highlight-selected + minimap-highlight-selected : met en surbrillance dans tout le fichier le mot actuellement sélectionné
  • file-icons : de jolies icônes de fichiers dans la sidebar
  • autocomplete-paths : autocomplétion des chemins de fichiers
  • gulp-control : lance les tâches Gulp d'un projet sans avoir à chercher la console
  • beautify : beautifier (belle indentation) tout type de code
  • linter : pour tout linter ! (vérification de syntaxe js, php, css, sass, less, html…), doit être complété par d'autres modules indépendants, par exemple linter-jshint/linter-eshint pour JavaScript ou linter-php pour PHP
  • color-picker : comme son nom l’indique une palette de couleurs (raccourci clavier ou clic contextuel)
  • autoclose-html : fermeture des balises automatique lors de la frappe
  • docblockr : formate des blocs de documentation automatiquement
  • less-than-slash : fermer automatiquement les balises
  • emmet : transforme les expressions de sélecteurs CSS en balises HTML
  • prettier pour JavaScript : formate (beautify) correctement
  • git-history : historique du fichier avec Git, 
  • git-time-machine : historique Git visuel
  • clipboard-plus : copier-coller avec historique multiple
  • markdown-pdf : générer un fichier PDF à partir d'un document markdown
  • tool-bar et tool-bar-atom : ajoute une barre d'outils courants
  • split-diff : comparer des fichiers visuellement avec couleurs, y compris depuis git

L'intégration Git est très pratique, elle permet de lancer la plupart des opérations directement dans l'éditeur, pour des projets sur un serveur git quelconque ou GitHub.

Bref, si vous êtes encore sur un éditeur d'ancienne génération, pensez-y ! Si cela ne vous a pas convaincu, tentez le power mode.

Raccourcis pratiques

Ctrl + P ou Ctrl + T : fichiers du projet

Ctrl + Shift + P : commandes

Ctrl + R : accès rapide aux symboles (fonctions PHP, etc)

Ctrl + D : sélectionner l’occurence suivante

Alt + Shift + S : snippets du langage actif

Commentaires

@Lionel : Open source et gratuit.

Très bien je pense pour les nouvelles configs sur lesquelles je l'installe par défaut. Mais très lent sur mon vieux iMac 2011 boosté avec 16Go de RAM (bien plus rapide que Brackets tout de même). Pour cette raison Sublime Text, avec sa vélocité incomparable, reste pour moi le meilleur choix pour l'instant.

Là je ne suis pas au bureau, mais d'ores et déjà je peux dire que les extensions suivantes sont très intéressantes (je n'ai pas le nom exact des extentions) :

- terminal ide

- terminal plus

- git (ne vaut pas un source tree, mais très pratique tout de même)

Avant, j'utilisais Komodo edit et IDE. Ce n'est plus ce que c'était. Depuis plus de 2 ans, je cherchais un ide ou editeur (payant ou pas). S'il était payant, il fallait que ce soit vraiment bien. Webstorm ou phpstorm sont bien. Mais trop cher. Eclipse est pour moi le meilleur au niveau des fonctionnalités mais alors ce trucs est extrêmement lent. Même avec une super config.

L'année dernière, je suis revenu sur Sublime et par la même occasion, j'ai testé Atom. Bah depuis l'année dernière, j'utilise Atom tous les jours.

Atom et php ==> excellent outil

Atom et Python ==> que du bonheur !!

Atom et html/css ==> très bon outil

Atom et Javascript ==> excellent outil

Pour finir c'est un excellent editeur. Certes, il est plus lourd que studio code, bracket, light table ou Sublime, mais alors, quel edtieur !!

@niuxe : Eclipse est pour moi le meilleur au niveau des fonctionnalités mais alors ce trucs est extrêmement lent. Même avec une super config.

Si tu n'utilises Eclipse que pour son éditeur PHP, tu peux voir à désactiver certains plugins au démarrage (ci-dessous l'accès sur un Eclipse en mode british) :

Preferences > General > Startup and shutdown / Plugins activated on startup

Je développe quotidiennement, notamment mon générateur web, sur cet EDI et il me convient parfaitement.

Cet éditeur est extrêmement lent même avec zéro plugins donc j'imagine pas avec. Même si grosse communauté derrière donc intéressant au niveau des extensions, il n'est pas pour moi.

Etant sur Mac, j'ai longtemps utilisé Bracket (à cause que Notepad n'est pas dispo sur Mac). Puis un jour à la faveur d'un projet sur Synfony, j'ai découvert (on m'a fait découvrir) NetBeans.

Je suis loin d'avoir testé tous les éditeurs mais je ne comprends pas pourquoi NetBeans n'est jamais mentionné. Il doit y avoir une ou des raisons, surement à chercher dans les fonctionnalités poussées d'Atom ou Bracket, mais je passe à coté.

J'ai testé Atom qui avait tout pour me satisfaire sur le papier. J'ai abandonné pour cause de lenteurs insupportables. Comme toute l'application est en langage interprété, c'est hautement personnalisable mais lent à l'exécution si l'on n'a pas une bête de course.

En plus d'être très lent, faites très attention qu'Atom souffre d'un grave bug qui ne semble toujours pas solutionné : des utilisateurs ont signalé avoir perdu la totalité du contenu du ou des fichier(s), et l'ont récupéré complètement vide (écrasé par un fichier vide).

Source : https://discuss.atom.io/t/atom-crashed-and-my-source-file-ended-up-blank/16133

Si vous choisissez de l'utiliser, soignez vos backups !

Pour ma part, je préfère encore rester sur Netbeans qui a en plus l'avantage d'être nettement plus rapide (alors qu'il est réputé lourd !).

C'est quoi le thème utilisé dans les screenshots ? j'arrive pas à mettre la main dessus ou c'est une variante du thème de base ?

@lorraineS : Je t'avoue ne pas bien connaitre studio code. le peu que j'ai fait ne m'a pas convaincu. La pléthore de bons plugins sur Atom m'ont décidés à l'adopter.

@bzh : +1 je confirme. J'ai essayé plein de versions sur différents environnements (différentes distributions et bureaux, différentes machines). J'ai parcouru les forums et autres blogs pour avoir la meilleurs configuration possible. Cet IDE est franchement lent. On passe plus de temps à regarder le mode "sablier/occupé" de la souris qu'à coder. C'est dommage parce qu'en terme d'ergonomie et autres fonctionnalités intéressantes, c'est bien.

C'est quoi le thème utilisé dans les screenshots ? j'arrive pas à mettre la main dessus ou c'est une variante du thème de base ?

Eclipse ayant été cité et pour compléter ma réponse précédente, je précise qu'il existe un EDI orienté développement web, open source et basé sur le noyau de la fondation Eclipse, dénommé Aptana (http://www.aptana.com/index.html).

L'outil en question vient de faire l'objet d'un nettoyage en profondeur pour en améliorer les capacités.

Deux avantage, à mes yeux :

a) base Eclipse / plugin bien maîtrisée et en évolution constante depuis plusieurs années

b) sources (core + extensions) disponibles sur GitHub et donc consultables par tout un chacun connaissant Java et intéressé par les techniques mises en oeuvre

Quant à Atom, pour en revenir au sujet initial, j'avoue l'avoir testé il y a quelque temps déjà et l'avoir trouvé, comme souvent cité dans les commentaires, particulièrement lent.

Pour changer de projet rapidement j'utilise project-switcher2 qui utilise un chemin vers un dossier (j'ai mis mon www).

Plutôt que de sauvegarder chaque nouveau projet à chaque fois comme :

- project-manager : pour passer rapidement d'un projet à l'autre

Atom c'est génial !!

Bonjour,

Votre avis sur https://notepad-plus-plus.org/ ??

Ce n'est pas un IDE mais un éditeur de textes léger et (je trouve) super bien foutu. Par contre, il n'existe que sur vindo ; régulièrement mis à jour.

Je suis entré en contact avec son créateur (français) pour le remercier et il m'a répondu. Je vais prendre des mugs Notepad++ sur sa boutique \o/

Je n'ai rien à y gagner, je souhaite simplement avoir votre avis sur un des outils que j'installe en priorité sur 1 bécane sur laquelle je vais coder (php, css, html, js) et éventuellement vous le faire découvrir.

Et merci à vous pour la qualité des articles (vous vendez des mugs alsacreations ? :-) )