From 58ef93e5c4ac3000be45367171103f7b3b2f4260 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Tue, 7 May 2024 22:40:12 +0530 Subject: [PATCH] [docs] Update ESLint guide to include info on `npx expo lint` (#28630) # Why Add info about `npx expo lint` in ESLint guide for SDK 51 and above. # How By updating sections under ESLint and Prettier to include the new information and re-structure the existing information accordingly. # Test Plan Run docs locally and visit: http://localhost:3002/guides/using-eslint/#eslint ## Preview ![CleanShot 2024-05-06 at 03 10 17@2x](https://github.com/expo/expo/assets/10234615/2c7f3e01-52b0-42fd-8a44-09dddab3e9a1) ![CleanShot 2024-05-06 at 03 10 24@2x](https://github.com/expo/expo/assets/10234615/018b7055-516d-4441-8fb2-55b4ed5d4f1c) # Checklist - [x] Documentation is up to date to reflect these changes (eg: https://docs.expo.dev and README.md). - [x] 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). --- docs/pages/guides/using-eslint.mdx | 179 +++++++++++++++++++++-------- 1 file changed, 132 insertions(+), 47 deletions(-) diff --git a/docs/pages/guides/using-eslint.mdx b/docs/pages/guides/using-eslint.mdx index dd29b64677b6a..1d305be922cbb 100644 --- a/docs/pages/guides/using-eslint.mdx +++ b/docs/pages/guides/using-eslint.mdx @@ -3,12 +3,13 @@ title: Use ESLint and Prettier description: A guide on configuring ESLint and Prettier to format Expo apps. --- -import { GithubIcon } from "@expo/styleguide-icons"; +import { GithubIcon } from '@expo/styleguide-icons'; import { BoxLink } from '~/ui/components/BoxLink'; import { CODE } from '~/ui/components/Text'; import { Step } from '~/ui/components/Step'; import { Tabs, Tab, TabsGroup } from '~/ui/components/Tabs'; import { Terminal } from '~/ui/components/Snippet'; +import { Collapsible } from '~/ui/components/Collapsible'; @@ -16,42 +17,41 @@ import { Terminal } from '~/ui/components/Snippet'; This guide provides steps to set up and configure ESLint and Prettier. -## Setup +## ESLint - +### Setup -Install ESLint, Prettier, and [`eslint-config-universe`](https://github.com/expo/expo/tree/main/packages/eslint-config-universe#eslint-config-universe) in your project. +To set up ESLint in your Expo project, you can use the Expo CLI to install the necessary dependencies. Running this command also creates a **.eslintrc.js** file at the root of your project which extends configuration from [`eslint-config-expo`](https://github.com/expo/expo/tree/main/packages/eslint-config-expo). - - - - + - - - - + + + -The `eslint-config-universe` library provides shared ESLint configurations for Node.js, web and universal Expo apps. +Install ESLint, and [`eslint-config-expo`](https://github.com/expo/expo/tree/main/packages/eslint-config-expo) in your project. + + -Create an ESLint config file called **.eslintrc.js** in the project root. +Create an ESLint configuration file called **.eslintrc.js** at the root of your project. The configuration in **.eslintrc.js** extends [`eslint-config-expo`](https://github.com/expo/expo/tree/main/packages/eslint-config-expo). ```js .eslintrc.js module.exports = { - root: true, - extends: [ - /* @info This is the internal preset used by the Expo team. You can use any plugin you'd like. */ - 'universe/native', - /* @end */ - ], - rules: { - // Ensures props and state inside functions are always up-to-date - 'react-hooks/exhaustive-deps': 'warn', - }, + extends: 'expo', }; ``` @@ -73,24 +73,49 @@ You can replace the `.` with specific directories or files to lint. For example, -## Usage + + +### Usage -You can lint your code manually from the command line with the script: +> **info** **Recommended:** If you're using VS Code, install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to lint your code as you type. + +You can lint your code manually from the command line with the `expo lint` script: - - - - - - + - + + +Running the above command will run the `lint` script from **package.json**. + +```sh +# Example output for npx expo lint command +> npm run eslint . +$ /app/node_modules/.bin/eslint . + +/app/components/HelloWave.tsx + 22:6 warning React Hook useEffect has a missing dependency: 'rotateAnimation'. Either include it or remove the dependency array react-hooks/exhaustive-deps + +✖ 1 problem (0 errors, 1 warning) +``` -> **Recommended:** If you're using VS Code, install the [ESLint extension](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) to lint your code as you type. + -## Environment configuration + + + + + + + + +### Environment configuration ESLint is generally configured for a single environment. However, the source code is written in JavaScript in an Expo app that runs in multiple different environments. For example, the **app.config.js**, **metro.config.js**, **babel.config.js**, and **app/+html.tsx** files are run in a Node.js environment. It means they have access to the global `__dirname` variable and can use Node.js modules such as `path`. Standard Expo project files like **app/index.js** can be run in Hermes, Node.js, or the web browser. @@ -110,7 +135,23 @@ module.exports = config; ## Prettier -To customize its settings, create a **.prettierrc** file at the root of your project and add the configuration. +### Installation + +To install Prettier in your project: + + + +### Setup + +To customize Prettier settings, create a **.prettierrc** file at the root of your project and add your configuration. +## Migration to `eslint-config-expo` -## Next step +If you're migrating from an older version of Expo SDK that has `eslint-config-universe` installed, install `eslint-config-expo` library and update your ESLint configuration to extend it from the new library. - - eslint-config-universe - - } - Icon={GithubIcon} - description="Learn more about shared ESLint configurations for Node.js, web and universal Expo apps." - href="https://github.com/expo/expo/tree/main/packages/eslint-config-universe" + + +Remove the `eslint-config-universe` library and install the `eslint-config-expo` manually: + + + + + + + +Update your ESLint configuration to extend the `eslint-config-expo`: + +```js .eslintrc.js +module.exports = { + /* @info Replace the extends key with the new configuration. */ + extends: 'expo', + /* @end */ + /* @hide ...*/ /* @end */ +}; +``` + +You can continue using your existing ESLint configuration with the new library and the `lint` script in your **package.json**. If your project uses SDK 51 and above, you can switch to using `npx expo lint` by following the next step. + + + + + +To use `npx expo lint` command to lint your code, update the `lint` script in your **package.json**: + +```json package.json +{ + "scripts": { + /* @info */ + "lint": "expo lint" + /* @end */ + } +} +``` + +> **Note:** The above configuration will work only for SDK 51 and above. + +Now you can run `npx expo lint` to lint your code. + + + +