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

Posted

技术标签:

【中文标题】WebStorm 中的情感样式组件未自动完成【英文标题】:Emotion Styled Components not autocompleting in WebStorm 【发布时间】: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 上。

【问题讨论】:

【参考方案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 + , 是访问首选项对话框的键盘快捷键。

【讨论】:

以上是关于WebStorm 中的情感样式组件未自动完成的主要内容,如果未能解决你的问题,请参考以下文章

移除 React Material ui 组件中自动完成的下划线样式

WebStorm、React 和 JSX 花括号自动完成

Webstorm配置autoprefixer 自动补全兼容前缀

WebStorm 中 CSS 模块的 Next.js 自动完成类?

测试包装的 vuetify 自动完成组件 v 菜单未在 html 中打开

更新 WebStorm 2016 中的当前缩进空间大小