This documentation is available as Markdown for AI agents and LLMs. See the full Markdown index or append .md to any documentation URL.

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

ESLint 是一个 JavaScript 代码检查工具，帮助你发现并修复代码中的错误。它是一个很棒的工具，可以帮助你写出更好的代码，并在错误进入生产环境之前就捕捉到它们。与此同时，你可以使用 Prettier，一个代码格式化工具，确保所有的代码文件都遵循一致的风格。

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

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

ESLint

设置

🌐 Setup

信息 从 SDK 53 开始，默认的 ESLint 配置文件使用 Flat 配置 格式。它也支持旧版配置。对于 SDK 52 及更早版本，默认的 ESLint 配置文件使用旧版配置，不支持 Flat 配置。

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

用法

🌐 Usage

信息 推荐： 如果你使用 VS Code，安装 ESLint 插件 可以在你输入代码时进行代码检查。

你可以使用 npx expo lint 脚本从命令行手动检查你的代码：

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

运行上述命令将会从 package.json 执行 lint 脚本。

🌐 Running the above command will run the lint script from package.json.

环境配置

🌐 Environment configuration

ESLint 通常为单一环境配置。然而，源代码是在一个在多个不同环境中运行的 Expo 应用中用 JavaScript 编写的。例如，app.config.js、metro.config.js、babel.config.js 和 src/app/+html.tsx 文件在 Node.js 环境中运行。这意味着它们可以访问全局 __dirname 变量并且可以使用 Node.js 模块，如 path。标准的 Expo 项目文件如 src/app/index.js 可以在 Hermes、Node.js 或网页浏览器中运行。

🌐 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 src/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 src/app/index.js can be run in Hermes, Node.js, or the web browser.

配置特定环境全局变量的方法在扁平配置和传统配置之间有所不同：

🌐 The approach to configure environment-specific globals differs between Flat config and legacy config:

const { defineConfig, globalIgnores } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');

module.exports = defineConfig([
  globalIgnores(['dist/*']),
  expoConfig,
  {
    files: ['babel.config.js'],
    languageOptions: {
      globals: globals.node,
    },
  },
]);

import path from 'path';
const __dirname = path.dirname(__filename);

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

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

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

module.exports = config;

Prettier

安装

🌐 Installation

要在你的项目中安装 Prettier：

🌐 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'],
  ignorePatterns: ['/dist/*'],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

现在，当你运行 npx expo lint 时，任何不符合 Prettier 格式的内容都会被视为错误。

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

要自定义 Prettier 设置，请在项目根目录下创建一个 .prettierrc 文件，并添加你的配置。

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

故障排除

🌐 Troubleshooting

ESLint 在 VS Code 中未更新

🌐 ESLint is not updating in VS Code

如果你使用 VS Code，可以安装 ESLint 扩展 来在输入代码时进行代码检查。你可以尝试通过从 命令面板 运行命令 ESLint: Restart ESLint Server 来重启 ESLint 服务器。

🌐 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 运行缓慢

🌐 ESLint is slow

ESLint 在大型项目上运行可能会很慢。加快这个过程最简单的方法是对较少的文件进行 lint。可以在项目根目录下添加一个 .eslintignore 文件，以忽略某些文件和目录，例如：

🌐 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

迁移到 Flat 配置

🌐 Migration to Flat config

信息 注意： Expo SDK 53 及更高版本支持扁平配置。

升级 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.