jsx-eslint/eslint-plugin-react

Rule proposal: enforce shape of dangerouslySetInnerHTML

Open

#711 geöffnet am 26. Juli 2016

Auf GitHub ansehen
 (2 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)JavaScript (8.630 Stars) (2.797 Forks)batch import
help wantednew rulequestion

Beschreibung

React will issue a warning if you try to use dangerouslySetInnerHTML with a value of the wrong shape.

https://github.com/facebook/react/blob/85dcbf83/src/renderers/dom/shared/ReactDOMComponent.js#L173-L177

This should be easy enough to enforce for most cases with a linter rule.

Bad:

<div dangerouslySetInnerHTML={{ }} />

<div dangerouslySetInnerHTML={{ html: 'HTML' }} />

<div dangerouslySetInnerHTML={true} />

Good:

<div dangerouslySetInnerHTML={{ __html: 'HTML' }} />

Contributor Guide

Tech Stack
javascriptreact
Domain
developer experiencetooling
Issue Type
feature
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
2
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
1-3 hours
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
stale
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
JavaScriptReactESLint plugin development basics
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
70
Research-Richtung
Examine the existing rules in eslint plugin react (e.g., lib/rules/) for structure. Understand how to write an ESLint rule using AST selectors. The issue references a React source file (ReactDOMComponent.js) for the expected shape. Implement a rule that checks the argument to dangerouslySetInnerHTML matches { html: string }.