Configuration de VS Code pour le développement de React

Étapes simples pour obtenir une belle configuration VS Code avec des conseils de peluchage et un formatage lors de l'enregistrement

Cet article explique les étapes simples pour obtenirune belle configuration VS Code pour le développement de React, avecconseils de peluchageetformater lors de l'enregistrement.

ESLint

Tout d'abord, nous allons installer ESLint. ESLint est un outil incroyable qui vous aide à garder votre code minuscule et propre.

InstallerESLinten utilisant leExtension ESLintdisponible sur le magasin d'extensions de code VS.

Ensuite, à partir du terminal, exécutez cesFilcommandes (si vous n'avez pas encore installé Yarn, suivez le lien vers mon tutoriel pour trouver un petit guide):

yarn add babel-eslint
yarn add eslint-config-airbnb
yarn add eslint-plugin-jsx-a11y
yarn add eslint-plugin-react

Now, create a .eslintrc.json file in the root of your project, and add the following lines to have a basis ESLint configuration that works for React development, with JSX support:

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}

Prettier

The next step I suggest is to install Prettier. Prettier is a JavaScript opinionated formatter. It’s a great tool because it helps you standardize your codebase, and it’s useful even if you code alone. In a team, it’s super useful as it avoids differences in code styling. Use what Prettier suggests.

You can install the Prettier VS Code extension with npm:

npm install -g prettier-eslint --save-dev

Next we’re going to add a few rules to the VS Code configuration, to apply Prettier on every save, and integrate it with ESLint. Press cmd+, (on Mac) and the VS Code configuration should show up. Enter this at the end:

"editor.formatOnSave": true,
"javascript.format.enable": false,
"prettier.eslintIntegration": true

Download my free React Handbook


More react tutorials: