Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

#Configurer son éditeur Atom comme Sublime Text

##Disclaimer Je suis graphiste donc j'ai juste besoin d'un éditeur de texte simple pour faire un peu de PHP et de HTML vite fait, qui soit pratique et qui soit surtout JOLI (oui ça compte). Donc si vous êtes un(e) dev bien véner, je ne doute pas que votre super IDE-de-la-mort calibré au millipoil sera mieux que ce dont je parle ici. Peut être qu'on peu faire tout ça avec d'autres IDE aussi mais c'est pas la question.

##Pourquoi Sublime Text ? Quand un pote m'a montré sublime text, le premier truc frappant c'est qu'il était JOLI, surtout avec le thème monokai. Ensuite il était pratique, avec une fonctionnalité inédite (pour moi à l'époque) le multi curseur et la multiple sélection du même mot (ça existait surement ailleurs mais je ne connaissais pas) Il y avait une fonctionnalité de minimap cool et un super panneau de commande activable avec ctrl+shift+p.

Problème : il était payant, et pas donné quand son métier n'est pas de coder (70€ il me semble) un version d'essai illimité est disponible mais elle balance des messages chiants de temps en temps.

##Test de Komodo edit Sur les conseils d'une autre personne, je tentais d'utiliser Komodo edit (petit frère gratuit de komodo IDE), qui permet de se régler tout comme sublime text, y compris la multi sélection et les raccourcis. C'était pas mal mais à l'usage c'était trop bugué et un peu laggy sur PC et je n'ai jamais réussi à faire fonctionner la typo Fira Code ni le clic milieu dessus. En plus ça n'utilisait pas les menus natifs de l'OS + 2-3 autres trucs pénibles (genre pas de réindentation automatique réservé à la version payante).

##Atom J'avais déjà téléchargé Atom pour tester mais avec son absence de multi-sélection je l'avais vite laissé de coté malgré le fait que je trouve l'interface encore plus jolie que sublime text. Ce soir j'en ai eu marre de Komodo et je me suis dit qu'il devait quand même y avoir moyen de le configurer exactement comme Sublime. Et effectivement c'est le cas, voici le résultat de mes investigations. En plus, Atom est gratuit, libre, et avec github intégré ce qui fait que vous pouvez voir directement les fichiers modifiés depuis le dernier commit.

#Azy tagl aboule les réglages làààààààààààà

##La base

  • Téléchargez et installez Atom.
  • Téléchargez et installez Fira Code et suivez ces instructions pour l'activer dans atom (il faudra peut être relancer Atom).
  • Faites ctrl(command)+shift+p puis allez dans les préférences et paramétrez ce que vous voulez.
  • Utilisez ou téléchargez le thème qui correspond à vos goûts, et surtout les plus magnifiques de tous marie-curie-syntax ou eighty-shades-syntax (j'aime bien aussi one dark (inclus de base), atom-monokai ou firewatch-syntax vous les trouverez tous dans préférences > install > themes).
  • Téléchargez keyboard-localization pour pallier aux problèmes de la mauvaise reconnaissance des clavier internationaux (notamment la touche alt-gr qui permet de taper } ou ]) et configurez-le dans la bonne localisation (fr_FR) pour la France.

##Les plugin pour "sublimer" Atom

Dans les préférences, faites "install" et cherchez le noms des plugins suivants :

  • Le plus important : la célèbre multi-sélection. Installez sublime-style-column-selection et dans les réglages choisissez en bouton de souris "middle" et en modificateur clavier "none".
  • Le package auto-indent vous permettra d'indenter automatiquement votre code avec le raccourci ctrl+maj+i ou via la command bar.
  • Highlight-selected vous permettra d'afficher la selection comme dans Sublime text avec un petit contour utile.
  • Minimap vous permettra d'afficher une vue synthétique "à vol d'oiseau" de votre code à droite ou à gauche de la fenêtre de l'éditeur.
  • Set-syntax permet simplement de rendre accessible le changement de syntaxe dans la command bar, comme Sublime Text, ce qui s'avère bien pratique.
  • Pigments n'est pas une fonction sublime text mais ajoute un truc super cool : la prévisualisation des couleurs hexa directement dans l'éditeur, comme ça plus de prise de tête en CSS. Ça permet aussi d'extraire toutes les couleurs d'un document et de convertir les couleurs vers RGBA, HSL, HEXA etc.
  • Et le meilleur pour la fin, quand vous sentez que vous êtes en killing spree de code, très énervé, ou bien en charrette, activez immédiatement le activate-power-mode

#Faites nétour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.