How to configure ESLint and Prettier for Expo projects

2 min readMar 1, 2022

In Expo projects, eslint and prettier are doesn’t configured by default. So we need to configure ourselves. For this reason, Expo team made a package named eslint-config-universe to configure these tools. Lets begin how to configure this package to our project.

Installation

We can add eslint-config-universe for development dependices as below:

yarn add -D eslint-config-universe

Also we need to install another helper dependencies such as eslint, prettier etc.

yarn add -D eslint prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser

Usage

We can use extends option to import this config to our project. We can change package.json by adding eslintConfigsection as follows:

{
  "eslintConfig": {
    "extends": "universe/native"
  }
}

Prettier config

For prettier configuration, lets create a .prettierrc file with contents like this:

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5"
}

Conclusion

From my perspective, Eslint and Prettier are vital for development. And in expo projects you can easily configure with eslint-config-universe.
See you in my next post ✌️

References

https://github.com/expo/expo/tree/main/packages/eslint-config-universe