💽 HTML / CSS 코딩하는데 유용한 VSCode 확장팩

이번 포스팅에서는 VSCode에서 HTML과 CSS를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 또한 만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다.

 

도움되는 HTML 코딩 확장팩

 

HTML CSS Support

html 요소의 class에서 css 선택자 요소를 쓸때 자동 완성 기능을 지원해주는 익스텐션이다.

부트스트랩 같은 거대한 css 프레임워크를 사용할때 매우매우 유용하다. 아주 빠르게 클래스 속성 코딩이 가능하다.

HTML CSS Support - Visual Studio Marketplace

 

또한 html 뿐만 아니라 여러 언어들도 적용되게 할수있는데, vscode의 setting.json에 가서 다음 코드를 추가해주면 된다.

//* HTML CSS Support 추가 설정
"css.enabledLanguages": [
  "html",
  "javascriptreact",
  "typescriptreact",
  "typescript",
  "javascript",
  "njk",
  "nunjucks",
  "html-nunjucks",
  "php"
],

---

HTML to CSS autocompletion

CSS에서 코딩할때 HTML에서 사용한 속성이름을 자동 완성해주는 기능을 지원한다.

사실상 위의 HTML CSS Support 의 반대 버젼이라고 보면 된다. 이 역시 굉장히 유용한 익스텐션.

HTML to CSS autocompletion - Visual Studio Marketplace

---

Auto Rename Tag

태그 이름을 수정할때, <>여는 태그와 </> 닫는태그를 동시에 수정하게 해준다

Auto Rename Tag - Visual Studio Marketplace

---

Auto Close Tag

Auto Rename Tag와 함께 사용하는 유용한 플러그인이다.

태그를 작성할 때 기본적으로 여는 태그와 닫는 태그를 일일이 입력해야 하던 것을 입력태그만 입력하게 해준다.

즉, <div>만 입력을 해도 </div>가 자동으로 작성이 된다.

vs code 1.6버전 이후부터는 html에 대해서는 포함되어 있다고 하지만, html외에 나머지 파일에서는 작동을 하지 않아서 결국 설치를 하는 것이 편의성이 증가한다.
예를들어, js, jsx, php에서도 태그를 코딩할수 있기 때문이다.
따옴표 안에서도 작동을 해서 여러모로 필수적인 확장 플러그인.

Auto Close Tag - Visual Studio Marketplace

---

htmltagwrap

만일 엘리먼트를 감쌀때 여러분은 어떻게 하는가?

수동으로 일일히 태그를 적어주어 포함시키는데, 이제는 블록을 감쌀때 더이상 이리저리 마우스 키보드 조작 할 필요없이 단축키 하나만으로 감쌀 수 있다.

• 감싸고자 하는 블록에 놓고 alt + w

htmltagwrap - Visual Studio Marketplace

---

cdnjs

vscode 내 에서 cdn을 검색해서 바로 적용할수 있는 플러그인

• F1을 누르고 cdnjs를 검색하고 cdnjs: Search for libraries 선택 그리고 원하는 라이브러리 명을 검색하면 된다.

cdnjs - Visual Studio Marketplace

---

Highlight Matching Tag

여러 태그가 중첩되어 있을 때 해당 태그의 끝이 어디인지 찾기 힘들 때가 있다. 그럴 때 쌍이 되는 태그를 표시해 주는 플러그인이다.

vs code 자체에도 태그를 누르면 하이라이트가 되는 기능이 포함되어 있지만 해당 태그의 이름(div, p, input 등)을 눌러야지 표시가 된다. 하지만 이 익스텐션은 태그 내 아무곳이나 눌러도 태그를 하이라이트 표시해서 블록을 쉽게 알수 있게 한다.

Highlight Matching Tag - Visual Studio Marketplace

---

+ 추가 (개인적인 세팅을 올려본다. 빨간 텍스트배경으로 바꾸어 보다 가독성 좋게 만들었다)

//* Highlight Matching Tag
   "highlight-matching-tag.styles": {
      "opening": {
         "name": {
            "highlight": "rgba(180, 20, 80, 0.6)"
         }
      },
      "closing": {
         "name": {
            "highlight": "rgba(180, 20, 80, 0.6)"
         }
      }
   },

---

HTML End Tag Labels

html 태그 코드가 길어 이 태그가 어느 태그였는지 깜빡할때, 도움을 주는 익스텐션이다.

마지막 닫는 태그에 클래스명을 주석처리로 표시하여 이 태그가 어느 역할을 했던 태그였는지 알수 있다.

