Dans cet article je souhaite partager avec vous ma configuration de VS Code pour le développement d’application React Native. Pour commencer nous allons voir les extensions à installer et ensuite nous verrons comment je configure chacun de mes nouveaux projets pour qu’ils fonctionnent correctement avec les extensions.

Les extensions à installer : React Native Tools Cette extension permet d’ajouter un environnement de développement pour React Native. En utilisant cette extension vous pourrez lancer les commandes react-native depuis la palette de commande VS Code. Cette extension ajoute l’ autocomplétion pour les APIs de React Native.

Prettier JavaScript Formatter Extension pour formater notre code JavaScript / CSS / etc… en utilisant le formateur de code Prettier

Flow Language Support Ajoute le support de Flow dans VS Code

Babel ES6/ES7 Ajoute la coloration de la syntaxe pour Babel ES6/ES7

Configuration d’un nouveau projet

Maintenant nous allons voir les différentes étapes de configuration lors de la création d’un nouveau projet.

On commence par créer notre projet :

react-native init VSCodeConfigurationSample

Configuration de ESLint :

Pour la configuration d’ESlint j’utilise la configuration de AirBnb. Les différentes méthodes d’installation sont disponible sur github.

Nous allons voir la méthode la plus générale (mac/windows/linux).

Premièrement il faut lister l’ensemble des dépendances de cette libraire avec la commande suivante :

npm info "eslint-config-airbnb@latest" peerDependencies

Ensuite il faut installer eslint-config-airbnb ainsi que l’ensemble des dépendances listées avec la commande précédente :

yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Enfin il faut ajouter babel-eslint

yarn add --dev babel-eslint

Maintenant vous devriez avoir un fichier .eslintrc dans votre projet (si ce n’est pas le cas créez le), ajoutez-y la configuration suivante :

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

Configuration de Prettier

Maintenant nous allons configurer Prettier pour qu’il formate notre code en fonction de nos règles eslint, de plus nous allons configurer VSCode pour que le formatage soit fait automatiquement lorsqu’on enregistre les modifications de notre fichier.

Ajoutez la librairie prettier-eslint

yarn add --dev prettier-eslint

Ensuite on va ouvrir les paramètres utilisateur de VS Code préférences > paramètres ou “CMD + ,” puis on ajoute les paramètres suivants :

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

Ici on indique à VS Code que l’on souhaite que l’éditeur formate le code lorsqu’on sauvegarde, ensuite on désactive le formatage javascript standard et enfin on ajoute l’intégration eslint pour Prettier.

Configuration de Flow Premièrement il faut déterminer quelle version de flow-bin nous devons installer. Pour cela ouvrez le fichier .flowconfig vous devriez trouver la version à la fin du fichier comme ci-dessous :

[version]
^0.49.1

Ensuite il faut installer flow-bin ainsi que babel-preset-flow

yarn add --dev flow-bin@0.49.1 babel-preset-flow

Puis on ajoute Flow comme preset dans notre fichier .babelrc, votre fichier devrait ressembler à celui ci-dessous :

{
  "presets": ["react-native", "flow"],
  "retainLines": true
}

Flow peut être installé de manière globale avec la même configuration pour chaque projet cependant il est préférable de l’installer par projet comme nous l’avons fait et d’avoir une configuration par projet. Cependant dans notre cas nous devons indiquer à VS Code qu’il doit utiliser Flow depuis les package NPM de notre projet.

Ouvrez les paramètres utilisateur et ajoutez-y la ligne suivante :

"flow.useNPMPackagedFlow": true

Enfin il y a un bug connu avec l’extension Flow Language Support la solution pour palier à ce bug est de désactiver la validation de la syntaxe par défaut de VS Code en ajoutant la ligne suivante dans les paramètres utilisateur :

"javascript.validate.enable": false

Extensions Bonus

Les extensions que nous avons vu précédemment sont pour moi des extensions basiques et indispensables pour le développement d’application React Native mais je voulais terminer cet article avec une liste d’extensions que j’utilise en plus et que j’apprécie :

• Auto Close Tag : Ajoute automatiquement la balise de fermeture d’un composant
• Color Highlight : Permet de visualiser directement la couleur d’une valeur dans VS Code
• Path Intellisense : Ajoute l’autocomplétion pour les chemins de fichier (utile pour les imports)
• React-Native/React/Redux snippets for es6/es7 : Liste de snippet de code pour React-Native/React/Redux

Voila nous avons terminer avec la configuration de VS Code pour le développement d’applications React Native. Si vous avez des extensions que vous utilisez et qui sont intéressantes partagez les dans les commentaires.