추천하는 비주얼 스튜디오 코드 확장!

현재 사용 중인 확장 목록. 이것저것 관심만 많다 보니 확장도 많아졌다…

Korean Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ko

설명이 필요 없는 무조건 vscode 1순위 설치 확장!

공통

단디 - 한국어 맞춤법 검사기

https://marketplace.visualstudio.com/items?itemName=fallroot.vscode-dandy

명령 팔레트에서 “맞춤법 검사하기” 명령어로 전체 문장 또는 선택한 문장의 맞춤법을 검사할 수 있다. 맞춤법 검사 엔진으로는 부산대 맞춤법 검사기를 사용한다.

설명에는 검사 후에 빠른 수정 메뉴에서 틀린 단어를 고칠 수도 있다는데 왜인지 난 빠른 수정 메뉴가 활성화되지 않는다…

Active File In StatusBar

https://marketplace.visualstudio.com/items?itemName=RoscoP.ActiveFileInStatusBar

상태 표시줄에 현재 파일의 전체 경로를 표시한다. 클릭하면 전체 경로가 클립보드에 복사된다.

Bookmarks

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

코드의 특정 라인을 북마크에 추가해 두고 원할 때 바로바로 이동할 수 있는 확장이다. Bookmarks 명령어를 찾아서 사용해도 되고 우클릭 메뉴에 있는 Bookmarks를 사용해도 된다. 이렇게 추가한 북마크는 좌측 Bookmarks 사이드바에서 확인할 수 있다.

Bracket Select

https://marketplace.visualstudio.com/items?itemName=jhasse.bracket-select2

Alt+A를 누르면 괄호 안을 선택해 준다. 더 바깥쪽까지 선택하고 싶으면 한 번 더 단축키를 누르면 된다. 이거 대박 편함ㅎㅎ

다시 이전 선택으로 돌아가고 싶을 땐 Ctrl+U

기본적으로 괄호 안쪽을 선택하는데 괄호까지 선택하고 싶으면 Ctrl+Alt+A

Code Runner

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

온갖 언어의 실행(만) 지원하는 확장이다. 따로 컴파일러나 인터프리터가 있는 건 아니고 이미 설치돼 있는 걸 실행시키는 역할만 하므로 관련 프로그램은 세팅되어 있어야 한다.

설치하면 탭 오른쪽에 run code 버튼이 생긴다.

"code-runner.executorMap": {
    "python": "set PYTHONIOENCODING=utf8 && $pythonPath $fullFileName",
},

파이썬에서 가상환경을 인식 못 하는 거랑 한글 깨짐 문제를 해결하기 위해 추가한 설정

DotENV

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

.env 파일에 대한 구문 강조 추가

Excel Viewer

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

csv와 엑셀 파일을 vscode에서 바로 편집할 수 있는 확장이다. 간단하게 사용하기에 좋다.

엑셀 파일은 바로 열면 되고 csv 파일은 파일에서 우클릭→ 연결 프로그램→CSV Viewer를 선택하면 된다.

file-size

https://marketplace.visualstudio.com/items?itemName=zh9528.file-size

상태 표시줄에 현재 파일의 용량을 표시한다.

GitHub Copilot

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot

그 유명한 AI 기반 코드 자동완성 툴인 코파일럿 확장이다. 깃허브에서 코파일럿을 구독해야 사용할 수 있다.

베타 시절에 써보고 얘가 독심술을 쓰나 싶은 순간들이 있어서 경이로웠는데 유료화되어서 못 쓰고 있다가 저번에 적금 만기 기념으로 한번 질렀다.(근데 다시 써보니까 처음의 그 신기함은 없다. 이미 맛봐서 그런가…)

GitHub Copilot Labs

https://marketplace.visualstudio.com/items?itemName=GitHub.copilot-labs

코파일럿에서 실험 중인 기능을 체험해 볼 수 있는 확장이다. 사용하려면 여기에서 등록을 먼저 해야 한다.

사이드바에 GitHub Copilot Labs 메뉴가 추가되는데 대충 코드 설명, 코드는 다른 언어로 변환, 읽기 편하게 수정, 타입 추가, 버그 수정, 디버그, 테스트 코드 생성 등의 기능이 있다.

Hex Editor

https://marketplace.visualstudio.com/items?itemName=ms-vscode.hexeditor

헥스 에디터 확장이다. 파일에서 우클릭→ 연결 프로그램→Hex Editor를 선택하거나 Hex Editor 명령어를 사용해서 헥스 에디터를 열 수 있다.

Image preview

https://marketplace.visualstudio.com/items?itemName=kisstkondoros.vscode-gutter-preview

이미지 경로가 있으면 줄번호 왼쪽 여백과 마우스 커서를 올렸을 때 뜨는 팝업에 이미지 미리보기를 추가하는 확장이다.

indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

들여쓰기 뎁스마다 서로 다른 색으로 색칠하는 확장이다. 또 잘못된 뎁스면(뎁스가 2인데 한 칸만 띄어져 있다던가) 빨간색으로 표시도 해준다.

Indentation Level Movement

https://marketplace.visualstudio.com/items?itemName=kaiwood.indentation-level-movement

Ctrl+Up/Down으로 커서를 들여쓰기 수준 단위로 이동할 수 있다. Shift를 함께 누르면 선택도 가능하다.

함수의 시작과 끝을 찾아갈 때 특히 유용하다.

IntelliCode

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode

AI 기반 코드 자동완성 툴이다. 설치하면 IntelliCode API Usage Examples 확장도 함께 설치된다.

Python, TypeScript, JavaScript, Java를 지원한다.

IntelliCode Completions

https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode-completions

선술한 IntelliCode가 자동 완성 목록을 보여준다면 이 확장은 더 나아가서 해당 줄의 완성을 제안한다.

Python, JavaScript, TypeScript를 지원한다.

Live Share

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

실시간으로 다른 사람과 동시에 편집하는 확장이다. 비주얼 스튜디오에 내장된 기능이랑 같고 예전엔 음성 채팅용 확장도 따로 있었는데 그건 디플리케이티드됐다.

아직 한 번도 사용해 본 적이 없다…

Multiple cursor case preserve

https://marketplace.visualstudio.com/items?itemName=Cardinal90.multi-cursor-case-preserve

Ctrl+D로 텍스트를 다중 선택하고 한 번에 바꿀 때 기존 케이스를 유지하는 확장이다. 특히, 리액트에서 useState 사용할 때 편리한데 변수명을 보통 [value, setValue] 이런 식으로 지정하는데 value의 이름을 바꿀 때 setValue도 첫 글자 대문자를 유지한 채 바뀌어서 굉장히 유용하다.

Multiple cursor same case

https://marketplace.visualstudio.com/items?itemName=psuranas.multiple-cursor-same-case

Ctrl+D 텍스트 다중 선택 기능은 대소문자를 구분하지 않는다. 이 확장을 설치하고 Alt+D를 누르면 대소문자를 구분하는 다중 선택 기능을 사용할 수 있다.

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

파일 경로에 대한 자동완성을 추가하는 확장이다. 자바스크립트 파일은 내장 기능이랑 겹치므로 아래 설정을 추가하는 게 좋다.

"javascript.suggest.paths": false,
"typescript.suggest.paths": false,

Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

설치하면 사이드바에 Project Manager 메뉴가 추가서 작업 영역을 저장하고 불러올 수 있다. 탐색기 왔다 갔다 하며 프로젝트를 열 필요 없이 한번 저장해 두고 원할 때마다 바로 열 수 있으니 정말 편하다. 필수 확장!

Rainbow CSV

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

csv, tsv 파일을 열면 열별로 다른 색으로 표시해 준다. 린터 기능도 있어서 csv 파일에 잘못된 부분이 있는지도 찾아준다.

Remote Development

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack

WSL, Dev Containers, Remote - SSH, Remote - SSH: Editing Configuration Files, Remote - Tunnels, Remote Explorer를 묶은 확장팩

WSL은 WSL에서 폴더를 열어서 리눅스 기반 개발환경을 사용할 수 있게 해준다.

Dev Containers는 도커와 연동서 컨테이너의 개발환경을 사용할 수 있게 해준다.

Remote - SSH는 SSH를 통해 원격 서버에 접속해서 개발할 수 있게 해준다.

Remote - Tunnels는 vscode를 서버로 만들어서 원격 시스템에 접속해서 개발할 수 있게 해준다. 서버는 사이드바의 계정 버튼→원격 터널 엑세스 켜기를 통해 켤 수 있다.(서버같이 gui가 없는 환경에선 code CLI을 사용하면 된다.) 이 확장은 서버 킬 때는 필요 없고 서버에 접속할 때 필요하다.

다른 컴퓨터를 내 컴퓨터처럼 사용한다는 게 대박인 확장들이다. 사이드바에 원격 탐색기 메뉴가 생긴다.

Remote Repositories

https://marketplace.visualstudio.com/items?itemName=ms-vscode.remote-repositories

git 리포지토리를 바로 열어서 사용할 수 있는 확장이다. 설치하면 GitHub Repositories, Azure Repos 확장도 함께 설치된다.

깃허브와 애저 리포지토리를 지원한다. 애저는 안 써서 필요 없는데 같이 설치된다…

사이드바에 원격 탐색기 메뉴→원격 리포지토리로 사용할 수 있다.

Thunder Client

https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client

포스트맨처럼 REST API를 테스트할 수 있는 확장이다. 설치하면 사이드바에 Thunder Client가 생긴다.

원래 REST Client 확장을 쓰다가 이게 더 사용하기 편리해서 갈아탔다. 물론 REST Client도 사용하긴 조금 복잡하지만, 내용이 파일로 관리된다는 장점이 있다.

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

줄 끝에 공백이 있으면 빨간색으로 강조 표시를 해주는 확장이다. 설정에 따라 자동으로 삭제시킬 수도 있는데 이러면 부작용이 있어서 설정하지 않고 사용한다.

이런 거에 집착하는 스타일이라 꼭 필요하다.ㅎㅎ

translator

https://marketplace.visualstudio.com/items?itemName=sculove.translator

번역 확장이다. 단축키는 Ctrl+shift+T이고 한국어를 선택하고 단축키를 누르면 영어로, 영어를 선택하고 단축키를 누르면 한국어가 뜬다.

기본적으로 구글 번역 API를 사용하는데 결과가 썩 만족스럽지는 않다. 그래도 간단하게 쓰기엔 좋다.

HTML | CSS

Auto Complete Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag

Auto Close Tag와 Auto Rename Tag를 묶은 확장팩

Auto Close Tag는 HTML 태그를 입력하면 닫는 태그를 자동으로 넣어준다. vscode 기본 기능도 있지만 기본 기능은 HTML 파일에서만 작동하고 이 확장은 더 다양한 언어에서 작동한다.

"auto-close-tag.SublimeText3Mode": true, 옵션을 추가하면 </를 입력했을 때 닫는 태그를 자동으로 추가한다.

Auto Rename Tag는 태그 이름을 바꿀 때 닫는 태그도 같이 바꿔준다. 이것도 역시 vscode 기본 기능이 있지만 기본 기능은 HTML 파일에서만 작동한다.

한 가지 아쉬운 점은 실수로 한글을 입력하면 기능이 작동하지 않는다.

Color Highlight

https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

색상 코드가 있으면 텍스트 배경으로 해당 색을 보여주는 확장이다. 직관적이어서 편함

CSS Peek

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

