Linting
This part is optional, I highly recommended it: set up ESLint and Prettier on your project.
- ESLint statically analyzes your code to quickly find common problems.
- Prettier is an opinionated code formatter. So you wouldn't have to keep track of all the spaces and brackets when writing code.
ESLint
As of SDK 51, the Expo SDK has a lint command built in that sets up ESlint for your project with a minimal ESlint config. This will likely become more comprehensive in the future, such as asking you some CLI options so you can customize it more, but for now it's intentionally minimal.
In your project's root directory, run:
npx expo lint
If your project doesn't have ESLint set up (and the template does not), this will install all the necessary libraries and add an .eslintrc.js to your project.
Now running yarn lint (or npm run lint etc) you will see any linting errors. Also most editors are set up to show errors inline. For example, if you now add const blah = ""; somewhere in your code and run your lint command, you'll see an ESlint warning that this variable is unused.
ESLint warnings or even errors won't impact whether your code can be executed, it's just pointing out things that are easily missed and you might want to look at.
Prettier
Prettier is a commonly used code formatter for JavaScript projects. Open the Expo Docs on ESLint and you'll find instructions on how to set it up:
# if using yarn
yarn add -D prettier eslint-config-prettier eslint-plugin-prettier
# if using other package managers
npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier
Then, to integrate Prettier with ESlint, update your .eslintrc.js as follows:
module.exports = {
extends: ['expo', 'prettier'],
plugins: ['prettier'],
rules: {
'prettier/prettier': 'error',
},
};
Now if we run yarn lint we get a bunch of prettier formatting errors, (mostly because it defaults to double quotes). You can tell prettier you'd like to use single quotes by creating a prettier config file. I'm just going to go with the default and switch to double quotes.
The best thing about prettier errors is that they are auto-fixable. Simply run yarn lint --fix and they will all get automatically taken care of automagically!