꼭 있어야 할 확장 기능들

정말 가치 있는 확장 기능이 몇 가지 있어요 : Prettier, ESLint, GitLens, Git Graph, Error Lens, Path Intellisense. 나머지는 노이즈예요. 이 레슨에서는 짧은 목록과 각각의 이유를 알려드려요.

확장 기능 설치하기

Extensions 패널을 열어요(사이드바의 사각형 아이콘, 또는 Ctrl+Shift+X). 검색창에 이름이나 ID를 입력하고 Install을 클릭해요.

터미널에서도 설치할 수 있어요.

$code --install-extension esbenp.prettier-vscode

필수 확장 기능 6가지

Prettier - esbenp.prettier-vscode

저장할 때마다 코드를 자동으로 포맷팅해줘요 : 들여쓰기, 따옴표, 쉼표, 줄 길이. 파일 스타일 때문에 싸울 필요가 없어요. .prettierrc에 한 번 설정하고 잊어버리면 돼요.

$code --install-extension esbenp.prettier-vscode

ESLint - dbaeumer.vscode-eslint

코드를 실행하기 전에 잠재적인 버그를 잡아줘요 : 사용하지 않는 변수, 빠진 import, 흔한 타입 오류. 에디터에서 실시간으로 빨간 밑줄이 나타나요. JavaScript나 TypeScript 프로젝트라면 필수예요.

$code --install-extension dbaeumer.vscode-eslint

GitLens - eamodio.gitlens

에디터에서 바로 연한 회색으로 각 줄을 누가 언제 수정했는지 보여줘요(인라인 git blame). 줄 위에 마우스를 올리면 commit 메시지가 보여요. 클릭하면 전체 히스토리로 가요. 팀 프로젝트라면 필수예요.

$code --install-extension eamodio.gitlens

Error Lens - usernamehw.errorlens

기본적으로 VS Code는 줄 위에 마우스를 올릴 때만 ESLint와 TypeScript 오류를 보여줘요. Error Lens는 마우스를 움직이지 않아도 잘못된 코드 오른쪽에 굵게 바로 표시해줘요. 입력하면서 오류를 볼 수 있어요.

$code --install-extension usernamehw.errorlens

Path Intellisense - christian-kohler.path-intellisense

import에서 파일 경로를 자동완성해줘요(../components/Button, ./utils/format). ./를 입력하면 파일 목록이 나타나요. 상대 경로 오타를 방지해줘요.

$code --install-extension christian-kohler.path-intellisense

IntelliCode - visualstudioextsai.vscodeintellicode

코드 컨텍스트와 인기 오픈소스 패턴을 기반으로 한 제안으로 VS Code의 자동완성을 개선해줘요. 가장 가능성 높은 제안이 목록 맨 위에 별표와 함께 올라와요.

$code --install-extension visualstudioextsai.vscodeintellicode

모두 설치되었는지 확인하기