BAM 的 ESLint 插件

这个工程是一个ESLint插件,它收集所有规则,插件和解析器,在任何新的反应-原生BAM项目中都应该使用.

规则和配置细节列表可见 here。 。 。 .

快速设置

安装插件及其对等依赖 :

yarn add @bam.tech/eslint-plugin --dev
npx install-peerdeps @bam.tech/eslint-plugin --dev --yarn

遗产配置(ESLint 8.x和以下)

那就更新你的 .eslintrc 配置文件 :

// .eslintrc
{
  "extends": "plugin:@bam.tech/recommended",
  "overrides": [
    {
      "files": ["*.test.tsx", "*.test.ts"],
      "extends": "plugin:@bam.tech/tests"
    }
  ]
}

平面配置

• 安装插件 : yarn add -D @bam.tech/eslint-plugin
• 创建一个 eslint.config.js 在工程根中的文件 :

const pluginBam = require("@bam.tech/eslint-plugin");

module.exports = [
  ...pluginBam.configs.recommended,
  ...pluginBam.configs.a11y,
  ...pluginBam.configs.import,
  ...pluginBam.configs.tests,
  {
    rules: {
      "@bam.tech/require-named-effect": "error",
    },
  },
];

在单列上设置插件

更新您的 .vscode/settings.json 通过使用插件添加应用程序目录:

// .vscode/settings.json
{
  ...
  "eslint.workingDirectories": [
    "apps/yourFirstApp",
    "apps/yourSecondApp"
    ]
}

处理被 TypeScript 忽略的文件

插件默认行为是使用TypeScript配置来插入所有TypeScript文件. 然而,在您的项目中,可能会有您选择用 TypeScript 忽略的文件. 最好也禁用ESLint检查这些文件. 要达到此目的, 请将您想要忽略的文件添加到您的 ESLint 的覆盖部分 eslintrc.js下面是这方面的一个例子。 模拟文件的配置被覆盖: TypeScript 解析器被删除, 以及该程序的行为 @typescript-eslint/return-await 规则被修改.

overrides: [
  {
    files: ["mocks/**/*"],
    parserOptions: {
      project: null,
    },
    rules: {
      "@typescript-eslint/return-await": "off",
    },
  },
];

QQ 反应版本

随着React 18的引入,不再需要在你的JSX文件中导入React. ESLint插件被配置为回放版本18及以上,因此不会遇到出错. 然而,TypeScript如果配置不正确,将产生出错. 为了解决这个问题,只需添加 "jsx": "react-native" 给您的 tsconfig.json 文档.

如果你的项目使用一个低于18的回放版本,iyou应该升级到更新的回放版本. 如果升级不是一个选项, 情况是这样: 在您的 JSX 文件里导入反应仍然是强制性的, 但 ESLint 不会标出任何错误, 尽管它应该。 这是由于插件配置;推荐的配置扩展了插件反应/jsx运行时间,从而禁用以下规则:

• 'react/jsx-uses-react': "error"
• 'react/react-in-jsx-scope': "error"

这些规则至关重要,因为当反应不在范围时,这些规则会引发错误。 因此,你需要把它们纳入你的.eslintrc.js文件中的规则部分,以确保每当有人省略了输入以反应时都会标出错误.

记住,推荐的解决方案是升级到更新的React版本. 只有在升级不可行的例外情况下,才应无视这一建议.

可共享配置

此插件导出多种配置, 可用于您 .eslintrc 配置文件 :

这些配置需要一些同行的依赖性. 您可以用下列方式列出:

npm info "@bam.tech/esling-plugin" peerDependencies

如果您使用 npm 第5页 您可以通过运行自动安装:

npx install-peerdeps @bam.tech/eslint-config -D

埃斯林特规则

此插件导出一些自定义规则, 您可以在您的工程中选择使用 :

QQ 配置启用 .
设置在 recommended 配置 .
设置在 tests 配置 .
自动修复 --fix CLI 选项。 。 。 .

使用规则,在你的 .eslintrc数字 :

// .eslintrc
{
  "plugins": ["@bam.tech"],
  "rules": {
    "@bam.tech/require-named-effect": "error"
  }
}

提示: 如果您的配置已经从一个 @bam.tech 配置, 您不需要声明插件 .

如何定制?

您仍然可以通过在您的配置中添加其他配置、插件和规则来自定义您的 ESLint 配置 .eslintrc 配置文件 .

贡献

如果你找到一个有用的规则,你觉得BAM的每个项目都应该使用,请随意 贡献。 。 。 .