티스토리 뷰

728x90
반응형

안녕하세요, 여러분! 오늘은 Visual Studio Code(VS Code)에서 GitHub을 효과적으로 사용하기 위해 설치하면 좋은 확장 프로그램에 대해 알아보겠습니다. 이 글에서는 각 확장 프로그램의 기능과 설치 방법을 쉽게 설명할 테니, 따라하기 간편하게 진행해보세요!

 

 

1. VS Code와 GitHub 통합

VS Code는 기본적으로 Git과 통합되어 있어 GitHub을 사용할 수 있지만, 몇 가지 유용한 확장 프로그램을 추가하면 더욱 편리하게 작업할 수 있습니다. 아래의 빨간색 박스를 눌러서 확장을 할 수 있습니다. 다음은 추천하는 확장 프로그램입니다.

 

 

2. 추천 확장 프로그램

2.1. GitHub Pull Requests and Issues

설명: 이 확장 프로그램은 VS Code에서 GitHub의 풀 리퀘스트와 이슈를 관리할 수 있게 도와줍니다. 코드 변경 사항을 확인하고, 리뷰하며, 이슈를 생성하고 관리할 수 있습니다.

설치 방법:

  1. VS Code를 열고, 왼쪽 사이드바에서 Extensions 아이콘(사각형 네 개)을 클릭합니다.
  2. 검색창에 "GitHub Pull Requests and Issues"를 입력하고, 설치 버튼을 클릭합니다.
  3. 설치가 완료되면 VS Code를 재시작할 필요 없이 바로 사용할 수 있습니다.

2.2. GitLens

설명: GitLens는 Git의 기능을 강화해주는 확장 프로그램으로, 코드의 변경 이력, 작성자 정보, 커밋 메시지 등을 쉽게 확인할 수 있습니다. 코드 이해도를 높이고 협업 시 유용합니다.

설치 방법:

  1. Extensions 아이콘을 클릭합니다.
  2. 검색창에 "GitLens"를 입력하고, 설치 버튼을 클릭합니다.
  3. 설치 후 바로 사용할 수 있습니다.

2.3. Git Graph

설명: Git Graph는 Git 리포지토리의 커밋 이력을 시각적으로 보여주는 도구입니다. 그래프 형태로 커밋 이력을 확인할 수 있어 프로젝트 진행 상황을 한눈에 파악할 수 있습니다.

설치 방법:

  1. Extensions 아이콘을 클릭합니다.
  2. 검색창에 "Git Graph"를 입력하고, 설치 버튼을 클릭합니다.
  3. 설치 후, 명령 팔레트(Ctrl + Shift + P)에서 "Git Graph: View Git Graph"를 입력하여 사용할 수 있습니다.

2.4. Prettier - Code formatter

설명: Prettier는 코드 포맷팅 도구로, 팀에서 일관된 코드 스타일을 유지하는 데 도움을 줍니다. GitHub에서 코드 리뷰 시 가독성을 높여줍니다.

설치 방법:

  1. Extensions 아이콘을 클릭합니다.
  2. 검색창에 "Prettier - Code formatter"를 입력하고, 설치 버튼을 클릭합니다.
  3. 설치 후, 설정에서 기본 포맷터로 지정해줍니다.

 

3. 확장 프로그램 활용하기

각 확장 프로그램을 설치한 후, VS Code 내에서 쉽게 사용할 수 있습니다. 예를 들어:

  • GitHub Pull Requests and Issues: 사이드바에서 GitHub 아이콘을 클릭하여 풀 리퀘스트와 이슈를 관리할 수 있습니다.
  • GitLens: 코드 편집 화면에서 변경 이력을 확인하려면, 해당 코드 라인에 마우스를 올리면 작성자와 커밋 정보를 볼 수 있습니다.
  • Git Graph: 명령 팔레트에서 "Git Graph: View Git Graph"를 입력하여 그래프 형태로 커밋 이력을 확인할 수 있습니다.
  • Prettier: 파일을 저장할 때 자동으로 코드 포맷팅을 적용하여 일관된 코드 스타일을 유지할 수 있습니다.

 

4. 마치며

이제 Visual Studio Code에서 GitHub을 쉽게 사용하기 위한 확장 프로그램을 설치하고 활용하는 방법을 배웠습니다. 추가로 설치한 확장 프로그램들을 통해 코드 관리를 더욱 효율적으로 할 수 있습니다. 다음번에는 더 자세하게 해당 확장 프로그램을 사용하는 법을 설명하는 글을 작성해 보도록 하겠습니다. 

 

궁금한 점이 있다면 댓글로 남겨주세요! 다음에도 유용한 팁으로 찾아뵙겠습니다. 행복한 코딩 되세요! 😊

728x90
반응형