jsx-eslint/eslint-plugin-react

[Bug]: react/jsx-no-target-blank fix does not add "noopener"

Open

#3803 opened on Aug 15, 2024

View on GitHub
 (3 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

The --fix behavior for the react/jsx-no-target-blank rule only adds rel="noreferrer" to all instances of target="_blank" without a rel property; however, it should ALSO add noopener.

Here is a snippet of my .eslint configuration:

{
  "settings": {
    "linkComponents": ["Link", "ClickableTile", "Button"]
  },
  "rules": {
    "react/jsx-no-target-blank": "error"
  },
  "globals": {
    "JSX": true
  }

FWIW, the fixed entries with the above behavior are React <Link> elements.

The fix is partial: instead of adding rel="noopener noreferrer", the --fix flag only adds rel="noreferrer".

Command used:

eslint --cache --cache-location ../../node_modules/.cache/eslintrc/shared . --ext .js,.jsx,.ts,.tsx

Expected Behavior

The --fix flag should add rel="noopener noreferrer" when it finds target="_blank" without a rel property.

<Link target="_blank" href={url}>text</Link>

should be fixed to:

<Link target="_blank" rel="noopener noreferrer" href={url}>text</Link>

Also, it would be good if the rule always placed the rel property immediately AFTER the target property: it currently mostly puts it at the end of the attribute list.

eslint-plugin-react version

v7.35.0

eslint version

v7.31.0

node version

v20.11.1

Contributor guide