React Native Ecosystem

What you will learn

  • Having concistency across every files in your codebase
  • Install a linter plugin on VSCode
  • Run a linter with the cli

👾 Before we start the exercise

👨‍🚀 Exercise 2

  • Launch VSCode Quick Open (cmd + p or ctrl + p), paste the following command, and press enter.
ext install dbaeumer.vscode-eslint esbenp.prettier-vscode
  • Automatically format your code on each save. Go to Code (or File) > Preferences > Settings

format on save

  1. type format on the search input
  2. ✅ Editor: Format on save
  3. Optional sometimes you have conflicts with others formatters. If it's not working just force the usage with Prettier - code formatter
echo '{ "extends": "react-native-wcandillon" }' > .eslintrc
  • ❗ Commit your work if it's not already done.

  • Now we are going to install eslint on your project. Why are ew doing this? because if you work on a team, we want to have the same setup for everyone.

yarn add eslint --dev
  • Check and fix errors, update your scripts on package.json
// package.json

  "scripts": {
    ...
    "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx ."
    ...
  }
  • Automatically fix your errors

you don't need to manullay lint your files. We can run a script for that with:

yarn lint --fix
  • Open repo.new and ship your files to the cloud to have a backup.