semi-design/packages/semi-eslint-plugin

eslint-plugin-semi-design

Semi 仓库使用的 eslint 插件

eslint 规则

✅ 不能在 semi-foundation 里引用 semi-ui

semi-ui 不应该作为 semi-foundation 的依赖。

原因：根据 Semi 的 foundation 和 adapter 设计，foundation 不应依赖 adapter。点击查看 F/A 设计。

✅ 不能在 semi-ui 和 semi-foundation 引用 lodash-es

使用 lodash 而不是 lodash-es。

原因：为了兼容 next，而 lodash-es 只提供了 es module 的产物。

点击查看详情。

✅ 不能在 semi-ui 或 semi-foundation 使用相对路径引用 packages 下的包

monorepo 下各个包之间的 import 请使用包名而不是相对路径。

原因：这两个包在用户项目的安装路径可能不在同一文件夹下，使用相对路径会找不到对应的包。

// ❌ 不推荐
// semi-ui/input/index.tsx
import inputFoundation from '../semi-foundation/input/foundation';

// ✅ 推荐
// semi-ui/input/index.tsx
import inputFoundation from '@douyinfe/semi-foundation/input/foundation';

✅ 不推荐在同个包下使用包名加路径引用其他模块

同一个包 import 请使用相对路径而不是引用包名。

// ❌ 不推荐
// semi-ui/modal/Modal.tsx
import { Button } from '@douyinfe/semi-ui';

// ✅ 推荐
// semi-ui/modal/Modal.tsx
import Button from '../button';

✅ 不能在 semi-foundation 引用 React 或 ReactDOM

// ❌ 
// packages/semi-foundation/input/foundation.ts
import React from 'react';
import ReactDOM from 'react-dom';

相关资料

• eslint plugin 文档：https://eslint.org/docs/developer-guide/working-with-plugins