Skip to content

Commit

Permalink
[docs] update prettier installation instructions (#28681)
Browse files Browse the repository at this point in the history
# Why

Following the current instructions in the docs aren't sufficient to set
up prettier in your project

# How

Add missing instructions.

# Test Plan

On a new SDK 51 project, run `npx expo lint` to create a an eslint
config and then follow the instructions in the docs to also set up
prettier.
Before: `npx expo lint` will not check for prettier errors
After: `npx expo lint` will check for prettier errors.

| Before      | After |
| ----------- | ----------- |
| <img width="971" alt="Screenshot 2024-05-08 at 14 19 40"
src="https://github.com/expo/expo/assets/6534400/7a8aa0f7-8c5e-4533-9c67-38e21785d433">
| <img width="958" alt="Screenshot 2024-05-08 at 14 20 49"
src="https://github.com/expo/expo/assets/6534400/97c1fbac-265b-469c-85fb-a3b005c8e305">
|

# Checklist

<!--
Please check the appropriate items below if they apply to your diff.
This is required for changes to Expo modules.
-->

- [ ] Documentation is up to date to reflect these changes (eg:
https://docs.expo.dev and README.md).
- [ ] Conforms with the [Documentation Writing Style
Guide](https://github.com/expo/expo/blob/main/guides/Expo%20Documentation%20Writing%20Style%20Guide.md)
- [ ] This diff will work correctly for `npx expo prebuild` & EAS Build
(eg: updated a module plugin).
  • Loading branch information
kadikraman committed May 8, 2024
1 parent 4d95f80 commit eaba55c
Showing 1 changed file with 18 additions and 2 deletions.
20 changes: 18 additions & 2 deletions docs/pages/guides/using-eslint.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -142,15 +142,31 @@ To install Prettier in your project:
<Terminal
cmd={[
'# For other package managers',
'$ npx expo install -- --save-dev prettier',
'$ npx expo install -- --save-dev prettier eslint-config-prettier eslint-plugin-prettier',
'',
'# For yarn only',
'$ yarn add -D prettier',
'$ yarn add -D prettier eslint-config-prettier eslint-plugin-prettier',
]}
/>

### Setup

To integrate Prettier with ESlint, update your **.eslintrc.js**:

```js .eslintrc.js
module.exports = {
extends: ["expo", "prettier"],
plugins: ["prettier"],
rules: {
"prettier/prettier": "error",
},
};
```

Now, when you run `npx expo lint`, anything that is not aligned with Prettier formatting will be caught as an error.

> **Note:** In the above configuration, you can use `"prettier/prettier": "warn"` if you prefer these formatting issues as warnings instead of errors.
To customize Prettier settings, create a **.prettierrc** file at the root of your project and add your configuration.

<BoxLink
Expand Down

0 comments on commit eaba55c

Please sign in to comment.