Comment configurer le linting JavaScript dans Visual Studio Code

Je suis évidemment un grand fan de l’utilisation de normes de codage chaque fois que vous écrivez du code côté serveur (qu’il s’agisse de WordPress, PSR2 ou autre – tant que vous utilisez quelque chose, je pense que c’est une bonne chose).

Mais lorsqu’il s’agit d’écrire du code côté client, à savoir JavaScript pour cet article, nous ne le voyons pas autant discuté bien que je pense qu’il est tout aussi important. Il en va de même pour CSS, Sass ou LESS, mais c’est le contenu d’un autre article.

Pour les projets récents, nous avons utilisé le guide de style JavaScript Airbnb pour nos projets. Je suis un fan et je pense qu’il est utile d’écrire du JavaScript propre et lisible (qui semble avoir été écrit par la même personne – le but ultime des normes de codage, n’est-ce pas ?).

Dans cet article, je vais parcourir le processus de configuration dans Visual Studio Code.

Lignage JavaScript dans Visual Studio Code

Cet article suppose que vous êtes familiarisé avec la configuration du gestionnaire de packages de nœuds sur votre ordinateur local.

Si ce n’est pas le cas, j’ai un guide sur la façon de procéder dans cet article. Le raccourci? C’est littéralement aussi simple que cela (une fois Homebrew installé):

Une fois que vous l’avez configuré (soit en utilisant ledit message, soit s’il est déjà configuré), vous serez alors prêt à aller de l’avant avec l’installation des outils nécessaires pour configurer le linting JavaScript dans Visual Studio Code.

1 Installation d’ESLint

Supposons, par exemple, que vous exécutiez un projet à partir d’un répertoire appelé acme dans votre répertoire Projects dans Dropbox. Si tel est le cas, accédez au répertoire des plugins dudit projet. Cela ressemblera probablement à ceci :

$ cd ~/Dropbox/Projects/acme/wp-content/plugins/acme-plugin

Pour ici, vous devrez installer ESLint et les fichiers de configuration Airbnb. Heureusement, c’est vraiment facile à faire. Depuis le terminal, entrez simplement la commande suivante :

$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import

Je suppose qu’aucun des packages ci-dessus n’est déjà installé. Si tel est le cas, comme eslint, vous pouvez supprimer cet argument particulier de la ligne ci-dessus.

De plus, il est important de comprendre que le projet eslint-plugin-import est important pour ajouter la prise en charge de l’importation et de l’exportation de modules JavaScript.

2 La configuration ESLint

Une étape supplémentaire est nécessaire avant d’obtenir la configuration de la configuration dans Visual Studio Code. A savoir, il s’agit de créer un fichier de configuration ESLint. Depuis le répertoire acme-plugin comme indiqué ci-dessus, saisissez la commande suivante :

$ touch .eslintrc.js

Cela créera un fichier vide (ou un fichier de points vide comme certains peuvent s’y référer) et c’est là que notre configuration fera référence au guide de style Airbnb.

Dans le fichier, ajoutez simplement les lignes de code de configuration suivantes :

module.exports = {
  "extends": "airbnb-base"
};

Maintenant que vous avez installé ESLint, que vous avez une référence au guide de style Airbnb et que vous avez une référence pour prendre en charge une syntaxe supplémentaire, il est temps de configurer Visual Studio Code.

3 Configuration du code Visual Studio

À mon avis, c’est la partie la plus facile. Ouvrez le panneau des extensions de la manière qui vous convient le mieux (en cliquant sur l’icône ou en utilisant le raccourci), puis lancez une recherche sur ESLint. Vous pouvez voir plusieurs résultats, mais celui que vous voulez est celui qui ressemble à ceci :

Installez-le, puis rechargez le code Visual Studio. Il doit être défini dans vos paramètres par défaut que vous pouvez confirmer en ouvrant les paramètres et en recherchant ce morceau de code :

// Controls whether eslint is enabled for JavaScript files or not.
"eslint.enable": true,

S’il n’est pas présent, vous pouvez l’ajouter aux paramètres de l’utilisateur (je ne suis pas fan de la manipulation des paramètres par défaut au cas où vous auriez besoin de réinitialiser à partir d’une base propre).

Une fois que cela est défini, vous êtes prêt à partir et vous devriez avoir votre JavaScript teinté pendant que vous travaillez sur votre projet.

D’autres gestionnaires de packages ?

Ci-dessus, j’ai donné un exemple de la façon de procéder via Node; cependant, il est également possible d’utiliser Yarn. C’est quelque chose que je prévois de raconter à l’avenir, mais comme j’ai couvert Node dans un article précédent, il semblait logique et plus facile de suivre cet article avec ce contenu à titre de référence.

Quand viendra le temps pour moi d’utiliser un gestionnaire de paquets différent, Yarn en particulier, je couvrirai également cela.