개발자 입문 가이드

VSCode 필수 확장 프로그램 추천

dev_bambi 2024. 11. 18.

728x90

SMALL

Visual Studio Code(VS Code)는

다양한 확장 프로그램을 통해 기능을 확장하고 개발 환경을 더욱 효율적으로 만들어 줍니다.

특히 웹 개발자에게 유용한 확장 프로그램이 많아,

적절한 플러그인을 설치하면 코딩 생산성을 크게 높일 수 있습니다.

이번 글에서는 웹 개발자들이 꼭 설치해야 할 VS Code 필수 확장 프로그램들을 소개하겠습니다. 😊

🛠 코드 포맷팅 및 스타일링 도구

1. Prettier - Code Formatter

Prettier는 코드 스타일을 자동으로 정리해주는 인기 코드 포맷터입니다.

JavaScript, TypeScript, HTML, CSS 등 다양한 언어를 지원하며,

팀에서 일관된 코드 스타일을 유지하는 데 큰 도움이 됩니다.

주요 기능: 자동 포맷팅, 저장 시 코드 정리
설정:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

설치 방법: Prettier - Code Formatter

2. ESLint

ESLint는 JavaScript와 TypeScript 코드의 문법을 검사하고, 코드 품질을 유지하는 데 도움을 줍니다.

코드 스타일을 유지하는 동시에 잠재적인 오류를 사전에 방지할 수 있습니다.

주요 기능: 코드 오류와 스타일링 문제 표시, 자동 수정 기능
설정:

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

설치 방법: ESLint

💻 HTML 및 CSS 도구

3. Live Server

Live Server는 HTML 파일을 로컬 서버에서 실시간으로 미리보기 할 수 있게 해주는 확장 프로그램입니다.

파일을 저장할 때마다 브라우저가 자동으로 새로고침 되어 편리하게 확인할 수 있습니다.

주요 기능: 실시간 미리보기, 자동 새로고침
설치 방법: Live Server

4. Auto Rename Tag & Auto Close Tag

HTML이나 JSX에서 태그를 수정할 때 열림/닫힘 태그를 동시에 수정해주는 Auto Rename Tag와,

자동으로 닫힘 태그를 추가해주는 Auto Close Tag 확장은 코드 작성 속도를 크게 높여줍니다.

주요 기능: 태그 자동 닫기, 태그 이름 동시 수정
설치 방법:
Auto Rename Tag
Auto Close Tag

📂 파일 및 경로 관리 도구

5. Path Intellisense

Path Intellisense는 파일 경로를 자동으로 완성해주는 확장 프로그램입니다.

여러 폴더와 파일을 참조해야 하는 웹 프로젝트에서 파일 경로를 빠르게 입력할 수 있어 편리합니다.

주요 기능: 파일 경로 자동 완성
설치 방법: Path Intellisense

6. Import Cost

Import Cost는 파일에서 import한 모듈의 크기를 표시해줍니다.

각 모듈의 용량을 확인하면서 불필요한 패키지나 용량이 큰 패키지를 파악하는 데 유용합니다.

주요 기능: 모듈의 크기 표시
설치 방법: Import Cost

📝 Markdown 및 문서화 도구

7. Markdown All in One

Markdown All in One은 Markdown 파일을 작성할 때 편리한 기능을 제공하는 확장 프로그램입니다.

실시간 미리보기와 자동 포맷팅 기능 등을 갖추고 있어 블로그 작성이나 README 파일 작성에 유용합니다.

주요 기능: 실시간 미리보기, 자동 포맷팅, 템플릿 생성
설치 방법: Markdown All in One

8. TODO Highlight

코드에서 // TODO 또는 // FIXME와 같은 주석을 하이라이트해주는

TODO Highlight는 중요 작업을 쉽게 추적할 수 있게 도와줍니다.

주요 기능: TODO, FIXME 주석 강조 표시
설치 방법: TODO Highlight

🧑‍💻 Git 및 버전 관리 도구

9. GitLens

