Visual Studio Code : 확장 플러그인 추천 10가지 ! [ VSCode ]

 

 

안녕하세요 ^_^

제가 쓰고 있는 플러그인을

정리할 겸 추천해보려고 합니다 !

 

 

 

1.  Auto Rename Tag

 

(사이트 설명문)

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

-> Visual Studio IDE와 동일하게 쌍을 이루는 HTML/XML 태그의 이름을 자동으로 바꿉니다.

 

@ 간단한 태그 이름 수정도 귀찮아 하는 나에게

한번에 바꿀 수 있는 필수 플러그인

 

예) <div></div>가 쌍을 이루고 있는데

여기서 <div> -> <ul>로 이름을 수정할 경우

아래 닫히는 부분인 </div> -> </ul>로 자동 수정됩니다

 

Auto Rename Tag

 

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

Auto Rename Tag - Visual Studio Marketplace

 

---

 

2.  Bracket Pair Colorizer 2

 

(사이트 설명문)

This extension allows matching brackets to be identified with colours. 

The user can define which tokens to match, and which colours to use.

-> 이 확장을 통해 일치하는 브래킷을 색상으로 식별할 수 있습니다. 

사용자는 일치시킬 토큰과 사용할 색상을 정의할 수 있습니다.

 

@ 자바스크립트를 하다보면

"가끔씩 왜 안먹지?? 제대로 했는데??" 하고 다시보면

태그가 제대로 안닫혀서 안되는 경우가 몇 번 있었는데요..(현타)

 

 

플러그인 설치를 통해 색상별로 볼 수 있으니 한결 편하게 확인할 수 있습니다

 

 

 

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Bracket Pair Colorizer 2 - Visual Studio Marketplace

 

 

---

 

3. Colonize

 

(사이트 설명문)

Adds three shotcuts to insert semicolons with ease;

-> 세미콜론을 쉽게 삽입할 수 있도록 3개의 숏컷을 추가합니다.

 

@ 초반에는 단축키가 익숙하지않아서 단축키가 뭐더라..? 에 시간을

더 소비한거 같지만..익숙해지니까 한결 속도가 빨라지더라고요

 

- shift + enter 줄 끝에 세미콜론을 삽입하고 같은 줄에서 계속
- alt + enter 줄 끝에 세미콜론을 삽입하고 새 줄에서 계속
- ctrl + alt + enter 세미콜론을 삽입하고 같은 위치에 유지

 

Colonize

https://marketplace.visualstudio.com/items?itemName=vmsynkov.colonize

Colonize - Visual Studio Marketplace

 

---

 

4.  Colorful Comments

 

(사이트 설명문)

The Colorful Comments Extension will help you create more human-friendly comments in your code.
With this Extension, you will be able to categorise your cody by special colour into:

-> 다채로운 주석 확장은 코드에서 보다 인간 친화적인 주석을 작성하는 데 도움이 됩니다.
이 확장 기능을 사용하면 특별한 색상으로 다음과 같이 분류할 수 있습니다.

 

- 빨간색 (!)
- 파랑색 (?)
- 녹색 (*)
- 노란색(^)
- 분홍색 (&)
- 보라색(~)
- 주황색(TODO)
-  회색 (//)

원하는 색상 스타일은 설정에서 지정할 수 있습니다.

 

 

https://marketplace.visualstudio.com/items?itemName=ParthR2031.colorful-comments

Colorful Comments - Visual Studio Marketplace

 

 

---

 

5. Colorize

 

(사이트 설명문)

This extension your styles files looking for colors and generate

a colored background (using the color) for each of them.

-> 이 확장은 스타일 파일에서 색상을 찾고 각각에 대해 

색상이 지정된 배경(색상 사용)을 생성합니다.

 

@ 색상을 지정하면 배경이 그 색상으로 적용되어 나타납니다

무슨 색을 적용했는지 시각적으로 보기 좋음 !

 

 

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

colorize - Visual Studio Marketplace

 

 

---

 

6. Developer Affirmations

 

(사이트 설명문)

A simple extension for vscode that reminds you of how amazing you are

-> 당신이 얼마나 놀라운지 상기시켜주는 vscode의 간단한 확장

 

@  제 멘탈을 지켜주는 플러그인이기도 하죠..

알림떠서 보면 조금이나마 위로받는 기분이랄까요 ㅋㅋㅋ

 

*팝업이 안보일시 알람종 버튼 누르면 확인하실 수 있습니다

 

 

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

Developer Affirmations - Visual Studio Marketplace

 

---

 

7. Git Graph

 

(사이트 설명문)

View a Git Graph of your repository, and easily perform Git actions from the graph.

Configurable to look the way you want!

-> 저장소의 Git 그래프를 보고 그래프에서 Git 작업을 쉽게 수행할 수 있습니다. 

 

git 그래프를 보여주는데 여기서

 

-git 작업 수행(커밋,분기,태크)을 마우스 우클클릭하여 사용 가능합니다

- 커밋을 클릭하여 커밋 세부정보 및 파일 변경 사항을 확인 할 수 있습니다

- 커밋을 클릭하여 ctrl/cmd를 클릭하고 또 다른 커밋을 클릭하면 두 커밋을 비교할 수 있습니다

 

이외에 자세한 사항을 링크를 통해 사이트에 들어가시면 확인 할 수 있습니다 !

 

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

Git Graph - Visual Studio Marketplace

 

 

---

 

8. Image preview

 

(사이트 설명문)

Shows image preview in the gutter and on hover

-> 이미지 코드에 호버 시 이미지 미리보기를 표시합니다.

 

 

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

Image preview - Visual Studio Marketplace

 

 

---

 

9. Live Server

 

@ go live를 통해 새로고침을 하지않아도

바로 적용되는 모습을 확인하실 수 있습니다

 

*오른쪽 하단 Go Live 버튼을 누르면 실행됩니다

또는

* HTML 파일을 열고 편집기에서 우클한 다음 라이브 서버 열기를 클릭하면 실행됩니다

 

오른쪽 하단

 

 

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server - Visual Studio Marketplace

 

 

---

 

10. Korean Language (한국어 팩)

 

(사이트 설명문)

한국어 팩은 현지화된 VS Code용 UI 환경을 제공합니다

 

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

Korean(사용법) Language Pack for Visual Studio Code - Visual Studio Marketplace

 

 

---

 

+ 번외 테마 추천 - Atlantic Night

 

@ 어두운 테마 + 가독성 좋은 이쁜테마를 찾고 있었는데요

파란색을 좋아하는 저에게 딱인 테마입니다 ㅎㅎ

적용하고선 질리지도 않고 애용 중 !

 

https://marketplace.visualstudio.com/items?itemName=mrpbennett.atlantic-night

Atlantic Night - Visual Studio Marketplace

 

 

 

도움이되셨다면 하트 Click !

(∩^o^)⊃━❤