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配置autoprefixer 自动补全兼容前缀
WebStorm 中 CSS 模块的 Next.js 自动完成类?