自定义组件突出显示 Webstorm / React js

Question

如何在 Webstorm 中为我的组件设置不同的颜色？

import Main from './Main'
import Section from './Section'

export default function home(){
    return(
        <Main>
            <Section>
               123
            </Section>
        </Main>
    )
}

我想用不同的颜色突出显示 Main 和 Section

Answer 1

在 Webstorm 中，您可以通过创建自定义文件模板为您的组件设置不同的颜色。您可以通过转到首选项 > 编辑器 > 文件和代码模板来执行此操作。从那里，您可以为 React 组件创建一个新模板，并使用“实时模板”功能为特定关键字（例如“Main”和“Section”）设置颜色。设置颜色后，您可以将模板应用于现有文件或您创建的新文件。