@rx-now/eslint-plugin

Install

$ npm i @rx-now/eslint-plugin -D

Usage

@rx-now/domain-import

interface Option {
  /** glob 数组，将不会检查符合匹配的文件（被依赖的文件） */
  exclude?: string[];
  /** string 数组，用于指定一些需要被同层依赖的特定 domain （如 components、services） */
  excludedDomains?: string[];
  /** 层级关系配置，用于匹配文件所在层级（默认为最高层），并根据文件所在层级判定依赖关系是否合理 */
  layerConfig?: { rules: string[]; index: number }[];
}

Sample：

{
  "@rx-now/domain-import": [
    "error",
    {
      "exclude": ["**/node_modules/*", "**/node_modules/**/*"],
      "excludedDomains": ["interfaces", "components", "services", "hooks"],
      "layerConfig": [
        {
          "index": 0,
          "rules": ["**/libs/common/**/*"]
        },
        {
          "index": 1,
          "rules": ["**/demo/src/.api/*", "**/demo/src/base/*"]
        }
      ]
    }
  ]
}

说明：

1. exclude: 项目中依赖 node_modules 的文件不会触发 lint error
2. excludedDomains: /src/services/hi.service.ts 可以被 /src/ 下其他文件依赖
3. layerConfig： .api、base 文件夹内的文件，不可以依赖其他默认为最高层的组件

根据配置，我们使用如下规则进行检查：

规则一：不能依赖于子级 Domain

说明：文件不应当依赖子级domain的文件。例如 /Demo/index.tsx 不应当依赖于 /Demo/routers/SomeRoute/components/SomeComp/index.tsx 例外：由于当前模块下的路由、组件等分布在子 domain 中，所以我们允许以下情况下可以依赖于子级 Domain

1. 被依赖的子级 Domain 为 routers，且层级差<=2 （1层：/Demo/index.tsx import /Demo/routers/index.tsx，2层：/Demo/index.tsx import /Demo/routers/DemoInner/index.tsx）
2. 被依赖的子级 Doamin 为 公共组件，如 /Demo/index.tsx import /Demo/components/Icon/index.tsx

规则二：不能依赖于兄弟 Domain

说明：根据项目代码，我们依据文件夹结构构建的多个 domain，组成了一个树形结构，不同分叉下的文件之间不应相互依赖。例如 /DomainA/index.tsx 不应当依赖于 /DomainB/components/index.tsx 例外：由于一些公共组件、service，也是需要统一的文件夹方便整理，所以我们开放配置项，允许一些domain，作为公用的组件，在此情况下，我们允许一些不同分叉下domain的，以下例子中，我们以 components 文件夹为例

1. 共同父 domain 为 components。/components/Button/index.tsx import /components/Table/index.tsx
2. 共同父 domain 不为 components，但被依赖文件的在共同父domain下一级的domain为components。/routers/Table/index.tsx import /components/Button/index.tsx

规则三：低层级不应当依赖于高层级

说明：一般我们将代码分成 数据接口层、防腐层、视图层。此时数据接口层 不应当依赖于 防腐层、视图层。防腐层可以依赖于数据接口层，但不能依赖于视图层。例如：/api/api.service.ts 不应当依赖于 /components/Icon/index.tsx

@rx-now/folder-naming

约束特定文件夹的命名风格

interface Option {
  /** 规则生效的根目录 */
  root?: string;
  /** glob字符串数组，匹配的文件夹跳过规则检查 */
  ignorePatterns?: string[];
}

Sample:

{
  "plugins": ["@rx-now"],
  "rules": {
    "@rx-now/fold-naming": [
      "error", 
      {
        "ignorePatterns": ["../__tests__/*/"]
      }
    ]
  }
}

说明：

1. 文件夹命名需遵从kebab-case风格，如hello/, hello-world/

2. 此规则检查文件夹结构是否符合规范，即满足以下约束

   文件夹结构可以有routers, components, services, tokens, hooks, interfaces几种类型的公共文件夹

   a. root不为空时，根目录仅允许存在公共文件夹

   b. routers / components 文件夹下，不允许存在公共文件夹

   c. routers文件夹下一级（如routers/xxx/）下，仅允许存在公共文件夹

   d. components文件夹下一级（如components/xxx/）下，仅允许存在除routers外的公共文件夹

   e. services / tokens / hooks / interfaces 文件夹下，不允许存在文件夹

@rx-now/folder-naming-with-ext

约束特定文件所在的文件夹命名风格

interface Option {
  /** 规则生效的根目录 */
  root?: string;
}

Sample：

{
  "plugins": ["@rx-now"],
  "rules": {
    "@rx-now/fold-naming-with-ext": ["error"]
  }
}

说明：

本规则主要针对 angular 项目，约束：

• *.directive.ts *.pipe.ts 须在 components/xxx/ 文件夹下
• components/xxx/xxx.component.ts 中文件夹与文件命名一致，命名风格不影响一致性，如 hello-world 与 HelloWorld 是一致的

@rx-now/file-naming

约束特定文件的文件命名风格，文件命名需遵从kebab-case风格，如hello.ts, hello-world.ts

interface Option {
  /** 规则生效的根目录 */
  root?: string;
}

Sample:

{
  "plugins": ["@rx-now"],
  "rules": {
    "@rx-now/file-naming": ["error"]
  }
}

@rx-now/zhlint-comment

{
  "plugins": ["@rx-now"],
  "rules": {
    "@rx-now/zhlint-comment": ["warn"]
  }
}

@rx-now/zhlint-jsx

{
  "plugins": ["@rx-now"],
  "rules": {
    "@rx-now/zhlint-jsx": ["warn"]
  }
}

@rx-now/zhlint-string

{
  "plugins": ["@rx-now"],
  "rules": {
    "@rx-now/zhlint-string": ["warn"]
  }
}