GitLens는 Git 히스토리와 변경 내역을 한눈에 보여주는 확장 프로그램입니다. 각 코드 라인이 언제, 누가 수정했는지 등을 알 수 있어 협업 시 유용합니다.

주요 기능: 커밋 히스토리 보기, 파일 변경 사항 추적, Blame 기능
설치 방법: GitLens

10. GitHub Copilot

GitHub Copilot은 GitHub과 OpenAI가 협력해 만든 AI 코드 작성 도구입니다.

코드 자동 완성 기능이 강력하며, 함수나 클래스의 구조를 제안해줘 코딩 생산성을 크게 높여줍니다.

주요 기능: 코드 자동 완성, 함수 및 클래스 구조 제안
설치 방법: GitHub Copilot
Tip: GitHub Copilot은 유료 서비스이므로, 사전에 이용 요금을 확인하세요.

🔍 디버깅 및 코드 품질 도구

11. Bracket Pair Colorizer 2

Bracket Pair Colorizer는 괄호의 색상을 다르게 표시해줘 코드의 구조를 쉽게 파악할 수 있도록 돕습니다.

중첩된 괄호를 구분하기 쉽기 때문에, 긴 코드 작성 시 유용합니다.

주요 기능: 괄호 색상 표시
설치 방법: Bracket Pair Colorizer 2

12. Debugger for Chrome

Debugger for Chrome은 VS Code에서 직접 Chrome 디버깅을 할 수 있게 해줍니다.

자바스크립트 코드를 디버깅할 때 유용하며,

Chrome DevTools를 사용하지 않고도 브라우저에서 실행되는 코드를 확인할 수 있습니다.

주요 기능: Chrome 브라우저 내 디버깅, 브레이크포인트 설정
설치 방법: Debugger for Chrome

⚙️ 추가로 추천하는 유용한 확장 프로그램

13. REST Client

REST Client는 VS Code 내에서 REST API를 테스트할 수 있는 확장 프로그램입니다.

Postman처럼 HTTP 요청을 보낼 수 있으며, API 개발자에게 유용합니다.

주요 기능: HTTP 요청 작성 및 실행, 응답 결과 표시
설치 방법: REST Client

14. Color Highlight

CSS나 HTML에서 색상 코드를 미리보기로 보여주는 Color Highlight는 색상 코드 앞에 색깔을 표시해 줍니다.

디자인 작업을 할 때 유용합니다.

주요 기능: 색상 코드 미리보기
설치 방법: Color Highlight

📝 결론

VS Code는 다양한 확장 프로그램을 통해 기능을 확장할 수 있는 강력한 코드 편집기입니다.

위에서 소개한 확장 프로그램들은

웹 개발에 필요한 코드 포맷팅, 디버깅, 문서화, 버전 관리 등 각종 기능을 포함하고 있어 개발 생산성을 크게 높여 줍니다.

자신의 작업 스타일에 맞는 확장 프로그램을 선택하고 적극적으로 활용하여 더욱 효율적인 개발 환경을 만들어 보세요! 😊

❓ 자주 묻는 질문 (FAQ)

Q1. 초보자에게 필수적인 VS Code 확장은 무엇인가요?

A1.

초보자라면 Prettier(코드 포맷터), Live Server(실시간 미리보기),

Path Intellisense(경로 자동 완성), Auto Close Tag(태그 자동 닫기) 확장을 추천합니다.

Q2. VS Code에서 Git을 관리하는 데 어떤 확장이 좋나요?

A2.

GitLens를 추천합니다.

GitLens는 코드 변경 사항을 한눈에 볼 수 있으며,

커밋 내역과 Blame 기능으로 코드 히스토리를 쉽게 파악할 수 있습니다.

Q3. 코드 작성 속도를 높이기 위한 확장은 무엇인가요?

A3.

GitHub Copilot, Emmet(내장된 확장), Path Intellisense 등이 코드 작성 속도를 크게 높여줍니다.

GitHub Copilot은 특히 코드 자동 완성에 강력한 성능을 제공합니다.