codecamp

styled-components 语法高亮

Visual Studio Code

语法高亮

用模板文字编写CSS时,您曾经失去的一件事是语法突出显示。我们正在努力使所有编辑器中的语法都突出显示。当前,我们支持Atom,Visual Studio Code,WebStorm和Sublime Text。

正确突出显示时的外观如下:

语法突出显示样式的组件

Atom

@gandm,language-babel创建者,在Atom中 增加了样式化的组件 !

要正确突出显示语法,您只需安装并使用 language-babel 打包您的JavaScript文件

Sublime Text

@garetmckinley PR 已合并为babel-sublime尚未发布到包控制。但是,可以直接从 GitHub 安装。

另一个选项是 Alexandre Borela


Visual Studio Code


如果要保持当前 JavaScript 语法突出显示,可以使用vscode 样式的组件扩展名在 Javascript 文件中提供样式组件语法突出显示。您可以照常从应用商店安装

VIM / NeoVim

另外,如果您正在寻找一个很棒的javascript语法包,那么YAJS.vim绝对不会出错。

WebStorm,IntelliJ IDEA,PhpStorm,PyCharm和RubyMine

为模板字符串中的CSS属性和值添加代码完成和突出显示

且它还为插值中的JavaScript符号提供代码完成和导航。您可以从IDE安装它:Preferences | Plugins 并搜索 样式化的组件。

其他编辑器

我们可以使用您的帮助获得语法突出显示对其他编辑器的支持!所有这些语法突出显示都是由样式组件社区构建的,因此如果您想要开始为编辑器处理语法突出显示,我们很想看到它。


styled-components 风格主题
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }