💽 GIT 관리하는데 유용한 VSCode 확장팩

...

GIT 익스텐션

이번 포스팅은, VSCode에서 GIT을 사용하는데 있어 편리하고 더 강력하게 사용할수 있는 vscode 익스텐션을 추천 해보려고 한다. 다음 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워 여러분께도 소개하는 것이다.

만일, 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다.

GitLens

레포지토리 내부 파일을 수정할 때 왠만한 내용은 다 오버레이로 보여주게 해주는 익스텐션이다.

코드 작성자를 시각화하고 Git 저장소를 완벽하게 탐색하고 강력한 비교 명령을 지원한다.

사실상 VSCode 내에서 GIT 버젼 관리와 코딩을 동시에 수행하는데 가능하게 하는 최강의 익스텐션이다.

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly navigate and explore Git repositories, gain valuable insights via rich visualizations and powerfu

marketplace.visualstudio.com

Git Graph

Git Graph는 VS Code에서 GUI 기반의 Git 도구를 사용할수 있게 한다.

단순히 그래프만 보기 편한 것뿐만 아니라 번거로운 Git 명령어들도 GUI로 편하게 사용할 수 있다.

커밋 히스토리에서 원하는 내역에 우클릭을 하면 Reset, Revert, Cherry Pick 등의 Git 명령어들을 GUI로 쉽게 이용할 수 있다.

사실상 GIT GUI 도구를 그대로 VSCode로 옮겨놓은 것과 다름없다. 굉장히 고품질의 기능을 제공해준다.

Git Graph - Visual Studio Marketplace

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

marketplace.visualstudio.com

위의 사진처럼 설치 이후에는 VS Code의 소스 제어 창에서 View Git Graph를 클릭하거나 VS Code 하단의 상태바에서 Git Graph를 클릭해서 진입할 수 있다.

Git History

git log 보기, 파일 히스토리, 브랜치와 커밋을 비교 할 수 있는 확장 익스텐션이다.

그래프 및 세부 정보와 함께 git log 를 보고 검색
파일의 이전 사본을 볼수있다
히스토리 보기 및 검색
- 하나 또는 모든 브랜치의 히소트로 보기
- 파일의 히소트로 보기
- 파일안의 행(line) 히스토리 보기
- 작성자의 히소트로 보기
비교:
- 브랜치 비교
- 커밋 비교
- 커밋간의 파일 비교

Git History - Visual Studio Marketplace

Extension for Visual Studio Code - View git log, file history, compare branches or commits

marketplace.visualstudio.com

gitignore

vscode 통해 간단히 .gitignore 파일을 생성할 수 있다.

gitignore - Visual Studio Marketplace

Extension for Visual Studio Code - Lets you pull .gitignore templates from the https://github.com/github/gitignore repository. Language support for .gitignore files.

marketplace.visualstudio.com

Ignore files

'ignore' 파일에 대한 코드 하이라이트 제공 : gitignore, npmignore, dockerignore, coffeelintignore, ... 등

Ignore files - Visual Studio Marketplace

Extension for Visual Studio Code - Syntax highlighting for 'ignore' files : gitignore, npmignore, dockerignore, coffeelintignore, ...

marketplace.visualstudio.com

Commit Message

VSCode의 내장된 커밋 메세지 입력란은 한칸으로 되어있다.

간단하게 커밋을 할경우는 문제없지만, 팀 협업으로 일할때는 커밋제목과 커밋내용을 길게 적어주어야 할 경우가 생긴다.

위의 익스텐션을 깔면 에디터 창에서 커밋 내용을 작성할 수 있다.

Commit Message Editor - Visual Studio Marketplace

Extension for Visual Studio Code - Edit commit messages in a convenient way.

marketplace.visualstudio.com

gitmoji

깃모지는 깃 커밋에 이모티콘을 사용해 보다 시각적으로 커밋 메세지를 의미적으로 알아볼수있게 하는 기능이다.

VSCode에서 Gitmoji 관련 익스텐션을 깔면, GUI에서 아주 간단히 사용할수 있다.

다음 익스텐션을 설치하면 상단에 🙂 아이콘이 생기는데, 이를 클릭하면 각 이모지에 대한 사용처 의미와 함께 메뉴가 출력된다.

커밋 목적 의미와 맞게 이모지를 사용하면 시각적으로 뛰어난 커밋 로그를 구성할 수 있다.

Gitmoji - Visual Studio Marketplace

Extension for Visual Studio Code - Gitmoji tool for git commit messages in VS Code

marketplace.visualstudio.com

GIT File History

위의 GIT Hisotory와 겹치는 기능이긴 하지만, 파일의 버전 내용 변화를 한눈에 잘 알수 있게 UI/UX로 짜여져 있어 간단하게 파일 히스토리를 확인할때 유용한 익스텐션 이다.

Git File History - Visual Studio Marketplace

Extension for Visual Studio Code - Modern, fast and intuitive tool for browsing the history and files in any git repository

marketplace.visualstudio.com

Checkpoints

진행중인 파일 내용의 단기 변경 내역을 체크포인트로 저장하게 해주는 기능이다.

리스트로 체크포인트를 만들어서 보다 원활히 작업 기록을 관리할 수 있다.

보통 커밋하기 전에 사용되는 북마크 비스무리한 체크포인트 용도라고 보면 된다.

Checkpoints - Visual Studio Marketplace

Extension for Visual Studio Code - Checkpoints used in between commits for keeping a local short-term history of work in progress files, like bookmarks in you undo-stack.

marketplace.visualstudio.com