Integrating React Native with Linters

ESLint LogoPrettier Logo

When you adhere to standards, developers know what to expect, learnability is increased, and confusion is reduced.

Concistency with ESlint and Prettier

📡 What you will learn

  • Having concistency across every files in your codebase
  • Run a linter using a cli tool from the terminal

👾 Before we start the exercise

  • ❗ Commit your work if it's not already done.
  • Push your code to GitHub.

👨‍🚀 Exercise 2

Automatically format your code on each save

  • Go to Code (or File) > Preferences > Settings
  1. Write 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

Prettier format on save preview on VSCode

Setup ESLint rules on your project

We can spend hours configuring ESLint rules... or we can simply use rules used by the community and install the ones from William.

Hint: If you want to create a file from the terminal you can use echo:

# ⚠️ For linux and macOS users only

echo '{ "extends": "react-native-wcandillon" }' > .eslintrc
  • Update your scripts on package.json to check errors
// package.json

  "scripts": {
    ...
    "lint": "eslint --ignore-path .gitignore --ext .js,.ts,.tsx ."
    ...
  }

Now you can run the lint script to teel if you have errors

yarn lint

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

yarn lint --fix
# same as `npm run lint -- --fix`
  • Run yarn lint --fix to automatically fix your errors
  • Commit your work
  • Push your project to GitHub to have a backup with git push

👽 Bonus