使用 ESLint 和 Prettier

有关配置 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 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 通常为单一环境配置。然而，源代码是在一个在多个不同环境中运行的 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.