ESLint

ESLint 是一个静态分析工具，可以帮助你快速查找并修复代码中的错误和风格错误。ESLint 提供的规则补充了 Flow 类型系统提供的检查。

¥ESLint is a static analysis tool which can help you quickly find and fix bugs and stylistic errors in your code. The rules ESLint provide complement the checks provided by Flow's type system.

你可以快速启动设置 ESLint，使用 Yarn 或 npm 安装 hermes-eslint。

¥You can quick-start setup ESLint, install hermes-eslint with either Yarn or npm.

yarn add --dev eslint hermes-eslint eslint-plugin-ft-flow
# or
npm install --save-dev eslint hermes-eslint eslint-plugin-ft-flow

然后在项目根目录中使用以下内容创建 eslint.config.(js|mjs|cjs) 或 .eslintrc.js 文件：

¥Then create a eslint.config.(js|mjs|cjs) or .eslintrc.js file in your project root with the following:

module.exports = {
  root: true,
  parser: 'hermes-eslint',
  plugins: [
    'ft-flow'
  ],
  extends: [
    'eslint:recommended',
    'plugin:ft-flow/recommended',
  ],
};

在上面的配置中，extends 插件的顺序很重要，因为 plugin:ft-flow/recommended 禁用了 eslint:recommended 中的一些规则，因此需要在之后定义它才能正常工作。

¥In the above config the order of the extends plugins is important as plugin:ft-flow/recommended disables some rules from eslint:recommended so it needs to be defined after to work correctly.

有关配置 ESLint 的更多信息，查看 ESLint 文档.

¥For more information about configuring ESLint, check out the ESLint docs.

然后，你可以使用以下命令检查代码库：

¥You can then lint your codebase with:

yarn run eslint . --ext .js,.jsx
# or
npm run eslint . --ext .js,.jsx

与 Prettier 一起使用

¥Usage With Prettier

如果你使用 prettier，还有一个有用的配置来帮助确保 ESLint 不会报告 prettier 将修复的格式问题：eslint-config-prettier。

¥If you use prettier, there is also a helpful config to help ensure ESLint doesn't report on formatting issues that prettier will fix: eslint-config-prettier.

通过将其添加到 extends 的末尾来使用此配置：

¥Using this config by adding it to the end of your extends:

  module.exports = {
    root: true,
    parser: 'hermes-eslint',
    plugins: [
      'ft-flow'
    ],
    extends: [
      'eslint:recommended',
      'plugin:ft-flow/recommended',
+     'prettier',
    ],
  };

附加插件

¥Additional Plugins

ESLint 插件在 ESLint 之上提供附加规则和其他功能。以下是一些可能有用的示例：

¥ESLint plugins provide additional rules and other functionality on top of ESLint. Below are just a few examples that might be useful:

• Flow 团队提供的有用语言规则：eslint-plugin-fb-flow

  ¥Helpful language rules by the Flow team: eslint-plugin-fb-flow

• 反应最佳实践：eslint-plugin-react 和 eslint-plugin-react-hooks

  ¥React best practices: eslint-plugin-react and eslint-plugin-react-hooks

• Jest 测试：eslint-plugin-jest

  ¥Jest testing: eslint-plugin-jest

• 导入/导出约定：eslint-plugin-import

  ¥Import/export conventions : eslint-plugin-import

• NodeJS 最佳实践：eslint-plugin-node

  ¥NodeJS best practices: eslint-plugin-node

• ESLint 注释限制：eslint-plugin-eslint-comments

  ¥ESLint comment restrictions: eslint-plugin-eslint-comments

每个插件都包含有关它们提供的各种配置和规则的文档。典型的插件可能会这样使用：

¥Every plugin that is out there includes documentation on the various configurations and rules they offer. A typical plugin might be used like:

  module.exports = {
    root: true,
    parser: 'hermes-eslint',
    plugins: [
      'ft-flow'
+     'jest',
    ],
    extends: [
      'eslint:recommended',
      'plugin:ft-flow/recommended',
+     'plugin:jest/recommended',
    ],
  };

搜索 npm 上的 "eslint 插件" 了解更多。

¥Search "eslint-plugin" on npm for more.