HTML End Tag Labels - Visual Studio Marketplace

---

HTML Enter++

html에선 기본적으로 개행문자는 인식 되지 않는다.

따라서 br태그를 써주거나 아니면 다음 태그로 넘어가서 줄바꿈을 해줘야하는데, 이러한 처리를 단축기를 지원한다.

Shift + Enter	Next Line (insert "<br> + \n")
Ctrl(Cmd) + Enter	Next Paragraph (insert "\n + </p> + \n + <p> + \n")

HTML Enter++ - Visual Studio Marketplace

---

html meta tags hero

메타 태그 스니펫 모음집이다.

예를들어, viewport라고 치면 자동완성 리스트가 나와 마음껏 고를 수 있다.

html meta tags hero - Visual Studio Marketplace

---

Close HTML/XML tag

만일 닫는 태그를 빼먹어서 일일히 찾아서 수정했다면, 이 익스텐션은 단 한번의 명령으로 수정이 가능하다

Close HTML/XML tag - Visual Studio Marketplace

---

HTMLHint

eslint같이 html 코딩할때 알맞지 않는 문법이나 빠진 부분이 있으면, ide처럼 알려주는 기능이다.

HTMLHint - Visual Studio Marketplace

---

image preview

• 코드라인 번호 왼쪽에 이미지가 나타난다.
• 이미지 url에 마우스를 올려놓으면 프리뷰 이미지를 볼수 있다.

Image preview - Visual Studio Marketplace

---

Font Awesome Auto-complete & Preview

아이콘 클래스명 자동완성 및 프리뷰를 지원한다.

• 클래스 고를때, 아이콘 이미지 프리뷰가 뜨지 않을때는 ctrl + space를 눌러준다.
• 아이콘 클래스명에 마우스를 올려다 놓으면 프리뷰 이미지가 뜬다.

Font Awesome Auto-complete & Preview - Visual Studio Marketplace

---

Font Awesome Gallery

vscode내에서 폰트 아이콘을 검색해 정보를 얻을 수 있다.

Font Awesome Gallery - Visual Studio Marketplace

---

Html Auto Completion

자주 쓰이는 태그 구성 자동완성 익스텐션이다.

• !html 치고 엔터
• !table 치고 엔터
• !form 치고 엔터

Html Auto Completion - Visual Studio Marketplace

---

도움되는 CSS 코딩 확장팩

 

CSS Navigation

html에서 class 속성들을 코딩할때, 이 클래스가 어느 css 파일 위치해 있는 것인지 바로 확인 할 수 있는 익스텐션이다.

• 클래스명에 마우스 커서를 갖다대고 F12를 누르거나 ctrl + 클릭하면 바로 해당 css 파일 선택자로 이동된다.

CSS Navigation - Visual Studio Marketplace

---

CSS Initial Value

css 속성 기본값을 보여주는 기능. 기본값이 뭔지 잊어먹었을때 바로 확인할수 있는 소소한 기능이다.

CSS Initial Value - Visual Studio Marketplace

---

Autoprefixer

css3에 밴더 프리픽스를 자동으로 붙여준다.

• ctrl + shift + p 를 눌러 커맨드창을 열고, Autoprefixer: Run을 쳐서 실행.

Autoprefixer - Visual Studio Marketplace

벤더 프리픽스(vendor prefix)란 이러한 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미합니다.

즉 아직 CSS 권고안에 포함되지 못한 기능이나, CSS 권고안에는 포함되어 있지만 아직 완벽하게 제정된 상태가 아닌 기능을 사용하고자 할 때 벤더 프리픽스를 사용하게 됩니다.

그렇게 하면 해당 기능이 포함되어 있지 않은 이전 버전의 웹 브라우저에서도 그 기능을 사용할 수 있게 됩니다.

---

px to rem & rpx (cssrem)

px단위를 단축키로 rem 단위로 바꿀수 있다.

• px -> rem (Shortcut key: Alt + z)
• rem -> px (Shortcut key: Alt + z)
• px -> rpx (Shortcut key:：Alt + r)
• rpx -> px (Shortcut key:：Alt + r)

px to rem & rpx (cssrem) - Visual Studio Marketplace

---

Stylelint

css 구문 오류를 잡아주게 도와주는 익스텐션

Stylelint - Visual Studio Marketplace

---

vscode-styled-components

리액트 환경 같은, 자바스크립트나 타입스크립트 파일에서 css문법 표현을 사용해줄때 자동완성 기능을 제공해준다.

vscode-styled-components - Visual Studio Marketplace