Le setup JavaScript ultime pour l’editeur de texte Atom

J’adore Sublime text, mais j’ai décidé de donner une chance à Atom

Atom pour les développeurs JavaScript
Par David Leuliette le

J’utilise depuis des années l’éditeur Sublime Text car il possède une stabilité à toute épreuve et c’est rapiiiiiiiide. Problème : le développemeent assuré par une seule personne est lent, la documentation est assez obscure.

Atom c’est lent, ça lag et c’est aussi gourmant en ressource qu’un Google Chrome. Par contre quand on code du JavaScript, je dois avouer qu’utiliser Atom que c’est super cool !

Atom + JavaScript=love

Dans cet article je vais vous montrer comment j’ai pimpé Atom pour être efficace quand on developppe des applications webs fullstack JavaScript.

Atom en 10 secondes

  • 1 million d’utilisateurs actifs
  • Crée et maintenu par GitHub depuis 2014
  • Basé sur Chromium, codé avec l’aide du framework Electron (Avec des technologies web comme CoffeeScript / JavaScript / Less / HTML)
  • Facilement modifiable avec des plug-ins écrits en Node.js (voir le manuel du hacker)
  • Très bonne intégration avec git et GitHub

alt + cmd + i et 💥 vous ouvrez la console de Chromium. C’est là que coder du JavaScript directement dans un navigateur web prend tout son sens.

Configuration pour les packets de base et ceux de la communauté

Avec un simple cmd + ? vous accédez à la configuration d’Atom. Même si je préfère la personnalisation de Sublime Text vous devriez rapidement pouvoir configurer votre interface.

Atom settings packages gif

cmd + shift + P permet de chercher, d’installer de nouveaux packets et des thèmes.

Atom install packages gif

Une forte intégration entre git et GitHub permet de gagner beaucoup de temps. Les commandes que j’utilise le plus sont blame (Open on GitHub: Blame) et issues (Open on GitHub: Issues)

Atom git integration

Don’t make me think — Use linter

Je travaille sur différentes technologies qui ont chacunes leurs spécifité. Pour avoir une meilleure DX et un code évolutif de qualité il est indispensable d’avoir différents outils d’analyse de code HTML et JavaScript.

Travail d’équipe avec editorconfig

Personnellement quand je développe — comme Google — j’utilise 2 espaces sans tabulations. Ce détail peut paraître annodin mais si vous utilisez des règles différentes dans une équipe vous arrivez très vite à un projet ou la seule règle est le chaos.

Oui, je m’adresse à vous développeurs qui n’encodez pas vos fichiers en UTF8 lors de la sauvegarde ou qui n’ajoutez pas de caractère en fin de fichier.

Il est pourtant très facile de régler ces problème. Voici un exemple de fichier .editorconfig à la racine du projet.

  # EditorConfig is awesome: http://EditorConfig.org

  root = true

  [*]
  charset = utf-8
  indent_style = space
  indent_size = 2
  end_of_line = lf
  trim_trailing_whitespace = true
  insert_final_newline = true

  [*.md]
  [*.markdown]
  trim_trailing_whitespace = false

HTML avec linter-htmlhint

htmlhint est un outil d’analyse HTML qui vous permettra d’éviter le syndrome de la balise fermante fantôme 👻.

Créez un fichier .htmlhintrc dans votre projet et ajoutez les rêgles suivantes :

  # Good hunter use HTMLHint https://github.com/yaniswang/HTMLHint

  {
    "attr-lowercase": true,
    "attr-no-duplication": true,
    "attr-unsafe-chars": true,
    "attr-value-double-quotes": true,
    "attr-value-not-empty": true,
    "doctype-first": false,
    "doctype-html5": false,
    "head-script-disabled": true,
    "href-abs-or-rel": false,
    "id-class-ad-disabled": true,
    "id-class-value": "dash",
    "id-unique": true,
    "img-alt-require": true,
    "space-tab-mixed-disabled": false,
    "spec-char-escape": true,
    "src-not-empty": true,
    "style-disabled": true,
    "tag-pair": true,
    "tag-self-close": false,
    "tagname-lowercase": true
  }

JavaScript avec linter-eslint

Eslint est un utilitaire Node.js d’analyse de code. Il est souvent utilisé pour identifier les problèmes de patterns de code qui ne respectent pas certaines conventions.

Atom linter JavaScript gif

Chaque projet est différent mais vous pouvez commencer par la configuration utilisée par les Développeurs JavaScript au nord de Paris.

  $ npm install @chtijs/eslint-config --save-dev

Dans votre fichier .eslintrc

  {
    "extends": "@chtijs"
  }

Vous pouvez créer votre propre configuration à l’aide de la documentation Eslint, ou encore séparer la configuration pour votre Backend et Front-end comme chez SimpliField.

Autocomplete avec atom-ternjs

Tern est un moteur d’analyse de code JavaScript indépendant. Il s’intégre dans n’importe quel éditeur, dans notre cas ce sera un plugin pour Atom. Ses principales fonctionnalités sont :

  • Autocompletion des variables et des méthodes
  • Affichage des arguments d’une fonction
  • Interrogation du type d'expression
  • Trouver la définition de quelquechose
  • Refactoring automatique

Configuration

  • Ouvrez n’importe quel fichier JavaScript dans votre projet
  • Packages > Atom Ternjs > Configure project
  • Le fichier de configuration apparaît.
  • “Save & Restart Server” pour créer / mettre à jour le fichier .tern-project
{
  "ecmaVersion": 6,
  "libs": [],
  "loadEagerly": [],
  "dontLoad": [
    "node_modules/**",
    "bower_components/**"
  ],
  "plugins": {
    "doc_comment": true,
    "angular": {}
  }
}

Exemple de fichier .tern-project pour une application AngularJS

Si ça ne fonctionne pas vous pouvez consulter la documentation

Bonus

Il y a encore pleins d’autres extentions pour Atom que j’utilise — principalement pour du développement web.

  • emmet
  • git-time-machine
  • atom-pigments
  • file-icons
  • lodash-snippets
  • js-hyperclick

💥 Pour tout installer d’un coup il vous suffit de copier / coller cette ligne dans votre terminal préféré

  $ apm editorconfig atom-ternjs file-icons set-syntax sort-lines autocomplete-modules emmet es6-javascript js-hyperclick hyperclick pigments linter-eslint lodash-snippets

Si vous souhaitez optimiser le chargment d’Atom vous pouvez toujours analyser le temps de chargement des différents plugins avec Package > Timecop > Show

Atom show plugin loading time

Je suis curieux de savoir ce qu’il manque, n’hésitez pas à m’envoyer votre config si vous utilisez un Framework comme React 🚀

EDIT: Juste avant de publier l’article j’ai eu la réponse à ma question