使用 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

从 SDK 53 开始，默认的 ESLint 配置文件使用 扁平化配置 格式。它也支持旧版配置。对于 SDK 52 及以下版本，默认的 ESLint 配置文件使用旧版配置，不支持扁平化配置。

要在你的 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.

用法

¥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 通常针对单一环境进行配置。但是，源代码是用 JavaScript 编写的，并且运行在多个不同环境中的 Expo 应用中。例如，app.config.js、metro.config.js、babel.config.js 和 app/+html.tsx 文件都在 Node.js 环境中运行。这意味着他们可以访问全局 __dirname 变量，并可以使用 Node.js 模块，例如 path。标准的 Expo 项目文件（例如 app/index.js）可以在 Hermes、Node.js 或 Web 浏览器中运行。

¥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.

你可以在文件顶部添加 eslint-env 注释指令，以告知 ESLint 该文件在哪个环境中运行。例如，要告诉 ESLint 某个文件在 Node.js 中运行，请在文件顶部添加以下注释：

¥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

要在你的项目中安装 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.