VSCode Extensions

[JaeYeopHan]

VSCode Extensions

GitLens

• 협업할 경우 반드시 필요한 툴인데, 코드 라인마다 어떤 author에 의해 작성되었는지 알려준다.

code .

• 터미널에서 vscode로 열려고 하는 프로젝트의 root directory에서 code . 커맨드를 입력하면 vscode로 바로 접근할 수 있다.

Import Cost

• import 하려는 code(or library)의 용량을 실시간으로 보여준다.

indenticator

• indent depth에 맞춰서 라인을 노출시켜 준다.

Bracket Pair Colorizer

• {}가 겹쳐 있으면 헷갈릴 수 있는데 이를 다른 색으로 표현해서 눈에 잘 들어오게 컬러라이즈 해준다.

TODO parser / TODO highlighting

• // TODO: 또는 // FIXME: 의 prefix로 주석을 작성해주면 작성해둔 리스트를 모아서 보여준다.
• 해당 부분을 하이라이팅 해준다.

Better Comment

• 주석을 추가할 때, prefix를 지정하여 highlighting 할 수 있다.
• 다음의 prefix가 제공된다.
  • * : 중요한 정보
  • ! : warning
  • ? : 의문점이 드는 부분에 대한 주석
  • TODO: : 해야하는 이슈

Code Spell Checker

• Editor 상의 오타를 잡아준다.
• 고유 명사 같은 경우에는 dictionary에 추가하여 인식시킬 수 있다.
• histroy, destory 와 같은 오타를 방지할 수 있다.

Polacode

• 코드 스니펫을 만들 때, 불편한 스크린샷을 사용하는 대신 png로 변환해주는 extension
• 비슷한 웹 서비스로는 Carbon이 있다.

JavaScript console utils

• 블럭처리한 변수를Cmd + Shift + L 단축키로 console.log 할 수 있다.
• 활성화된 에디터 화면의 콘솔을 Cmd + Shift + D 단축키로 제거할 수 있다.

CodeMetrics

• 구현한 함수 또는 클래스의 복잡도를 계산하여 그 정도를 알려준다.

WakaTime

• VSCode extension과 연동해두면 어떠한 프로젝트에서 얼마의 시간동안 어떤 언어로 코딩했는지 정리해주는 extension.
• 보다 자세한 설명과 화면은 위 링크를 통해서 확인 가능.

Version Lens

• package.json에서 npm module들의 version에 대해 최신 버전인지 아닌지에 대해 보여준다.

VSCode Live Share Extension

• 에디터 화면을 공유하여 함께 작업할 수 있도록 해주는 extension

Setting-sync

• gist를 통해 기기간 VSCode 설정을 동기화시킬 수 있다.
• Setting sync Getting Started (한국어)

change-case

UPPER_CASE 로 빠르게 수정할 수 있다.

For other editor user

Intellij Key binding

• Intellij 사용자가 사용하던 keymap을 그대로 사용할 수 있도록 keybinding을 변경해주는 extension