@feature-sliced/eslint-config

WIP: 目前处于beta测试阶段 - 请谨慎使用

通过现有的eslint插件对FeatureSliced概念进行lint

• 控制隔离和分解
• 控制公共API
• 控制层级和范围
• 控制命名

规则

每个规则都有自己的测试用例和定制方面

• import-order
• public-api
• layers-slices

开始使用

1. 首先需要安装ESLint:

   $ npm install -D eslint
   # 或者使用yarn
   $ yarn add -D eslint
   

2. 接下来，安装@feature-sliced/eslint-config和依赖项:

   $ npm install -D @feature-sliced/eslint-config eslint-plugin-import eslint-plugin-boundaries
   # 或者使用yarn
   $ yarn add -D @feature-sliced/eslint-config eslint-plugin-import eslint-plugin-boundaries
   

3. 在.eslintrc配置文件的extends部分添加配置（用于推荐规则）。你可以省略eslint-config后缀:

   {
       "extends": ["@feature-sliced"]
   }
   

4. 仅限TypeScript: 还需要设置TS解析器和TS插件(原因?)

   详情

   安装依赖:

   $ npm i -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
   # 或者使用yarn
   $ yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-import-resolver-typescript
   

   在.eslintrc配置文件中将@typescript-eslint/parser配置为解析器，并设置eslint-import-resolver-typescript解析器:

   {
     "parser": "@typescript-eslint/parser",
     "settings": {
       "import/resolver": {
         "typescript": {
           "alwaysTryTypes": true
         }
       }
     }
   }
   

使用方法

• 支持常见的别名

  import { Input } from "~/shared/ui/input";
  import { Input } from "@/shared/ui/input";
  import { Input } from "@shared/ui/input";
  import { Input } from "$shared/ui/input";
  // 但不支持 - import { Input } from "$UIKit/input";
  

• 支持相对和绝对导入（但请查看建议）

  import { ... } from "entities/foo";    // 绝对导入
  import { ... } from "@/entities/foo";  // 别名导入
  import { ... } from "../entities/foo"; // 相对导入
  

• 大小写不敏感

  import { ... } from "entities/user-post";  // 支持kebab-case（推荐）
  import { ... } from "entities/UserPost";   // 支持PascalCase
  import { ... } from "entities/userPost";   // 支持camelCase
  import { ... } from "entities/user_post";  // 支持snake_case
  

• 对于特殊情况，支持⚠️危险模式⚠️（查看特定规则了解更多）

自定义

1. 你可以部分使用规则

   警告: 在自定义时不要使用主配置（"@feature-sliced"）以避免规则冲突。

   "extends": [
     "@feature-sliced/eslint-config/rules/import-order",
     "@feature-sliced/eslint-config/rules/public-api",
     "@feature-sliced/eslint-config/rules/layers-slices",
   ]
   

2. 你可以使用替代性实验规则

   • 使用import-order/experimental来格式化组之间的空格和反转层级顺序(原因?)

     "extends": [
       // ... 其他规则或配置
       "@feature-sliced/eslint-config/rules/import-order/experimental",
     ]
     

   • 使用public-api/lite来减少PublicAPI边界的严格程度(原因?)

     "extends": [
       // ... 其他规则或配置
       "@feature-sliced/eslint-config/rules/public-api/lite",
     ]
     

3. 你可以对特定规则使用警告而不是错误

   "rules": {
      // feature-sliced/import-order
      "import/order": "warn" // ~ 1,
      // feature-sliced/public-api
      "import/no-internal-modules": "warn" // ~ 1,
      // feature-sliced/layers-slices
      "boundaries/element-types": "warn" // ~ 1,
   }
   

4. 你可以使用*高级FSD特定消息处理*

   # (feature-sliced/public-api)
   - '不允许访问 "features/search/ui"。'
   + '违反了模块公共API的使用规则 | https://git.io/Jymjf'
   

另请参阅

• 常见问题
• 发布和更新日志
• 我如何提供帮助？
  • ⭐ 在GitHub上给我们评分
  • 💫 任何帮助都很重要 - 从反馈到参与方法论的开发！