使用 ESLint 和 Prettier

有关配置 ESLint 和 Prettier 以格式化 Expo 应用的指南。

ESLint 是一个 JavaScript linter，可以帮助你查找并修复代码中的错误。它是一个很棒的工具，可以帮助你编写更好的代码并在错误投入生产之前发现错误。你可以结合使用 Prettier，这是一种代码格式化程序，可确保所有代码文件遵循一致的样式。

¥ESLint is a JavaScript linter that helps you find and fix errors in your code. It's a great tool to help you write better code and catch mistakes before they make it to production. In conjunction, you can use Prettier, a code formatter that ensures all the code files follow a consistent styling.

本指南提供设置和配置 ESLint 和 Prettier 的步骤。

¥This guide provides steps to set up and configure ESLint and Prettier.

ESLint

设置

¥Setup

要在你的 Expo 项目中设置 ESLint，你可以使用 Expo CLI 安装必要的依赖。运行此命令还会在项目根目录创建一个 eslint.config.js 文件，该文件扩展了 eslint-config-expo 的配置。

¥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 eslint.config.js file at the root of your project which extends configuration from eslint-config-expo.

从 SDK 53 开始，创建的 ESLint 配置文件将使用 扁平化配置 格式。但是，旧版配置也将受支持。

module.exports = {
  extends: 'expo',
};

{
  "scripts": {
    "lint": "expo lint"
  }
}

Usage

Recommended: If you're using VS Code, install the ESLint extension to lint your code as you type.

You can lint your code manually from the command line with the npx expo lint script:

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.

You can add the eslint-env comment directive to the top of a file to tell ESLint which environment the file is running in. For example, to tell ESLint that a file is run in Node.js, add the following comment to the top of the file:

/* eslint-env node */
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(
  __dirname
);

module.exports = config;

Prettier

Installation

To install Prettier in your project:

Setup

const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
const eslintPluginPrettierRecommended = require('eslint-plugin-prettier/recommended');

module.exports = defineConfig([
  expoConfig,
  eslintPluginPrettierRecommended,
  {
    ignores: ['dist/*'],
  },
]);

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.

To customize Prettier settings, create a .prettierrc file at the root of your project and add your configuration.

Troubleshooting

ESLint is not updating in VS Code

If you're using VS Code, install the ESLint extension to lint your code as you type. You can try restarting the ESLint server by running the command ESLint: Restart ESLint Server from the command palette.

ESLint is slow

ESLint can be slow to run on large projects. The easiest way to speed up the process is to lint fewer files. Add a .eslintignore file to your project root to ignore certain files and directories such as:

/.expo
node_modules

Migration to Flat config

info 注释：Expo SDK 53 及更高版本支持扁平配置。

¥info Note: Flat config is supported in Expo SDK 53 and above.

升级 ESLint 和 eslint-config-expo：

¥Upgrade ESLint and eslint-config-expo:

如果你根本没有自定义 ESLint 配置，请删除 .eslintrc.js 并使用以下命令生成新配置：

¥If you haven't customized your ESLint config at all, delete your .eslintrc.js and generate the new config with:

或者，你可以根据 ESLint 迁移指南 迁移你的配置。npx expo lint 同时支持旧版配置和扁平化配置，因此 CLI 将自动选择新配置。

¥Alternatively, migrate your config based on the ESLint's migration guide. npx expo lint supports both legacy and flat config, so the new config will automatically be picked up by the CLI.