Les packages que j’utilise avec l’éditeur Atom de GitHub

Liste régulièrement mise à jour des packages (paquets) que j’utilise avec l’éditeur de texte multiplate-forme Atom de GitHub.

J’ai longtemps utilisé le génial éditeur de texte Sublime Text, mais comme son développement semble vraiment prendre du retard, et comme il n’est pas gratuit, je me suis tourné vers le prometteur Atom. Tout comme avec Sublime Text, je liste dans ce billet les différents packages et thèmes que j’utilise au quotidien pour mes développements.

Packages

Project Manager

Si vous ne travaillez que sur un unique projet, Atom out-of-the-box est amplement suffisant, mais dès lors que vous maintenez plusieurs projets, il est clair qu’un gestionnaire de projets est un outil manquant. C’est ce que fait ce paquet, et il le fait plutôt bien.
https://atom.io/packages/project-manager



Minimap

Les habitués de Sublime Text connaissent cette petite bande sur la droite de l’éditeur représentant l’intégralité du fichier courant et qui permet de très rapidement naviguer / scroller dedans.
https://atom.io/packages/minimap

linter

Atom à la base est un éditeur texte, point, pour lui ajouter des fonctionnalités avancées, il faut utiliser des paquets (plugins) externes. Linter permet de surligner des erreurs de frappe et d’avoir des informations supplémentaires.
https://atom.io/packages/linter

linter PHP

Linter étant une API globale, il faut ajouter le langage à linteriser.
https://atom.io/packages/linter-php

Less Than-Slash

Un simple paquet mais sympa pour ceux qui aiment, il permet juste de fermer une balise dès que l’on frappe inférieur à et slash (</).
https://atom.io/packages/less-than-slash

Git-Plus

Pour les utilisateurs de GIT ce paquet est indispensable et bien fichu.
https://atom.io/packages/git-plus

file-icons

Ce paquet ajoute des (jolies) icônes aux noms de fichiers suivant leur type.
https://atom.io/packages/file-icons

open-recent

Encore un plugin bien sympa pour une fonctionnalité qui semble de base : avoir une liste des derniers fichiers récemment fermés afin de pouvoir les ré-ouvrir rapidement. Par défaut Atom permet de ré-ouvrir le dernier fichier seulement.
https://atom.io/packages/open-recent

color-picker

Comme son nom l’indique, en une rapide combinaison de touche, on peut choisir une couleur facilement.
https://atom.io/packages/color-picker

Highlight Line Package

Certainement le paquet le plus simple qui soit, en effet il surligne la ligne courante du curseur. Personnellement, un gros plus visuellement.
https://atom.io/packages/highlight-line

Todo Show Package

Découverte récente, ce paquet dresse la liste des TODO éparpillés dans les fichiers de votre projet.
https://atom.io/packages/todo-show



Thème

J’utilise le thème Monokai de kevinsawicki
https://atom.io/themes/monokai

Voilà les principaux packages qui me plaisent, faites-moi part des vôtres!

Mes préférences utilisateur Sublime Text 2

Cet article a débuté le 6 décembre 2012, il est mis à jour lorsque mes préférences utilisateur évoluent.

Pour mémo, mes préférences utilisateur de base pour l’éditeur Sublime Text :

{
	"bold_folder_labels": true,
	"caret_style": "smooth",
	"color_scheme": "Packages/User/Monokai (SL).tmTheme",
	"highlight_line": true,
	"scroll_past_end": true,
	"theme": "Soda Dark.sublime-theme",
	"trim_trailing_white_space_on_save": true,
	"file_exclude_patterns":
	[
		".project",
		"artisan",
		"composer.*",
		"CONTRIBUTING.md",
		"phpunit.xml",
		"*.md"
	],
	"folder_exclude_patterns":
	[
		".settings",
		".svn"
	]
} 
  1. Répertoires en gras dans la barre latérale
  2. ^.^
  3. Charte de couleurs
  4. Légère mise en valeur de la ligne courante
  5. Pour pouvoir avoir de la marge lors de l’édition de la dernière ligne
  6. Thème de l’éditeur
  7. Supprime les espaces superflus à l’enregistrement
  8. Exclure des fichiers de la barre latérale
  9. Exclure des répertoires de la barre latérale

Petit bonus, comme j’utilise un clavier italien, je n’ai pas d’accès direct au raccourci de la console, voici donc le keybinding que j’utilise pour utiliser [ctrl]+[\] afin d’invoquer la console de Sublime Text :

