ESLint

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

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

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

然后在您的项目根目录中创建一个 .eslintrc.js 文件，内容如下

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

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

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

然后，您可以使用以下命令对代码库进行代码风格检查

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

与 Prettier 一起使用

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

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

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

其他插件

ESLint 插件在 ESLint 之上提供了额外的规则和其他功能。以下只是一些可能对您有用的示例

Flow 团队提供的有用的语言规则：eslint-plugin-fb-flow
React 最佳实践：eslint-plugin-react 和 eslint-plugin-react-hooks
Jest 测试：eslint-plugin-jest
导入/导出约定：eslint-plugin-import
NodeJS 最佳实践：eslint-plugin-node
ESLint 注释限制：eslint-plugin-eslint-comments

每个现有的插件都包含有关它们提供的各种配置和规则的文档。通常，插件的使用方式如下

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

在 npm 上搜索“eslint-plugin” 以了解更多信息。

与 Prettier 一起使用​

其他插件​

与 Prettier 一起使用

其他插件