개발/Elixir(엘릭서)

[Phoenix] 피닉스 프로젝트에 tailwind 자동완성 추가하기

핸디(Handy) 2023. 7. 15. 00:41

들어가며

최근에 시작한 사이드프로젝트에서 엘릭서 +피닉스 + 라이브뷰를 조합하여 프로젝트를 진행해보기로 했습니다.

저는 그중에 tailwind css를 이용한 퍼블리싱을 맡게 되었는데요.

이번 글에서는 vsc상에서 tailwind css의 자동완성과 하이라이팅을 위한 셋팅법을 소개해드리고자 합니다.

여기에선 익스텐션 1개와 vsc의 setting.json에 추가할 값으로 원하는 목표를 달성해보겠습니다.

코드 하이라이팅

아직 여러가지를 써본것이 아니라 어떤것을 추천하기엔 어렵지만 가장 기본적인 익스텐션은 Phoenix Framework입니다.

설명란에도 친절하게

Syntax highlighting support for Phoenix templates. 라고 되어있습니다.

 

Phoenix Framework - Visual Studio Marketplace

Extension for Visual Studio Code - Syntax highlighting support for HEEx

marketplace.visualstudio.com

설치 전후

 

tailwind css 자동완성

하이팅이팅 직후에 코드 자동완성을 보시면 이상한 것들이 잔득있습니다. 실은 이것도 다른 익스텐션으로 생긴 것이지만..

다시 설정법으로 돌아가 vsc의 setting.json를 켜줍니다.

setting.json 키는 방법 1

setting.json 키는 방법 2

두가지 방법중에 편한거 써서 들어가신다음에 저기 settings 옆에 있는 문서를 클릭합니다.

클릭하게 되면 이쁜 UI모드에서 json 모드로 변경됩니다.

여기에서 가장 아래 부분에 이 코드를 추가해주시면 됩니다.

  "tailwindCSS.includeLanguages": {
    "elixir": "html",
    "phoenix-heex": "html"
  }

바로 이렇게요.

그 다음에 vsc를 확인해보면짜잔

마치며

이번 글에서는 간단하게 피닉스 프레임워크를 편리하게 쓰기 위해 vsc상에서 할 수 있는 방법 2가지 (하이라이팅, tailwind 자동완성)에 대해 살펴보았습니다.

이 글을 시작으로 엘릭서, 피닉스에 대한 글을 많이 많이 써볼 예정이니 많은 관심 부탁드립니다.

저작자표시