web-dev-qa-db-fra.com

La configuration ESLint de Prettier + Airbnb

Récemment, j'ai commencé à utiliser Visual Studio Code pour mon éditeur et j'ai trouvé le formateur Prettier - JavaScript. Je pense que c'est un bon plugin car il m'aide à garder mon code à la recherche de Nice.

J'ai mis en place la configuration ESLint d'Airbnb et j'ai trouvé cela très utile.

Voici le piège. La configuration Airbnb ESLint que je cours actuellement ne joue pas avec Nice avec Prettier. Par exemple, pour la chaîne JavaScript, Prettier est formaté pour inclure les doubles ticks et le ESLint d’Airbnb comme des ticks simples. Lorsque je formate le code avec Prettier, ESLint d’Airbnb n’est pas d’accord.

Je sais que Kent Dodds a travaillé avec les config ESLint, entre autres, exemple ici.

Mais je n'arrive pas à trouver une solution qui me permette d'utiliser la magie de Prettier pour formater mon code au format ESLint d'Airbnb.

javascriptvisual-studioeslinteslint-config-airbnbprettier
26
Jiovan Melendez

Je pense que eslint-config-prettier a été créé uniquement à cette fin: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting -rules

En gros, il désactive toutes les règles relatives au style de code, car prettier le prendra en charge de toute façon.

Donc, vous venez d'installer ce plugin avec n'importe quel autre plugin eslint désiré (comme eslint-config-airbnb) et dans votre configuration eslint, il vous suffit de l’ajouter au champ extends. Par exemple:

{
  "extends": ["airbnb", "prettier"]
}
31
timetowonder

Voici quelques façons de le faire, par ordre de recommandation. Je préférerais la première approche car vous n'aurez jamais à vous soucier d'autres règles qui pourraient entrer en conflit à l'avenir.

i) Installer eslint-config-prettier et s’en prolonger dans .eslintrc. Cela désactive certaines règles de mise en forme d'ESLint susceptibles d'entrer en conflit avec Prettier:

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

ii) Ajout de "singleQuote": true au .prettierrc fichier de configuration:

{
  "singleQuote": true,
  ...
}

iii) Ajouter un --single-quote option de ligne de commande lorsque vous appelez Prettier:

$ prettier --single-quote ...

iv) Désactivez la règle quotes d'ESLint dans votre .eslintrc fichier de configuration (et autres fichiers potentiellement conflictuels):

{
  "rules": {
    "quotes": "off",
    ...
  }
}
9
Yangshun Tay

A plus propre est :

yarn add --dev eslint-plugin-prettier eslint-config-prettier

   // .eslintrc
   {
     "extends": ["airbnb", "plugin:prettier/recommended"]
   }

Le plugin:prettier/recommendedfait trois choses :

  • Active eslint-plugin-prettier.
  • Définit la règle plus jolie/plus jolie sur "
  • Étend la configuration eslint-config-prettier.

Et puis, si vous réagissez, vous pouvez ajouter prettier/react aussi:

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}
5
kyw

Donc, vous avez votre fichier .eslintrc, avec la propriété "extends": "airbnb" Ajouter une autre propriété, des règles, et les règles que vous allez écrire écraseront celles héritées de airbnb

"extends": "airbnb",
"rules": {
    "eqeqeq": 2,
    "comma-dangle": 1,
}

Maintenant, je suis juste en train d'écraser deux règles aléatoires, vous devrez chercher celle dont vous avez besoin :)

1
Fabio Lolli

Voici un peu interactif outil CLI Je me suis construit pour installer ESLint avec Prettier. Installez-le et lancez:

npx eslint-prettier-init

Ce qui résoudra votre problème.

0
Philip Schönholzer