html 파일에서 class와 id에 커서를 올리면 참조하고 있는 css 스타일 속성을 보여준다. 웹 개발 필수 확장

CSS Variable Autocomplete

https://marketplace.visualstudio.com/items?itemName=vunguyentuan.vscode-css-variables

css 변수에 대한 자동 완성을 추가하는 확장이다.

Highlight Matching Tag

https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

html 파일에서 태그에 커서가 위치하면 짝이 되는 태그를 밑줄로 표시해 준다. 상태표시줄에 태그 경로를 표시하는 기능도 있다.

HTML End Tag Labels

https://marketplace.visualstudio.com/items?itemName=anteprimorac.html-end-tag-labels

닫는 태그 끝에 해당 태그의 아이디와 클래스명을 표시하는 확장이다. 짝이 되는 태그를 구분할 때 유용하다는 점에서 선술한 Highlight Matching Tag와 비슷한데 이건 부트스트랩, 테일윈드css 같은 유틸리티 퍼스트 라이브러리를 사용할 때 (클래스명이 덕지덕지 붙다 보니까) 더 유용하다.

HTMLHint

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlhint

htmlhint에 대한 지원을 추가한다. HTMLHint는 html의 eslint 같은 툴이다.

기본적으로 설치되어 있는 htmlhint를 사용하고 설치되어 있지 않아도 확장에 내장된 버전을 사용한다.

htmltagwrap

https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap

Alt+W를 누르면 선택한 부분을

태그로 감싸준다. 리액트를 하면서 <>로 감쌀 일이 자주 있는데 꽤 편하다.

IntelliSense for CSS class names in HTML

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

html 파일에서 클래스명 자동 완성 확장이다. 리액트에 대응하는 className도 지원한다.

Live Preview

https://marketplace.visualstudio.com/items?itemName=ms-vscode.live-server

html 파일 결과물을 실시간으로 볼 수 있는 확장이다. 파일을 열고 탭 옆에 미리 보기 표시를 누르면 내장 브라우저에 결과물이 뜬다. 게다가 파일 내용이 변경되면 실시간으로 반영된다. 내부적으로 웹서버를 띄우기 때문에 url을 그대로 다른 브라우저에 입력해서 똑같이 확인할 수 있다.

원래 Live Server 확장을 사용했었는데 이게 새로 나왔길래 이걸로 바꿨다. 아무래도 마소가 직접 만든 거니까…

PostCSS Language Support

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

최신 css 문법에 대한 구문 강조를 추가한다.

"emmet.includeLanguages": {
  "postcss": "css"
}

위 설정도 추가해야 한다.

px to rem & rpx & vw (cssrem)

https://marketplace.visualstudio.com/items?itemName=cipchk.cssrem

px나 rem에 커서를 두고 Alt+Z를 누르면 px↔rem이 서로 변환된다. 그리고 단위 입력할 때 자동 완성도 추가된다.

Stylelint

https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

stylelint에 대한 지원을 추가한다. 프로젝트에 stylelint가 설치되어 있어야 한다. eslint와는 다르게 존재를 늦게 알아서 본격적으로 써보진 못했다.

JavaScript

Babel JavaScript

https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel

최신 자바스크립트 문법(ES201x)에 대한 구문 강조를 추가한다.

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

eslint에 대한 지원을 추가한다. 프로젝트에 eslint가 설치되어 있어야 한다.

웹 개발에 있어서 eslint는 필수

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

import 코드 옆에 해당 패키지의 용량을 표시한다. 사소하지만 최적화하는 데 도움이 된다.

Javascript Auto Backticks

https://marketplace.visualstudio.com/items?itemName=chamboug.js-auto-backticks

