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

Posted 2023-02-21

【中文标题】VS-code在包含连字符的类名之间添加空格

【英文标题】：VS-code adding spaces between class name which contains hyphens

【发布时间】：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