Skip to content

feat(eslint): add prefer-ideal-image rule#11416

Closed
IsmailBinMujeeb wants to merge 4 commits intofacebook:mainfrom
IsmailBinMujeeb:feat/add-prefer-ideal-image-eslint-plugin
Closed

feat(eslint): add prefer-ideal-image rule#11416
IsmailBinMujeeb wants to merge 4 commits intofacebook:mainfrom
IsmailBinMujeeb:feat/add-prefer-ideal-image-eslint-plugin

Conversation

@IsmailBinMujeeb
Copy link
Copy Markdown

@IsmailBinMujeeb IsmailBinMujeeb commented Sep 19, 2025

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

proposal mentioned in #6472, This newly added prefer-ideal-image enforces the use of @theme/IdealImage component instead of <img> tag for images.

Test Plan

Added a test prefer-ideal-image with:

  • valid code: <Image src={thumbnail}/> and <Image src='path/to/image'/>.
  • invalid code: <img sec={thumbnail} /> and <img sec='path/to/image' />.

Test links

Rule docs page
Updated Rules Table

Related issues/PRs

#6472

@meta-cla meta-cla bot added the CLA Signed Signed Facebook CLA label Sep 19, 2025
@netlify
Copy link
Copy Markdown

netlify bot commented Sep 19, 2025

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit 5676fd5
🔍 Latest deploy log https://app.netlify.com/projects/docusaurus-2/deploys/68cd7ae3f761b30008b7207a
😎 Deploy Preview https://deploy-preview-11416--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@slorber slorber changed the title Feat/add prefer ideal image eslint plugin feat(eslint): add prefer ideal image eslint plugin Sep 19, 2025
@slorber slorber changed the title feat(eslint): add prefer ideal image eslint plugin feat(eslint): add prefer-ideal-image rule Sep 19, 2025
Copy link
Copy Markdown
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We already have a PR for this feature: #8826

I'd be fine if you continue the work started by @Devansu-Yadav, but we need to consider edge cases, and we don't want extra useless warnings where we previously didn't have.

For example, this JSX that we use on our own website is perfectly fine and shouldn't warn by default:

          <img
            alt={name}
            className="avatar__photo"
            src={`https://unavatar.io/x/${handle}?fallback=https://github.com/${githubUsername}.png`}
            width="48"
            height="48"
            loading="lazy"
          />

@slorber slorber marked this pull request as draft September 19, 2025 13:45
@IsmailBinMujeeb IsmailBinMujeeb marked this pull request as ready for review September 19, 2025 15:46
@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Sep 22, 2025

This updated PR doesn't handle the review I gave in #8826

@slorber slorber marked this pull request as draft September 22, 2025 09:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants