WebStorm 中的情感样式组件未自动完成答案

【问题标题】：Emotion Styled Components not autocompleting in WebStormWebStorm 中的情感样式组件未自动完成
【发布时间】：2020-07-28 08:13:20
【问题描述】：

我在 WebStorm 中使用 @emotion/styled，并且在我的样式对象中没有用于自动完成的 Intellisense（或 WebStorm 中的任何名称）。 Typescript 似乎确实在某种程度上进行了检查：

const StepTimer = styled.button({
  borderRadius: 50,
  height: '30px',
  blorg: 3, // does not give a TS error for unknown key
  display: 1 // gives a TS error for incorrect value type
})

同一台计算机上的 VSCode 会在对象内部提供自动完成功能，但不适用于值（例如，我没有获得 display 的值的选项，例如 block, inline, 等）

我有什么设置有误吗？我在 Mac 上。

【问题讨论】：

标签： typescript webstorm emotion

【解决方案1】：

不幸的是，即使在 1 年后 WebStorm 也不支持对象语法（即使在语言设置中表示支持 JSX，但对象语法与 JSX 无关）。实际上，我可以为属性名称获取一些 IntelliSense，但没有值，这与您在 VSCode 中的经验相匹配。

但是，您可以使用模板字符串语法，它可以让您按预期自动完成 CSS：

const StepTimer = styled.button`
  border-radius: 50px;
  height: 30px;
  blorg: 3;
  display: 1;
`

注意事项：对于 blorg，您将收到 Unknown property 警告，对于 display: 1，您将在 WS 中收到 Mismatched property value 错误。

使用这种语法，您可以获得颜色高光，甚至在您需要根据属性自定义样式时也可以使用

const Button = styled.button`
  color: ${({variant}) => variant === 'secondary' ? `white` : `#434449`};
  background-color: ${({variant}) => variant === 'secondary' ? `#3f51b5` : `#f1f2f7`};
`

【讨论】：

【解决方案2】：

检查您的项目是否使用 ReactJSX 作为其 JS 版本。

打开 Webstorm Preferences 并转到 Languages & Frameworks > Javascript 必须有 Javascript 语言版本配置。从下拉列表中选择React JSX。

提醒一下，cmd + , 是访问首选项对话框的键盘快捷键。

【讨论】：