使用 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 安装必要的依赖。运行此命令还会在项目的根目录中创建一个 .eslintrc.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 .eslintrc.js file at the root of your project which extends configuration from eslint-config-expo.

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

{
  "scripts": {
    "lint": "eslint ."
  }
}

用法

¥Usage

受到推崇的：如果你使用 VS Code，请安装 ESLint 扩展 以在你键入时检查代码。

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

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

环境配置

¥Environment configuration

ESLint 通常是为单一环境配置的。但是，源代码是在运行于多个不同环境中的 Expo 应用中用 JavaScript 编写的。例如，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

要将 Prettier 与 ESlint 集成，请更新你的 .eslintrc.js：

¥To integrate Prettier with ESlint, update your .eslintrc.js:

module.exports = {
  extends: ['expo', 'prettier'],
  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/prettier": "warn"。

¥Note: In the above configuration, you can use "prettier/prettier": "warn" if you prefer these formatting issues as warnings instead of errors.

要自定义 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 在大型项目上运行可能会很慢。加快该过程的最简单方法是检查更少的文件。将 .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

迁移到 eslint-config-expo

¥Migration to eslint-config-expo

如果你从安装了 eslint-config-universe 的旧版 Expo SDK 迁移，请安装 eslint-config-expo 库并更新你的 ESLint 配置以从新库扩展它。

¥If you're migrating from an older version of Expo SDK that has eslint-config-universe installed, install eslint-config-expo library and update your ESLint configuration to extend it from the new library.

module.exports = {
  extends: 'expo',
  %%placeholder-start%%...%%placeholder-end%%
};

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