작은따옴표(’)나 큰따옴표(”)로 작성 중인 문자열을 필요할 때 백틱(`)으로 변환하는 확장이다. 귀차니즘 해결

JS Quick Console

https://marketplace.visualstudio.com/items?itemName=AhadCove.js-quick-console

변수를 선택하고 Ctrl+Shift+L을 누르면 console.log 코드를 자동으로 추가하는 확장이다. 귀차니즘 해결

정확히는 변수뿐만 아니라 드래그한 부분이 console.log로 들어간다.

npm Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

import 문에서 npm 패키지 자동완성을 추가하는 확장이다. 기본적으로 dependencies만을 대상으로 하는데 "npm-intellisense.scanDevDependencies": true, 설정으로 devDependencies도 포함할 수 있다.

Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

prettier에 대한 지원을 추가한다. 프로젝트에 prettier가 설치되어 있지 않으면 내장된 prettier를 사용한다. 웹 개발에 있어서 prettier는 eslint와 함께 필수

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},
"[php]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
},

prettier 확장을 포매터로 사용하려면 위 설정이 필요하다. 일단 javascript, html, php에만 적용해 놨다.

.prettierrc를 인식하긴 하지만 전역으로 작은따옴표만 사용하고 싶어서 "prettier.singleQuote": true, 설정도 추가했다. 이거 말곤 기본값 스타일이 마음에 든다.

Preview.js

https://marketplace.visualstudio.com/items?itemName=zenclabs.previewjs

UI 컴포넌트를 미리 볼 수 있는 확장이다. React, Preact, Solid, Svelte, Vue를 지원하기 때문에 웬만한 건 다 지원한다 보면 된다. 설치 후 컴포넌트 선언 위쪽에 Open ~ in Preview.js가 생겨서 누르면 미리보기가 화면 분할로 열린다.(약간 스토리북 느낌)

정말 신기하고 강력한 확장인데 아쉽게도 뭔가 척척 동작하지 않는다…

Version Lens

https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens

패키지 버전을 표시하는 확장이다. package.json 파일을 열면 탭 옆에 Show dependency versions 버튼이 생기는데 버튼을 누르면 npm에서 버전 정보를 가져와서 기준을 만족하는 버전(설치된 버전 아님)과 최신 버전을 알려준다.

패키지 업데이트 여부를 빠르게 파악할 수 있다. npm 말고 닷넷, 메이븐 등 다른 언어의 패키지도 지원하는 거 같지만 일단 사용 중인 건 npm 뿐이라…

ZipFS - a zip file system

https://marketplace.visualstudio.com/items?itemName=arcanis.vscode-zipfs

개인 프로젝트에 공부 삼아 yarn berry와 pnp를 도입하면서 설치했다. pnp는 패키지를 zip 파일로 보관하는데 이를 읽을 수 있게 해준다.

C | C++

C/C++

https://marketplace.visualstudio.com/items?itemName=ms-vscode.cpptools

vscode에서 C나 C++ 개발을 한다면 필수 확장

근데 이쪽 언어는 최근 들어 구경해 본 적조차 없다…

후술할 Inline Parameters 확장처럼 파라미터 이름 표시를 추가하려면 "C_Cpp.inlayHints.parameterNames.enabled": true, 설정을 추가하면 된다.

C#

C#

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

vscode에서 C# 개발을 한다면 필수 확장

여기도 대학 졸업 이후로 본 적이 없는…

Python

Better Jinja

https://marketplace.visualstudio.com/items?itemName=samuelcolvin.jinjahtml

진자 템플릿 엔진에 대한 구문 강조를 추가한다. 원래 진자가 정해진 확장자가 없지만 기본적으로 .jinja, .jinja2, .j2, .html.j2에 연결되어 있으니, 확장자를 이걸 사용하는 게 직접 파일 형식을 지정하는 것보다 편하다.

Black Formatter

https://marketplace.visualstudio.com/items?itemName=ms-python.black-formatter

파이썬 black 포매터 확장

파이썬 포매터로 autopep8, black, yapf가 유명한데 조사를 해보니 black이 내 취향이라 이걸로 골랐다.(prettier 느낌~) vscode 기본 기능으로 black 포매터를 지정할 수 있지만 이건 black 패키지가 설치되어 있어야 하는데, 이 확장을 사용하면 설치되어 있지 않아도 사용할 수 있다.(물론 설치되어 있으면 설치된 패키지를 우선 사용)

"[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
},
"python.formatting.provider": "none",

black 확장을 파이썬 포매터로 사용하려면 위 설정이 필요하다.

Inline Parameters Extended for VSCode

https://marketplace.visualstudio.com/items?itemName=RobertOstermann.inline-parameters-extended

함수를 호출할 때 매개변수에 주석(변수명)을 추가하는 확장이다. 인텔리제이에선 익숙한 기능인데 vscode에선 이 확장으로 사용할 수 있다.

Go, Java, Lua, PHP, Python을 지원한다.

참고로 JavaScript, TypeScript에 대한 건 내장 기능으로 사용할 수 있다. 각각 "javascript.inlayHints.parameterNames.enabled": "all",, "typescript.inlayHints.parameterNames.enabled": "all",이다.

Jupyter

https://marketplace.visualstudio.com/items?itemName=ms-toolsai.jupyter

주피터 노트북을 vscode 내부에서 바로 사용할 수 있는 확장이다. 설치하면 Jupyter Keymap, Jupyter Notebook Renderers, Jupyter Slide Show, Jupyter Cell Tags 확장이 같이 설치된다.(이거까진 필요 없는데…)

Pylance

https://marketplace.visualstudio.com/items?itemName=ms-python.vscode-pylance

정적 타입 체커인 Pyright가 내장된 파이썬 언어 서버 확장

vscode에서 파이썬 개발을 한다면 파이썬 확장과 함께 필수 확장이다. "python.languageServer": "Pylance", 설정 필수

Python

https://marketplace.visualstudio.com/items?itemName=ms-python.python

vscode에서 Python 개발을 한다면 필수 확장

Ruff

https://marketplace.visualstudio.com/items?itemName=charliermarsh.ruff

파이썬 ruff 린터 확장

파이썬 린터로 pylint, flake8, mypy, pycodestyle, prospector 등이 유명한데 원래 Pylint를 사용하다가 비교적 최근에 Ruff라는 린터가 새로 나왔다길래 사용 중이다. 그리고 파이썬 import 목록을 보기 좋게 정렬해 주는 패키지인 isort의 기능도 내장되어 있다.

"[python]": {
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.organizeImports": true
    },
},

파일을 저장할 때마다 자동으로 포매팅하고 오류를 수정하려면 위 설정이 필요하다.

AutoHotkey

AutoHotkey Plus Plus

https://marketplace.visualstudio.com/items?itemName=mark-wiemer.vscode-autohotkey-plus-plus

오토핫키 인텔리센스를 추가한다. 아직 AHK v2를 지원하지 않는다.(그래도 어느 정도 호환되기는 함)

Git

Git File History

https://marketplace.visualstudio.com/items?itemName=pomber.git-file-history

후술할 확장들로도 히스토리를 볼 수 있는데 이 확장을 설치한 이유는 히스토리를 단계별로 미려하게 확인해 볼 수 있어서이다. Git File History 명령어로 사용할 수 있다.

Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

gui 상에서 git 작업을 할 수 있는 확장이다. 사이드바 소스 제어 메뉴의 소스 제어 부분 우측에 View Git Graph 버튼이나 상태표시줄의 Git Graph 버튼으로 사용할 수 있다.

후술할 GitLens가 워낙 강력해서 완전히 기능이 겹치지만, 남겨놓은 이유는 gui가 쓰기 편리해서이다. 그래프 디자인도 이쪽이 더 보기 좋고… 사실 git 작업은 vscode에서 안 하고 소스트리로만 해서 거의 써본 적이 없긴 하다…ㅎ

GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

사실 git 확장은 이거로만 대동단결해도 충분하다.(그래서 많은 글에서 추천하는 Git History 확장도 지웠다.) 특히, 편집기에서 라인 끝에 해당 코드는 누가 수정했는지 표시해 주는데 이게 협업 시에 굉장히 유용하다.

사이드바에 GitLens 메뉴가 추가되어서 사용할 수 있다. 파일 별로를 넘어서 라인 별로 히스토리 보는 기능도 꽤 유용하다.

Log

Auto Reload

https://marketplace.visualstudio.com/items?itemName=sebastian-lay.auto-reload

파일이 변경되면 자동으로 다시 읽는 확장이다. 설치하면 우측 하단에 Auto Reload 버튼이 생기는데 이걸 눌러서 활성화할 수 있다.

로그 파일 볼 때 유용하고 후술할 AutoScroll 확장과 궁합이 좋다.

AutoScroll

https://marketplace.visualstudio.com/items?itemName=pejmannikram.vscode-auto-scroll

파일 내용이 변화하면 스크롤을 맨 밑으로 내려주는 확장이다. log 확장자에선 기본적으로 활성화되어 있고 다른 확장자에서는 Enable Auto Scroll 명령어로 활성화할 수 있다.

Log File Highlighter

https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter

log 파일에 구문 강조를 추가한다.

테마

Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

회사

회사에서만 필요한 확장 기록

AWS Toolkit

https://marketplace.visualstudio.com/items?itemName=AmazonWebServices.aws-toolkit-vscode

회사에서 aws를 사용 중이라 설치했다.

유저 데이터 전송을 막고 싶으면 "aws.telemetry": false, 설정을 추가하면 된다.

Data Preview

https://marketplace.visualstudio.com/items?itemName=GrapeCity.gc-excelviewer

온갖 데이터 파일들을 보기 좋게 출력해준다. 선술한 Excel Viewer를 대체할 수 있어서 한번 사용해 보는 중이다.

Docker

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

회사에서 도커 사용 중이라 설치

EJS Beautify

https://marketplace.visualstudio.com/items?itemName=j69.ejs-beautify

ejs를 prettier로 돌리면 괴이해져서 찾은 확장이다. 프리티어만큼 마음에 드는 결과물은 아니지만 괜찮게 포매팅해 준다.

Jest

https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest

테스팅 라이브러리인 jest의 테스트를 직관적으로 표시하고 자동으로 수행하는 확장이다. 설치하면 사이드바의 테스트 메뉴에서 사용할 수 있다.

"jest.autoRun": {
    "watch": false,
    "onSave": "test-file"
},

기본값은 파일 변경 시 자동으로 테스트 실행인데 프로젝트가 무거워서 테스트 돌 때마다 버벅대는 문제 때문에 일단 위 설정으로 자동 실행을 끄고 테스트 파일 변경 시에만 테스트가 돌도록 해놨다.

테스트 코드를 도입하고 싶은데 잘 안된다…ㅠㅠ

Multiline Structural Search - CodeQue

https://marketplace.visualstudio.com/items?itemName=CodeQue.codeque

문법을 이해해 구조적으로 코드를 검색하는 툴이라는데 아직 잘 모르겠다. 더 써봐야 할 듯…

Playwright Test for VSCode

https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright

테스팅 라이브러리인 playwright를 vscode와 통합하는 확장이다. 역시 테스트 코드 도입의 길은 험난하다…

psioniq File Header

https://marketplace.visualstudio.com/items?itemName=psioniq.psi-header

파일 상단에 저작권 표시를 자동으로 추가해 준다. 한가지 치명적인 문제가 있는데 연도를 넣었을 때 해가 바뀌면 기존에 이미 들어가 있던 연도는 갱신이 안 된다. 설정에 바뀌도록 하는 게 있는 거 같은데 내가 이해를 잘못한 건지 아무런 효과가 없다.

YAML

https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

yaml에 대한 언어 지원을 추가하는 확장이다. yml 파일을 수정할 일이 생겨서 설치