CSS 개발자를 위한 VSCode 확장

,

제가 가장 강력하다고 생각하는 프론트엔드 에디터는 제트브레인스(JetBrains)의 웹스톰(WebStorm)입니다. 무료 에디터인 VSCode에서도 확장을 통해 기능을 많이 따라잡을 수 있을 거라 생각했습니다. 그러나 한계가 크네요. 느낌상은 반절쯤 따라잡는 거 같습니다.

이 글은 VSCode에서 사용할 수 있는 CSS 확장 프로그램들을 살펴 보고 어떤 확장을 설치해야 하는지 추천합니다.

사진 Mohammad Rahmani

내장 기능

확장 설치 전에 우선 내장 기능으로 기본 지원되는 것이 무엇인지 살펴 봤습니다.

VSCode 내장 CSS, SCSS 기능에 대한 설명 페이지: CSS, SCSS and Less

  • 우리가 에디터에 당연히 기대하는 구문 강조(Syntax Highlighting) 같은 기능은 기본적으로 지원
  • 파일 내 심볼 찾기(Shift + Cmd/Ctrl + o) 기본 지원(O)
  • 정의 바로 가기, 일괄 이름변경, 워크스페이스 전체에서 심볼찾기 등 미지원(X)

CSS 인텔리센스 확장

자동완성, 코드 바로가기, 리네임 등을 지원하는 것을 인텔리센스라고 부르더군요. 인텔리센스 기능을 기본 지원을 하지 않으니 확장을 찾아 비교해 봤습니다.

IntelliSense for CSS class names in HTML

  • 자동완성 O
  • 정의 바로 가기 X
  • 일괄 이름변경 X
  • 워크스페이스에서 심볼 찾기 X
  • 기본 설정돼 있는 파일종류가 많고 스캔도 알아서 잘 해 별도 설정 없이 쓰기 편함

CSS Class Intellisense

  • 자동완성 O
  • 정의 바로 가기 O
  • 일괄 이름변경 O (CSS 파일에서 실행해야 하고 CSS 파일쪽만 변경해 줘서 좀 제한적이지만)
  • 워크스페이스에서 심볼 찾기 X
  • 적용되는 파일 유형이 적다는 게 치명적 단점. php 확장자에서 작동하지 않는다. 이슈를 등록해서 적용 파일 타입을 넓혀 달라고 요청했고, 개발자가 작업하겠다고 표시룰 한 상태. 그러나 개발자가 생업으로 바쁜 모양이라 금방 될 지는 모르겠음.

CSS Peek

  • 정의 바로 가기 O
  • 워크스페이스에서 심볼 찾기 O(단, 이름이 일치해야 함. 부분 일치 검색은 안 됨)
  • 일괄 이름변경 X
  • CSS 사이즈가 큰 경우 느리다.
    • 그러면 정의 바로 가기(F12)도 느리다.
    • m1 맥에서는 워크스페이스 심볼 찾기(Ctrl+t) 기능을 거의 마비시킴.
      검색을 하는 것 같은데 굉장히 느리다. 검색 장면을 보고 싶다면 명령창(Shift + Cmd/Ctrl + p)에서 Output: Show Output Channels… 선택 후 CSS Peek을 선택하면 된다.
      윈도우에서는 느리긴 해도 m1 맥북 정도로 느리지는 않았다.

HTML CSS Support

  • 자동완성 O (단, 자동완성시킬 CSS 파일을 수동 지정해야 할 경우가 많을 것으로 보임. link를 이용해 명시적으로 연결했거나 확장이 이해하는 상속으로 연결돼 있지 않으면 알아서 자동완성을 못 해 참고할 css 파일을 수동으로 지정해 줘야 함)
  • 정의 바로 가기 X
  • 일괄 이름변경 X
  • 워크스페이스에서 심볼 찾기 X
  • html에만 활성화돼 있어서 php 같은 다른 유형의 파일에서 사용하려면 추가 설정해야 함. 따라서 IntelliSense for CSS class names in HTML이 잘 작동한다면 그것을 사용하면 됨. IntelliSense for CSS class names in HTML이 잘 작동하지 않는다면 이 확장을 설치해서 수동으로 설정.

CSS 인텔리센스 결론

결국 정의 바로 가기를 위해 CSS Peek을, 자동완성을 위해 IntelliSense for CSS class names in HTML을, 일괄 이름 변경(F2)을 위해 CSS Class Intellisense를 사용해야 할 것 같습니다.

단, 위에도 썼지만 CSS Peek은 제 m1 맥에서 워크스페이스 심볼 찾기(Go to Symbol in Workspace) 기능을 매우 느리게 만들었습니다. 그러니 워크스페이스 심볼 찾기 기능을 자주 사용하신다면 성능 테스트를 해 보시고 사용하는 게 좋을 것 같습니다.

기타 CSS 관련 확장

SCSS IntelliSense

Sass 기능 지원 확장. Sass를 많이 사용한다면 설치 필요. 클래스명 등에는 해당 안 되고 Sass 변수, 함수, 믹스인에 대해서 인텔리센스 기능을 제공.

  • 코드 완성 제안(변수, 믹스인, 함수)
  • 호버시 설명 제공(변수, 믹스인, 함수)
  • 사용법 도움말(믹스인, 함수)
  • 정의 바로 가기 (변수, 믹스인, 함수)
  • 폴더의 모든 심볼 정의 표시(변수, 믹스인, 함수)
  • Vue 파일 SCSS 블록을 지원
  • @import "filepath";로 어디서든 파일 임포트. 심지어 현 작업 공간 밖에서도.

나머지

Sass (.sass only): Scss 말고 sass 확장자의 문법 하이라이팅, 코드 정렬. sass 파일을 사용한다면 필요.

className Completion in CSS: HTML에 있는 클래스명을 CSS에서 자동완성해 주는 확장. 아이디어가 좋긴 한데, 지원되는 파일 유형이 너무 적음. HTM, JSX/TSX, Vue만 지원.

CSS Variable Autocomplete, CSS Var Complete: CSS 변수 자동완성 기능을 제공하는 확장. 두 확장의 기능이 비슷한 것 같은데 아직 충분히 써보지 않아서 일단 둘 다 후보로 올림.

소감

VSCode의 CSS 지원이 생각보다 별로라서 놀랐습니다. 최고의 확장 프로그램 하나를 찾아 헤맸는데 다 비교해 보니 세 개나 설치를 해야 했고, 그래도 웹스톰에는 미치지 못합니다.

여하간 어느 정도 정리가 됐습니다.

강좌 영상의 일부로서 보기

이 내용은 프로젝트 중심 실전 CSS 강의의 일부이기도 합니다. 해당하는 내용은 4회차인 “CSS 개발자를 위한 Visual Studio Code 세팅, 확장 선택에 ChatGPT 활용하는 간단한 팁“입니다.

영상에서는 좀더 넓은 범위의 VSCode 기능과 설정, 단축키 사용법을 다루고, ChatGPT를 이용해서 각 확장의 기능을 간편하게 알아 봅니다. CSS 확장 외에도 편리한 확장을 몇 개 더 소개합니다.

카테고리 글 목록 👉

,

대표글

“CSS 개발자를 위한 VSCode 확장”에 대한 2개의 응답

  1. PHP 개발자에게 필수적으로 필요하다고 생각하는 확장 프로그램들과 개발 일반에서 필요하다고 생각하는 확장 프로그램들을 소개한다.

  2. […] 스튜디오 코드의 기본 기능으로 부족한 부분은 확장 프로그램으로 많이 보완할 수 […]

댓글 남기기