jsx-eslint/eslint-plugin-react

react/jsx-no-literals: some strings are slipping through

Open

#2,215 opened on Mar 26, 2019

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

Description

some string literals are not detected by this rule and I wonder if there is a reason for it.

Example:

import React from 'react';

function TestComponent() {
  return (
    <div
      propError1={ `test` }
      propError2={ "test" }
      propError3={ 'test' }
      propNoError1="test"
      propNoError2='test'
    >
      {/* these are obvious errors */}
      Test
      { "Test" }
    </div>
  );
}

export default TestComponent;

as you can see, the props propNoError1 and propNoError2 slip through this rule (but are generally allowed code). I would expect 7 problems in this file, but we only get 5:

   6:20  warning  Strings not allowed in JSX files: “`test`”  react/jsx-no-literals
   7:20  warning  Strings not allowed in JSX files: “"test"”  react/jsx-no-literals
   8:20  warning  Strings not allowed in JSX files: “'test'”  react/jsx-no-literals
  12:39  warning  Strings not allowed in JSX files: “Test”    react/jsx-no-literals
  14:9   warning  Strings not allowed in JSX files: “"Test"”  react/jsx-no-literals

✖ 5 problems (0 errors, 5 warnings)

.eslintrc

{
  "plugins": [
    "eslint-plugin-react"
  ],
  "parser": "babel-eslint",
  "rules": {
    "react/jsx-no-literals": [
      1,
      {
        "noStrings": true
      }
    ]
  }
}

One of the use cases when it would be preferable for this rule to warn:

<img alt="untranslated alternate text" />

Is there any way to enforce this with this rule?

Contributor guide

react/jsx-no-literals: some strings are slipping through · jsx-eslint/eslint-plugin-react#2215 | Good First Issue