Exemples détaillés d'étapes pour configurer l'environnement de développement React avec VSCode

La configuration par défaut de vscode n'est pas adaptée à la syntaxe JSX de React, ce qui se reflète dans l'erreur d'indentation par défaut après l'utilisation du formatage ou du collage automatique. Bien que l'erreur puisse être atténuée en changeant le mode de langue, le formatage après le changement de mode de langue. n'est toujours pas idéal. Cet article présente principalement les étapes de configuration de l'environnement de développement React dans VSCode. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

En utilisant ensemble les plug-ins ESLint et Prettier, vous pouvez obtenir une prise en charge parfaite de la syntaxe JSX dans vscode.

Plug-in d'installation de l'éditeur

Vous devez installer le plug-in suivant dans vscode :

1. ESLint

2. Plus joli

Configuration dans le projet

Configuration ESLint

Configuration de base

Installer les dépendances babel-eslint, eslint-plugin-jsx-a11y, eslint-plugin-react dans le projet :

npm install babel-eslint eslint-plugin-jsx-a11y eslint-plugin-react --save-dev

Recommandé La configuration ESLint est la suivante (modifier .eslintrc)

{
 // Use the AirBnB JS styleguide - https://github.com/airbnb/javascript
 "extends": "airbnb",

 // We use 'babel-eslint' mainly for React Native Classes
 "parser": "babel-eslint",
 "ecmaFeatures": {
  "classes": true,
 },

 // jsx相关插件
 "plugins": ["react", "jsx-a11y", "import"]

 // We can add/overwrite custom rules here
 "rules": {
  // React Native has JSX in JS files
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

  // React Native includes images via require("../images/example.png")
  "global-require": 0
 }
}

Quelques points à noter :

1. Si vous utilisez du fil pour l'installation, vous devez créer manuellement le fichier .eslintrc

2. Si eslint signale une erreur pendant l'utilisation et vous invite à le faire une dépendance est manquante, installez simplement les dépendances pertinentes

Problèmes que vous pouvez rencontrer

Si le suffixe du nom de fichier dans le projet est .js à la place de .jsx, vous pouvez rencontrer l'erreur suivante :

Copier le code Le code est le suivant :

[eslint] JSX non autorisé dans fichiers avec l'extension '.js' (react/jsx-filename-extension)

Ajoutez simplement de nouvelles règles dans .eslintrc pour autoriser les suffixes .js et .jsx :

"rules": {
 "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
}

react-native 0.49 et versions ultérieures sont déjà disponibles. Il n'est pas recommandé d'utiliser .jsx comme suffixe Veuillez vous référer à cette discussion. Pas d'extension .jsx ?

. erreur de validation des accessoires

[eslint] 'navigation' is missing in props validation (react/prop-types)

La détection du type d'accessoires permet d'écrire des composants réutilisables. Il est préférable de ne pas désactiver ce rappel si vous. doit l'éteindre, ajoutez les règles suivantes :

"rules": {
 "react/prop-types": 0
}

Configurer plus joli

L'effet que nous souhaitons est : Configurer plus joli pour formater automatiquement le code JSX lors de l'enregistrement des fichiers selon les règles ESLint :

Installer dans le projet prettier-eslint

npm install prettier-eslint --save-dev

.

Configurer l'espace de travail vscode

Ajouter dans la section de personnalisation de l'utilisateur de l'espace de travail vscode Le code suivant :

// Format a file on save. 
// A formatter must be available, 
// the file must not be auto-saved, 
// and editor must not be shutting down.
"editor.formatOnSave": true,
  
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
  
// Use 'prettier-eslint' instead of 'prettier'. 
// Other settings will only be fallbacks 
// in case they could not be inferred from eslint rules.
"prettier.eslintIntegration": true,

Recommandations associées :

Exemple d'explication détaillée de la configuration vscode vue-cli eslint

Aperçu du démarque et modification du style d'aperçu dans VSCode

Résumé et organisation du plug-in VsCode

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!