VS-code adding spaces between class name which contains hyphens

user_4057790 0
Viewed 2510

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?

prettier jsx eslint visual-studio-code reactjs
4 Answers

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']} />
user_96418300

For css modules you can define your classes as test-wrapper and you can still call the classes as camel case as follows. It worked for me thought might help someone

 <i className={style.testWrapper} />
user_102201840

This problem via vs code editor Setting->open setting ui setting ui getting top right corner add code on your vs code solve it

"editor.formatOnSave": false,
"editor.insertSpaces": false
user_47459950

I opened Code > Preferences > Settings and entered insert space in the search bar. 30 settings were found. None control inserting spaces around hyphens.

I searched the settings for hyphen and dash, didn't find anything.

I switched off all 30 Insert space... settings. VS-Code continues to insert spaces around hyphens in parentheses.

user_51533540
Related