[Question]: jsx-curly-spacing not working for string literals in jsx

[gizembg]

Is there an existing issue for this?

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

Description Overview

I have jsx-curly-spacing rule in my eslintlc.js file and it is working just except one condition. Is there any missing rule definition I had to add or is that a bug?

Eslint rule:

        'react/jsx-curly-spacing': [ 1, { 'when': 'always',
            'spacing': {
                'objectLiterals': 'never'
            } } ]

It is working formatted code example. There are spaces between curly braces.

         <input
                className = { `text-container-input ${preText ? 'pre-text' : ''}` }
                disabled = { isDisabled }
                maxLength = { 50 }
                type = { type }
                value = { text } 
         />

However in that case there is no space is added after formatting:

<label>
        {`${title}` }
</label>

Summary: I want to have space between curly braces and backtick(`) as I show on EXPECTED part. What I am missing here?

Expected Behavior

EXPECTED:

<label>
        { `${title}` }
</label>

eslint-plugin-react version

v7.26.1

eslint version

v8.1.0

node version

v16.16.0

[ljharb]

I notice you have it set as a warning and not an error - sometimes autofixing doesn't fix warnings. Can you try setting it to an error?

[gizembg]

I have noticed that I have this issue only when if it is under return method of components. If it is outside of return the warning works. I need something to make it work also in return statements.

NO WARNING // I need the eslint block-spacing warning here

     return (
            <div
                onClick = { this._onClick }>
                <div className = 'pick'>
                    {`${name} (+${dialCode})`} - warning DOES NOT works when it is outside of return
                </div>
            </div>
        );

WARNING // Requires a space after '{'.eslintblock-spacing

   {`${name} (+${dialCode})`}  - warning works when it is outside of return_

    return (
            <div
                onClick = { this._onClick }>
                <div className = 'pick'>
                </div>
            </div>
        );

[gizembg]

@ljharb Hey, thanks for suggestion. I've tried that too but if it is in return statement still doesn't show an error.