title profile picture

Dev.White

사용중인 VSCode(Visual Studio Code) 확장 플러그인 목록

Jan 19, 2018(Last updated: Mar 30, 2020)
·

Visual Studio Code 에서 사용중인 확장을 정리해둔 글입니다.

Front-End 개발 환경에 맞게 되어있습니다.

emoji-star 는 강력 추천!

VSCode 기본 플러그인 및 테마

A

  • Active File In StatusBar
    VSCode 최하단 상태바에 작업중인 파일의 경로가 나타납니다.
  • Auto Rename Tag emoji-star
    <tag> </tag> 하나의 태그를 수정하면 짝이되는 태그도 동시에 함께 수정됩니다.

B

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

C

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

D

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

E

G

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

I

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

N

  • npm
    package.json파일을 확인하여 설치된 패키지들의 유효성 검사를 해준다. 파일 내에 종속성이 선언되어있지만 설치되어있지 않다던가 선언되었는데 사용되어지지 않는 등의 확인을 해준다.
  • npm intellisense emoji-star
    npm module 을 import 코드를 작성할 때 설치된 모듈을 기준으로 자동완성을 제공해준다.

P

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

R

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

S

  • Settings Sync
    VSCode 설정(확장 플러그인 포함) 동기화 도구
    VSCode v1.440 부터 공식적으로 설정 동기화 기능을 제공한다.
    현재(200330)는 정식 버전은 아직 업데이트가 되지 않았고 VSCode insider에서 사용할 수 있다.

T

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

W

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

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



추가로 VSCode 사용에 도움이 될 만한 자료들
- VS Code Tips and Tricks