typescript - Emotion Styled Components WebStorm'da otomatik tamamlamıyor

WebStorm’da @emotion/styled kullanıyorum ve stil nesnem içinde otomatik tamamlama için Intellisense (veya WebStorm’da ne deniyorsa) yok. TypeScript bazı ölçüde kontrol yapıyor gibi görünüyor:

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
})

Aynı bilgisayarda VSCode, nesnenin içinde otomatik tamamlama sağlıyor, ancak değerler için sağlamıyor (örneğin, display değerleri için block, inline, gibi seçenekler almıyorum).

Bir ayarı mı yanlış yaptım? Ben bir Mac kullanıyorum.

Cevap #1

Maalesef, 1 yıl sonra bile nesne sözdizimi WebStorm tarafından desteklenmiyor (dil ayarlarında JSX’in desteklendiği belirtilse bile nesne sözdiziminin JSX ile hiçbir ilgisi yok). Aslında bazı özellik adları için IntelliSense alabiliyorum, ama değerler için alamıyorum, bu da VSCode’daki deneyiminizle uyuşuyor.

Ancak şablon dize sözdizimini kullanabilirsiniz ve bu, CSS için beklendiği gibi otomatik tamamlama sağlar:

const StepTimer = styled.button`
  border-radius: 50px;
  height: 30px;
  blorg: 3;
  display: 1;
`

Dikkate alınması gereken bir şey: blorg için Bilinmeyen özellik uyarısı alırsınız ve display: 1 için WS'de Uyuşmayan özellik değeri hatası alırsınız.

Bu sözdizimi ile renk vurguları elde edersiniz ve bu, özelliklere dayalı olarak stilleri özelleştirmeniz gerektiğinde bile çalışacaktır

const Button = styled.button`
  color: ${({variant}) => variant === 'secondary' ? `white` : `#434449`};
  background-color: ${({variant}) => variant === 'secondary' ? `#3f51b5` : `#f1f2f7`};
`

Cevap #2

Çözüm, WebStorm'un Styled Components eklentisini kullanmaktır

İlgili makaleler