eslint-plugin-semi-design

eslint plugin for semi design

Rules

✅ Should not reference semi-ui in semi-foundation

semi-ui should not be used as a dependency of semi-foundation.

Why: According to Semi's foundation and adapter design, foundation should not depend on adapter. Click to view the F/A design.

✅ Should not import lodash-es in semi-ui and semi-foundation

Use lodash instead of lodash-es.

Why: In order to be compatible with next, lodash-es only provides the product of es module.

See more here。

✅ Should not use relative paths to import a package under packages in semi-ui or semi-foundation

For imports between packages under monorepo, use package names instead of relative paths.

Why: These two packages may not be in the same folder in the installation path of the user project, and the corresponding package cannot be found using the relative path.

// ❌ Not recommend
// semi-ui/input/index.tsx
import inputFoundation from '../semi-foundation/input/foundation';

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

✅ Should not use the package name and path to import other modules under the same package

When importing the same package, use relative paths instead of referencing the package name.

// ❌ Not recommend
// semi-ui/modal/Modal.tsx
import { Button } from '@douyinfe/semi-ui';

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

✅ Should not import React or ReactDOM in semi-foundation

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

Related docs

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