Search code examples
reactjsvisual-studio-codejsxeslintprettier

VS-code adding spaces between class name which contains hyphens

My VSCode is configured with prettier and ESLint settings to make the development easy.

But I am not sure which rule is affecting my JSX class names. Ideally, the class name should be: test-wrapper

 <i className={style.test-wrapper} />

But its getting changed to below on save and causing lot of issues:

 <i className={style.test - wrapper} />

May i know which rule i should override or modify?

Solution

  • Using dot notation to access object property (style.test-wrapper) only works when the name of the property contains plain letters a-z, A-Z, digits 0-9 and special characters $ and _. Also, the name cannot start with a digit.

    If you want to use character - in property name, you can use bracket notation:

    <i className={style['test-wrapper']} />