[
	{ "keys": ["ctrl+\\"], "command": "show_panel", "args": {"panel": "console", "toggle": true} }
]

Mes plugins Sublime Text

Petite mise-à-jour de la liste des plugins pour Sublime Text 3 que j’utilise.

  • Sublime Package Control
    C’est le tout premier à installer, la gestionnaire de paquets de Will Bond, une mine de bons trucs.
  • Soda Theme
    Il ne s’agit pas à proprement parler d’un plugin mais d’un thème. J’utilise Soda dark. Une fois installé, il suffit d’ajouter "theme": "Soda Dark.sublime-theme" dans ses préférences utilisateur. Bien que des changements seront visibles de suite, il faut redémarrer ST pour que tous les éléments soient à jour.
Soda dark Theme
  • TrailingSpaces
    Egalement disponible depuis Package Control, TrailingSpaces permet de visualiser et de supprimer les caractères espaces inutiles. Ce n’est pas grand chose, mais j’aime bien travailler le plus propre possible, donc ça me plait bien. A noter que ST propose par défaut de faire ce travail à l’enregistrement du fichier, mais il n’y a aucune visualisation au préalable et pas la possibilité de le faire durant l’édition du fichier.
Sublime TrailingSpaces
  • SublimeLinter
    Il s’agit d’un vérificateur de syntaxe en temps réel. A noter qu’il faut ensuite installer le ou les plugins de langage, par exemple pour PHP : SublimeLinter-php
SublimeLinter
  • SyncedSideBar
    Celui-là j’en rêvais depuis des années! Découverte du jour d’ailleurs qui m’a fait vouloir mettre à jour cette liste. Ce que je désirais depuis un long moment c’était de ne pas devoir re-déplier les répertoires dans la barre latérale à chaque réouverture de ST (chaque jour donc) pour retrouver l’emplacement des fichiers actuellement ouverts dans l’arborescence. J’avais d’ailleurs trouvé étrange que cette simple fonction n’existait pas par défaut dans le logiciel. SyncedSideBar fait cela, mais en beaucoup mieux car il suit l’emplacement du fichier courant dans l’arborescence de la colonne de gauche, donc plus besoin de scroller pour chercher où se situent les fichiers ouverts.
  • Sublime Alignment
    Comme son nom l’indique, ce plugin permet d’aligner joliment des morceaux de code. On sélectionne les lignes voulues, ctrl+alt+a et le tour et joué.
Sublime Alignment

N’hésitez pas à parler de ce que vous utilisez dans les commentaires.

Convertir les espaces en tabulations

Je suis un utilisateur plutôt content de Sublime Text, pour son extrême légèreté, sa rapidité et ses fonctions inédites (qui le sont de moins en moins, mais il reste un précurseur) et des petits choses bien sympathiques que l’on découvre avec le temps. C’est de l’une de ces petites choses que je vais parler aujourd’hui : la conversion des espaces en tabulations, ou l’inverse, qui se fait en un clic.

Dans le monde du développement il y a deux maisons, la maison des Stark et celle des Lannister, euh peut-être pas.. plus sérieusement, il y a ceux qui indentent avec des espaces et les autres avec des tabulations. Ce billet n’est pas là pour ouvrir le débat, il y a des tas d’articles pro-tabs ou d’autres qui prônent les espaces sur le web, au final c’est une préférence utilisateur, mais n’hésitez pas à faire part de votre préférence dans les commentaires ;>

En général pour un projet on développe à sa façon, en équipe on s’impose un choix, mais il arrivent – souvent – que l’on reprenne du vieux code ou celui de quelqu’un d’autre ou alors on ouvre un fichier qui avait été édité avec un autre IDE qui gérait plus ou moins bien la chose. Il arrive donc – souvent – de devoir convertir des espaces en tabulations (ou inversement). Et bien Sublime Text permet de le faire très simplement, tout ceci depuis le menu View > Indentation.

Indentation avec des espaces

Fichier CSS indenté avec des espaces (au nombre de 4 caractères pour une indentation)
2_convert

Conversion vers des tabulations
3_tabs

Le fichier utilise maintenant des tabulations (toujours de 4 caractères)

Je suis un adepte de la tabulation et cette fonction m’a bien aidé pour faire un peu de ménage dans mes projets.

Choisir le nombre de caractères pour une indentation

Le choix du nombre de caractères pour une indentation se fait en cliquant sur sa valeur en bas à droite (Tab Size: 4 dans notre exemple)