EsLint et configuration plus jolie React Native (style Airbnb)

Répartition des étapes

1. Installer les dépendances

Supprimez la configuration ESLint précédente et installez les packages nécessaires.

Commandes :

yarn remove @react-native-community/eslint-config eslint

yarn add -D eslint eslint-plugin-react-native prettier eslint-config-prettier

2. Initialisez ESLint

Exécutez la commande suivante pour initialiser ESLint et générer un fichier de configuration :

npx eslint --init

Suivez les invites comme indiqué ci-dessous :

• T1 : Choisissez « Pour vérifier la syntaxe, rechercher des problèmes et appliquer le style de code ».
• T2 : Choisissez « Modules JavaScript (import/export) ».
• T3 : Choisissez « Réagir ».
• T4 : Sélectionnez « Non » pour la prise en charge de TypeScript.
• Q5 : Choisissez « Node » (puisque React Native s’exécute dans un environnement Node).
• Q6 : Choisissez « Utiliser un guide de style populaire ».
• Q7 : Choisissez « Airbnb ».
• Q8 : Choisissez « JSON » pour le format du fichier de configuration.

Sélectionnez « Oui » lorsque vous êtes invité à installer les dépendances.

3. Mise à jour .eslintrc.json

Remplacer le généré .eslintrc.json fichier avec la configuration suivante à intégrer Plus jolie et règles spécifiques à React Native :

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "airbnb/hooks",
    "prettier"
  ],
  "plugins": ["react", "react-native"],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "rules": {
    "react/function-component-definition": "off",
    "no-param-reassign": "off",
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "no-use-before-define": ["error", { "variables": false }],
    "react/prop-types": ["error", { "ignore": ["navigation", "navigation.navigate"] }],
    "react-native/no-inline-styles": "error",
    "max-lines": ["error", { "max": 500 }]
  }
}

4. Créer .eslintignore

Ajouter un .eslintignore file pour exclure certains fichiers ou répertoires des vérifications ESLint.

.eslintignore:

node_modules/
build/*.js
config/*.js
coverage/*.js
coverage/*
jest/*.js
__tests__/*
__tests__/*.js

5. Créer .prettierrc.json

Ajoutez la configuration suivante dans un .prettierrc.json fichier à configurer Plus jolie règles de formatage :

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}

6. Ajoutez des scripts à package.json

Ajoutez les scripts suivants à votre package.json fichier à exécuter ESLint et Plus jolie:

package.json:

"scripts": {
  "lint": "eslint .",
  "lintFixAll": "eslint 'src/**/*.{js,jsx}' --fix",
  "prettierFixAll": "prettier --write 'src/**/*.{js,jsx}'",
  "fix:lintPrettier": "yarn prettierFixAll && yarn lintFixAll"
}

Cela vous permettra de pelucher et de résoudre les problèmes de formatage du code avec une seule commande.

7. Utilisation

Vous pouvez désormais exécuter les commandes suivantes pour vérifier et résoudre les problèmes de votre projet :

• Lint tous les fichiers : yarn lint
• Résolvez tous les problèmes ESLint : yarn lintFixAll
• Résolvez tous les problèmes de formatage de Prettier : yarn prettierFixAll
• Exécutez les correctifs Prettier et ESLint : yarn fix:lintPrettier

Conclusion

En suivant ces étapes, votre projet React Native sera mis en place avec ESLint, Plus jolieet Le guide de style d’Airbnbgarantissant la qualité du code et la cohérence du formatage.