VS-code在包含连字符的类名之间添加空格答案

【问题标题】：VS-code adding spaces between class name which contains hyphensVS-code在包含连字符的类名之间添加空格
【发布时间】：2019-05-22 12:59:13
【问题描述】：

我的 VSCode 配置了 prettier 和 ESLint 设置，使开发变得容易。

但我不确定哪个规则会影响我的 JSX 类名。理想情况下，类名应该是：test-wrapper

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

但它在保存时更改为以下内容并导致很多问题：

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

我可以知道我应该覆盖或修改哪个规则吗？

【问题讨论】：

【解决方案1】：

使用点符号访问对象属性（style.test-wrapper）仅在属性名称包含纯字母a-z、A-Z、数字0-9和特殊字符@987654325时有效@ 和 _。另外，名称不能以数字开头。

如果要在属性名称中使用字符-，可以使用括号表示法：

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

【讨论】：

【解决方案2】：

对于 css 模块，您可以将您的类定义为test-wrapper，您仍然可以将这些类称为骆驼案例，如下所示。它对我有用，认为可能会帮助某人

 <i className={style.testWrapper} />

【讨论】：

【解决方案3】：

这个问题通过 vs 代码编辑器 设置->打开设置界面 设置 ui 获取右上角在你的 vs 代码上添加代码解决它

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

【讨论】：