{"id":230273,"date":"2022-11-26T15:13:00","date_gmt":"2022-11-26T12:13:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=230273"},"modified":"2022-11-26T15:14:37","modified_gmt":"2022-11-26T12:14:37","slug":"comment-configurer-le-linting-javascript-dans-visual-studio-code","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fr\/comment-configurer-le-linting-javascript-dans-visual-studio-code\/","title":{"rendered":"Comment configurer le linting JavaScript dans Visual Studio Code"},"content":{"rendered":"\n

Je suis \u00e9videmment un grand fan de l’utilisation de normes de codage chaque fois que vous \u00e9crivez du code c\u00f4t\u00e9 serveur (qu’il s’agisse de WordPress, PSR2 ou autre – tant que vous utilisez quelque chose, je pense que c’est une bonne chose).<\/p>\n

Mais lorsqu’il s’agit d’\u00e9crire du code c\u00f4t\u00e9 client, \u00e0 savoir JavaScript pour cet article, nous ne le voyons pas autant discut\u00e9 bien que je pense qu’il est tout aussi important. Il en va de m\u00eame pour CSS, Sass<\/a><\/strong> ou LESS<\/a><\/strong>, mais c’est le contenu d’un autre article.<\/p>\n

Pour les projets r\u00e9cents, nous avons utilis\u00e9 le guide de style JavaScript Airbnb pour nos projets. Je suis un fan et je pense qu’il est utile d’\u00e9crire du JavaScript propre et lisible (qui semble avoir \u00e9t\u00e9 \u00e9crit par la m\u00eame personne – le but ultime des normes de codage, n’est-ce pas\u00a0?).<\/p>\n

\"Comment<\/a><\/p>\n

Dans cet article, je vais parcourir le processus de configuration dans Visual Studio Code.<\/a><\/strong><\/p>\n

Lignage JavaScript dans Visual Studio Code<\/h2>\n

Cet article suppose que vous \u00eates familiaris\u00e9 avec la configuration du gestionnaire de packages de n\u0153uds<\/a><\/strong> sur votre ordinateur local.<\/p>\n

\"Comment<\/a><\/p>\n

Si ce n’est pas le cas, j’ai un guide sur la fa\u00e7on de proc\u00e9der dans cet article<\/a><\/strong>. Le raccourci? C’est litt\u00e9ralement aussi simple que cela<\/a><\/strong> (une fois Homebrew install\u00e9):<\/p>\n

Une fois que vous l’avez configur\u00e9 (soit en utilisant ledit message, soit s’il est d\u00e9j\u00e0 configur\u00e9), vous serez alors pr\u00eat \u00e0 aller de l’avant avec l’installation des outils n\u00e9cessaires pour configurer le linting JavaScript dans Visual Studio Code.<\/p>\n

1 Installation d’ESLint<\/h3>\n

Supposons, par exemple, que vous ex\u00e9cutiez un projet \u00e0 partir d’un r\u00e9pertoire appel\u00e9 acme dans votre r\u00e9pertoire Projects dans Dropbox. Si tel est le cas, acc\u00e9dez au r\u00e9pertoire des plugins dudit projet. Cela ressemblera probablement \u00e0 ceci\u00a0:<\/p>\n

$ cd ~\/Dropbox\/Projects\/acme\/wp-content\/plugins\/acme-plugin<\/code><\/pre>\n
Pour ici, vous devrez installer ESLint et les fichiers de configuration Airbnb. Heureusement, c’est vraiment facile \u00e0 faire. Depuis le terminal, entrez simplement la commande suivante :<\/p>\n
$ npm i -S eslint eslint-config-airbnb-base eslint-plugin-import<\/code><\/pre>\n
Je suppose qu’aucun des packages ci-dessus n’est d\u00e9j\u00e0 install\u00e9. Si tel est le cas, comme eslint, vous pouvez supprimer cet argument particulier de la ligne ci-dessus.<\/p>\n
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.<\/p>\n
2 La configuration ESLint<\/h3>\n
Une \u00e9tape suppl\u00e9mentaire est n\u00e9cessaire avant d’obtenir la configuration de la configuration dans Visual Studio Code. A savoir, il s’agit de cr\u00e9er un fichier de configuration ESLint. Depuis le r\u00e9pertoire acme-plugin<\/strong> comme indiqu\u00e9 ci-dessus, saisissez la commande suivante\u00a0:<\/p>\n
$ touch .eslintrc.js<\/code><\/pre>\n
Cela cr\u00e9era un fichier vide (ou un fichier de points vide comme certains peuvent s’y r\u00e9f\u00e9rer) et c’est l\u00e0 que notre configuration fera r\u00e9f\u00e9rence au guide de style Airbnb.<\/p>\n
Dans le fichier, ajoutez simplement les lignes de code de configuration suivantes\u00a0:<\/p>\n
module.exports = {\n\u00a0 \"extends\": \"airbnb-base\"\n};<\/code><\/pre>\n
Maintenant que vous avez install\u00e9 ESLint, que vous avez une r\u00e9f\u00e9rence au guide de style Airbnb et que vous avez une r\u00e9f\u00e9rence pour prendre en charge une syntaxe suppl\u00e9mentaire, il est temps de configurer Visual Studio Code.<\/p>\n
3 Configuration du code Visual Studio<\/h3>\n
\u00c0 mon avis, c’est la partie la plus facile. Ouvrez le panneau des extensions de la mani\u00e8re qui vous convient le mieux (en cliquant sur l’ic\u00f4ne ou en utilisant le raccourci), puis lancez une recherche sur ESLint. Vous pouvez voir plusieurs r\u00e9sultats, mais celui que vous voulez est celui qui ressemble \u00e0 ceci :<\/p>\n
\"Comment<\/a><\/p>\n
Installez-le, puis rechargez le code Visual Studio. Il doit \u00eatre d\u00e9fini dans vos param\u00e8tres par d\u00e9faut que vous pouvez confirmer en ouvrant les param\u00e8tres et en recherchant ce morceau de code\u00a0:<\/p>\n
\/\/ Controls whether eslint is enabled for JavaScript files or not.\n\"eslint.enable\": true,<\/code><\/pre>\n
S’il n’est pas pr\u00e9sent, vous pouvez l’ajouter aux param\u00e8tres de l’utilisateur (je ne suis pas fan de la manipulation des param\u00e8tres par d\u00e9faut au cas o\u00f9 vous auriez besoin de r\u00e9initialiser \u00e0 partir d’une base propre).<\/p>\n
Une fois que cela est d\u00e9fini, vous \u00eates pr\u00eat \u00e0 partir et vous devriez avoir votre JavaScript teint\u00e9 pendant que vous travaillez sur votre projet.<\/p>\n
D’autres gestionnaires de packages\u00a0?<\/h2>\n
Ci-dessus, j’ai donn\u00e9 un exemple de la fa\u00e7on de proc\u00e9der via Node; cependant, il est \u00e9galement possible d’utiliser Yarn. C’est quelque chose que je pr\u00e9vois de raconter \u00e0 l’avenir, mais comme j’ai couvert Node dans un article pr\u00e9c\u00e9dent, il semblait logique et plus facile de suivre cet article avec ce contenu \u00e0 titre de r\u00e9f\u00e9rence.<\/p>\n
\"Comment<\/a><\/p>\n
Quand viendra le temps pour moi d’utiliser un gestionnaire de paquets diff\u00e9rent, Yarn en particulier, je couvrirai \u00e9galement cela.<\/p>\n
Source d’enregistrement:  tommcfarlin.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Une proc\u00e9dure pas \u00e0 pas pour configurer le linting JavaScript dans Visual Studio Code avec NPM et l’extension de code n\u00e9cessaire.<\/p>\n","protected":false},"author":1,"featured_media":164308,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[893,728,841],"tags":[1167],"class_list":["post-230273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-2","category-javascript-3","category-tutoriels","tag-affiai-fr"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/comments?post=230273"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/posts\/230273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media\/164308"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/media?parent=230273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/categories?post=230273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/fr\/wp-json\/wp\/v2\/tags?post=230273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}