비주얼 스튜디오 코드 ( Visual Studio Code) 확장프로그램

VSCode 기본 플러그인 및 테마

• Korean Language Pack for Visual Studio Code
  비주얼 스튜디오 코드의 언어(UI 언어 등)를 한국어로 만들어줍니다.
• Dracula Official
  색 테마
• Material Icon Theme
  아이콘 테마

A

• Active File In StatusBar
  VSCode 최하단 상태바에 작업중인 파일의 경로가 나타납니다.
• Auto Rename Tag 

  

  
  <tag> </tag> 하나의 태그를 수정하면 짝이되는 태그도 동시에 함께 수정됩니다.

B

• Blank Line at the End of File
  파일 저장시 맨 하단에 빈줄 하나를 추가해 저장해준다.
  Prettier 확장을 이용해 자동으로 저장 시 정렬을 활성화 해 두었다면 해당 확장은 필요 없을 것입니다.
• Bracket Pair Colorizer 

  

  
  {((({})))} 브라켓의 단계에 따라 색상을 다르게 해주고, 들여쓰기 단계를 쉽게 구분할 수 있게 하는 가이드 라인이 추가된다.
  버전2가 개발중이고 사용 가능하나, 아직은 이슈가 많아 해당 버전1을 사용하는 것이 좋다.
• Bookmarks 

  

  
  코드 북마커 기능.

C

• Color Highlight 

  

  
  #fff rgb(0,0,0)과 같은 컬러 코드의 텍스트 배경색을 해당 색상으로 보여준다.
• Color Info
  색상 코드에 마우스를 올리면 해당 색상의 다른 타입 값들을 보여준다. 예로 rgb 컬러의 hex 컬러 값은 어떤 것인지 아는 용도로 활용이 가능하다.

D

• debugger-for-chrome 

  

  
  크롬 개발자 도구에서 디버깅하던 것을 VSCode 에서 할 수 있게 된다. VSCode 에서 브레이킹 포인트를 걸고 또 크롬의 개발자 도구에서는 엘리먼트를 확인하는 등의 방법이 가능하기도 하고 여러 도움이 된다.
• DotENV
  .env 파일의 syntax highlighting 기능을 한다.

E

• ES7 React/Redux/GraphQL/React-Native snippets
  React Snippets
• ESLint
  설명이 필요없는 필수 Linter.

G

• gitignore
  .gitignore 파일을 프로젝트 환경에 맞게 자동으로 생성해준다. 또한 작업중인 파일을 바로 .gitignore에 추가할 수 있다.
• Git History
  현재는 따로 GitKraken App을 사용하고 있기에 해당 앱은 사용중이지 않다.
  Git 로그를 시각적으로 보기 좋은 확장이다. 로그 보기뿐만 아니라 다양한 기능을 제공한다. 주로 로그를 보기 위해 사용하고 Git 에 관한 다양한 기능은 아래에서 소개할 GitLens 에서 주로 사용한다. 팁으로 본인의 경우 메뉴바에 GitLens 와 Git History 의 아이콘이 비슷한게 있어 햇갈려 Git History 의 설정에서 메뉴바 아이콘을 숨기고 명령 팔레트를 통해서만 사용한다.
• GitLens 

  

  
  Git 을 사용함에 있어서 시각적이고 고급화된 기능을 제공한다. 워낙 다양한 기능을 제공하기에 위 링크에서 확인해보길 바란다.

I

• IntelliSense for CSS class names in HTML
  현재 작업중인 HTML 파일 또는 연결된 파일에서 class 를 참조하여 자동으로 css class 자동완성을 추천해준다.
• indent-rainbow
  코드 들여쓰기 단계에 따라서 들여쓰기 공간 색을 다르게 하여 한결 코드 읽기를 좋게 해준다.
• Import Cost
  import/require 대상 패키지의 용량이 코드 옆에 표시된다.

N

• npm
  package.json파일을 확인하여 설치된 패키지들의 유효성 검사를 해준다. 파일 내에 종속성이 선언되어있지만 설치되어있지 않다던가 선언되었는데 사용되어지지 않는 등의 확인을 해준다.
• npm intellisense 

  

  
  npm module 을 import 코드를 작성할 때 설치된 모듈을 기준으로 자동완성을 제공해준다.

P

• Path Intellisense 

  

  
  코드 작성시 Path 를 작성할 때 현재 경로를 인식하고 자동완성을 추천해준다. 예를들면 ./까지 타이핑하면 현재 폴더내의 파일 및 폴더를 자동완성해준다.
• PostCSS Sorting
  CSS 속성 순서 정렬 기능. CSS/PostCSS/Less/SCSS 를 지원하며 우선되는 순서를 지정할 수도 있다.
• Prettier - Code formatter 

  

   코드 포맷터

R

• Relative Path
  프로젝트의 전체 파일 중 원하는 파일을 검색해 선택하면 작업중인 파일에서 상대 경로로 입력해준다.

S

• Settings Sync
  VSCode 설정(확장 플러그인 포함) 동기화 도구

T

• TODO Highlight
  주석으로 TODO: FIXME: 구문을 작성시 하이라이트해준다.

W

• WakaTime
  VSCode 에서 어느 프로젝트를 얼마나 작업했는지, 어느 언어로 작성했는지, 그에 대한 비율 시간을 측정해준다.
  따로 App 설치가 필요하며 VSCode 플러그인에 API key 를 입력해 연동한다. VSCode 말고도 다양한 곳에 연동이 가능하다.

관심있는, 앞으로 설치할 예정인 확장 목록

• Vetur
• htmltagwrap
• REST Client
• Visual Studio Live Share
• LintLens — ESLint rules made easier
• Quokka.js
• Visual Studio IntelliCode - Preview

출처 : https://junhobaik.github.io/vsc-plugin-list/