使用 ESLint 和 Prettier

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

For the complete documentation index, see llms.txt. Use this Use this file to discover all available pages.

ESLint 是一个 JavaScript 代码检查器，可帮助你查找并修复代码中的错误。它是一个很棒的工具，能帮助你编写更好的代码，并在问题进入生产环境之前捕获错误。结合使用时，你还可以使用 Prettier，这是一个代码格式化工具，可确保所有代码文件遵循一致的样式。

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

ESLint

设置

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

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

用法

推荐： 如果你使用的是 VS Code，请安装 ESLint 扩展，以便在你输入时对代码进行检查。

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

运行上述命令会执行 package.json 中的 lint 脚本。

环境配置

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

配置特定于环境的全局变量的方法在 Flat 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

安装

要在你的项目中安装 Prettier：

设置

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 格式不一致的内容都会被捕获为错误。

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

故障排查

ESLint 在 VS Code 中没有更新

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

ESLint 很慢

在大型项目中，ESLint 的运行可能会很慢。加快流程最简单的方法是减少需要检查的文件数量。向项目根目录添加一个 .eslintignore 文件，以忽略某些文件和目录，例如：

/.expo
node_modules

迁移到 Flat config

注意： Expo SDK 53 及更高版本支持 Flat config。

升级 ESLint 和 eslint-config-expo：

如果你完全没有自定义过 ESLint 配置，请删除你的 .eslintrc.js，然后使用以下命令生成新的配置：

或者，你也可以根据 ESLint 迁移指南 迁移你的配置。npx expo lint 同时支持旧版配置和 Flat config，因此新的配置会被 CLI 自动识别。