VS 代码在包含连字符的 class 名称之间添加空格

Question

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

但我不确定哪个规则影响了我的 JSX class 名称。理想情况下，class 名称应为：test-wrapper

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

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

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

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

Answer 1

使用 点符号 访问对象属性 (style.test-wrapper) 仅当属性的名称包含纯字母 [= 12=、A-Z、数字 0-9 和特殊字符 $ 和 _。另外，名称不能以数字开头。

如果你想在属性名字中使用字符-，你可以使用括号符号:

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

Answer 2

对于 css 模块，您可以将类定义为 test-wrapper，您仍然可以将类称为驼峰式大小写，如下所示。它对我有用，认为可能对某人有帮助

 <i className={style.testWrapper} />

Answer 3

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

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

VS-code adding spaces between class name which contains hyphens