[React] Emotion 태그, 브라우저에서 보기 쉽게 Label Format 설정해주기

emotion 으로 css와 styled를 적용하면 크롬 웹에서 다음과 같이 알수없는 이름들이 뜬다 !

 

이를 보기 편하게 labelFormat 해줄 수 있는 babel 설정이 있다.

GitHub - emotion-js/emotion: 👩‍🎤 CSS-in-JS library designed for high performance style composition

 

.babelrc

{
  "presets": ["@babel/preset-react", "@emotion/babel-preset-css-prop"],
  "plugins": [
    [
      "@emotion",
      {
        "autoLabel": "dev-only",
        "labelFormat": "emotion-[local]"
      }
    ],
    ...
  ]
}

autoLabel을 어떤 상태에서 보여줄 것인지 설정하면

labelFormat을 지정해주지 않아도 default값으로 [local]이 표시된다.

[local]은 내가 지정한 변수 이름이다.

 

나는 emotion-[local]로 format을 줘 봤고,

위와 같이 emotion-Container 등으로 각각의 태그에 나타난다.