elastic / elastic/eui

[Epic] ESLint plugin improvements

Open
#8,853 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

## ✨ Summary

We want to improve our ESLint plugin to help developers use EUI components correctly and consistently. This includes adding more useful rules, offering autofixes where possible, and documenting everything clearly.

## ❗ Problem or Opportunity

Right now, many EUI best practices are only shared through docs or code reviews. Developers might miss or forget them.

Both Kibana and Cloud UI already use our ESLint plugin. This gives us a great **opportunity** to surface best practices directly in the IDE, with real-time feedback and optional fixes - reducing errors and making EUI usage easier.

## 🎯 Value

- Helps developers follow EUI best practices automatically.
- Improves design token usage (spacing, colors, typography).
- Encourages consistent use of CSS helpers (e.g., `logicalCSS`).
- Reduces review and refactor time.
- Gives developers confidence their code follows EUI guidelines.

## 🎯 Urgency

This is **not urgent**, but it’s a valuable opportunity that we can build on over time.

## 🧠 Feasibility & Direction

This work is **feasible** and already underway. The plugin exists and is used by Kibana and Cloud.

Work can be done rule-by-rule, starting with what will provide the most value.

## ❓ Open Questions to answer

- What other rules would help teams the most?
- Which current issues could be solved with better linting?
- Can we safely auto-fix some common patterns?
- How do we gather feedback from plugin users?

## 📐 Definition

### Design

N/A - ESLint plugin only, no visual design needed.

### Proposed Solution

- Add rules to catch common EUI mistakes and guide developers to the right usage.
- Expand existing rules (e.g., spacing, colors, typography).
- Provide auto-fixes where possible.
- Document all rules clearly.
- Announce changes internally and in changelogs.

### Acceptance criteria

- New rules are added and work as expected.
- Plugin documentation is updated.
- Auto-fixes are offered when applicable.
- Kibana and Cloud adopt the updated plugin.

### Definition of done

- Rules are published in a new version of `eslint-plugin-eui`.
- Rules are documented and easy to understand.
- Consuming teams use the new version and see benefits.

### Documentation needs

- Update plugin README with rule descriptions and examples.
- Explain what each rule does and how to fix violations.

### Impact scope

- Affects all teams using EUI and the ESLint plugin.
- No breaking changes or product impact — only dev tooling.
- Easy to adopt gradually and opt into rules over time.

### List of use cases in Elastic products

- Kibana and Cloud UI already use the plugin.
- Useful across all teams that write UI using EUI.

### Rollout plan

- **Phase 1:** Add new rules and update docs.
- **Phase 2:** Release updated plugin.
- **Phase 3:** Communicate changes to teams.
- **Phase 4:** Gather feedback and expand based on needs.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.