Visual Studio Code 익스텐션 모음!!

오늘은 꼭 필요한 Vs Code 확장프로그램을 정리하려고 한다.

내가 다음번에 사용하기위해서 꼭 필요한것들만 정리 하고자 글을 작성한다.

 

익스텐션(확장도구)를 설치하기 위해서는 마켓플레이스에 들어가면되는데

쉽게말해 마켓플레이스는

휴대폰의 앱스토어와 같다 생각하면 된다.

 

마켓플레이스 진입

설치되어 있는 확장프로그램들이 나온다

검색창에 원하는 것을 검색하면 된다.

 

⚡Korea Language Pack for Visual Studio Code

 

Vs Code의 한국어 패치라 보면된다.

 

⚡Prettier - Code Formatter

 

VS Code 코드 자동화 정렬 확장 프로그램

코드를 작성하고 저장을 누르면 코드를 예쁘게 정렬해주는 기능을 한다.

 

 

⚡ Material Icon

 

VsCode의 탐색기의 파일형식,폴더등등 Icon을 지정해주는 익스텐션이다 필수!!

 

Material Icon 적용

⚡ Material Them

VSCode의 전체 테마를 쉽게 변경할수 있도록 해주는 익스텐션이다.

근데 그냥 VSCode 자체 다크버전을 써도 괜찮은듯

 

⚡Image Preview

코드내 이미지파일 경로 위에 마우스를 대면 이미지를 미리보여준다.

Imagesearch, openCV 등등 이미지를 다루는 작업을 할때 매우 유용하다.

 

⚡Path Intellisense

경로를 설정하는 코드를 입력하면 이렇게 GUI로 내부 폴더에 파일들을 다보여준다!

" ../ " : 바탕화면부터 폴더보여준다

" ./ "  : 현재폴더 보여준다

 

⚡Fira Code Font

 

 

VSCode에서 개발자들이 많이 쓰는 폰트는 D2Coding, FiraCode 두가지이다.

둘다 연산자등을 좀더 예쁘게 만들어준다.

 

검색끝에 나는 Fira Code를 사용하기로 하였다.

 

먼저 Fira Code Font의 Github에 접속해서 다운로드받는다.

https://github.com/tonsky/FiraCode

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

https://github.com/naver/d2codingfont/releases

Releases · naver/d2codingfont

zip파일을 다운로드 받아 압축을 해제하고 ttf폴더에 파일들을 모두 설치해준다.

settings.json

파일을 열어 아래구문을 추가해준다.

 

  "editor.fontFamily": "Fira Code", //폰트 Fira Code
  "editor.fontLigatures": true //특수문자 문자끼리 합을 가능하게 함
  
  "editor.fontFamily": "D2coding", //폰트 D2coding
  "editor.fontLigatures": true //특수문자 문자끼리 합을 가능하게 함

 

 

 

⚡C# Extensions

 

 

 

 

C#을 사용할때 굉장히 유용하다.

 

C# Extensions - Visual Studio Marketplace

 

⚡Auto closing Tag , Auto Rename Tag

 

둘다 태그 관련 인데 그냥 무조건 설치하자

 

Auto Close Tag : <p></p> 이런식으로 자동으로 태그를 마무리해준다

Auto Rename Tag : 태그이름 p가 div로 변경되면 알아서 뒤에 </p>도 </div>로 변경해준다

⚡8 - 1. Project Manager

말그대로 프로젝트들을 쉽게 관리할수 있도록 도와주는 익스텐션이다.

프로젝트 폴더가 생긴다!

⚡8 - 1. Explorer Exclude

탐색기에서 볼필요 없는 파일을 숨김관리 할수있다(Vscode 탐색기에서만 숨김되는거)

⚡8. IntelliCode

코드를 자동완성 시켜준다. Visual Studio처럼 자동으로 추천해준다.

무조건 설치하자.

 

 

⚡9. Code Runner

C,C++,Java,Python 등 여러 코드를 바로 출력할수 있게 해준다.

코드에 대고 마우스 우클릭 -> Run Code

 

 

 

⚡10. Error Lens

에러(오타,미괄호 등등)를 하이라이팅 해주고 오류 설명도 해준다.

생산성을 위해서 필수 익스텐션이다.

 

 

 

⚡10. Book Marks

Visual Studio 에서와 같이 북마크를 관리할수 있게 도와준다.

 

좌측메뉴에 추가된다

북마크 추가하고자 하는 코드에 우측마우스클릭해서 위와같이 눌러주면 북마크가 추가된다

나는 Visual studio와 동일한 Cntrl + K + K 로 해주었다

Jump to Next는 Cntrl+ Right + Right

Jump to Previous는 Cntrl+ Left + Left

 

⚡11. Indentation Level Movement

Windows : Cntrl + Up / Cntrl + Down

Mac : Alt + Up / Alut + Down

 

을 사용하여 한번에 코드를 스크롤 할수 있다.

 

Cntrl + Up / Cntrl + Down 으로 코드블록의 끝으로 바로 이동할수 있고

Shift + Cntrl + Up / Shift + Cntrl + Down 으로 코드 (함수, if절 등등)을 한번에 드래그할수있다.

 

 

⚡12. Bracket Select

모든 브라켓 () {} " "

안의 내용을 Alt+a 로 한번에 선택이가능하다

 

 

 

⚡13. Surround

제어문을 편하게 완성시켜준다.

Visual studio에서 try + tap + tap 하면 try catch구문이 완성되는거랑 비슷한거 같지만

이건 자동완성이 아니라 내가 감싸주는거다

원하는 코드를 선택한후

cntrl + shift + t 누르고 감싸고자 하는 구문을 선택하면된다

 

Demo 1: Choosing a wrapper snippet from quick pick menu

 

Demo 2: Wrapping multi selections

 

 

---

 

 

🚩 코드 가독성이 좋아지는 익스텐션

 

코드주석 색상 변경 및 이탤릭체 해제

VS Code에서 주석 색상을 변경하는 방법은 확장팩이 아니라 설정에서 기본으로 있다.

기본 주석 색상도 별로고, 주석은 이탤릭체라 한글이 기울어서 보기 싫다.

	
"editor.tokenColorCustomizations":{
"textMateRules":[{
    	"scope":["comment","keyword.control"],
        "settings":{"fontStyle":" "} //주석과 키워드에 적용된 이탤릭 폰트스타일 해제
    }],
    "comments":"#16bda7" //주석 색상변경
}

⚡14. Colorize

코드에 색상값을 글자에 입혀준다

 

⚡15. Colorful Comments

주석마다 특수문자를 이용해서 각각 다른 색으로 표시해준다.

⚡15. TODO Highlight

1. 주석에 TODO와 FIXME를 형광펜칠해주는것 토글로 껏다 켯다가능

2. TODO 와 FIXME 리스트를 불러올수있다

 

//todo

//fix

이렇게도 가능

• Toggle highlight : turn on/off the highlight 

  

• List highlighted annotations : list annotations and reveal from corresponding file 

  

⚡16. Polacode

코드를 스크린샷 찍을수 있게 해준다

 

⚡17. Colonize

; 을 자동으로 완성시켜주는 확장프로그램이다.

end누르고 ; 이렇게 더이상 누르지 말자

 

⚡18. Copy Relative Path Posix

 

 

\ 를 / 로 변경해서 상대경로 복사

 

VSCode에서 상대경로 복사를 하면 image\tip\abc.bmp 이렇게뜬다

 

이걸 image/tip/abc.bmp 이렇게도 복사할수 있게 해주는 익스텐션

 

⚡19. Todo Tree

 

정말 유용하다

 

//TODO , //FIXME 태그를 달아두면 리스트를 관리해준다

 

사용가능 키워드

사용법: //TODO , //HACK

⚡20. Code spell Checker

틀린 단어를 이렇게 표시해준다.

⚡21. Hanspell

 

한글 맞춤법 검사기 이다.

 

굉장히 잘만든 것 같다

 

 

 

 

 

⚡22. Blockman

 

⚡23. Paste Image

스크린샷 찍고 Cntrl+Alt+V 하면 경로에다가 저장하면서, 상대경로까지 불러와준다

 

미친 익스텐션이다 진짜

 

옵션에서 pasteImage.path 검색해서 아래와같이 설정해주자

 

 

⚡24. TabOut

 

이클립스나 안드로이드 스튜디오 등 IDE에서는 탭을 누르면 따옴표나 괄호 밖으로 나갈 수 있다. 

그러나 vs code는 그런 기능이 없다.

그래서 방향키로 이동을 하거나 키보드의 End 키를 눌러야 한다.

 

키보드가 풀배열이면 그나마 괜찮지만 텐키리스나 노트북일 경우 fn키를 눌러야 Home이나 End를 사용할 수 있어서 여간 불편한게 아니다.

TabOut을 사용하면 IDE처럼 탭을 눌러 밖으로 나갈 수 있다.

 

snippet을 사용한다면 자동완성을 한 후에 탭을 누르면 작업 속도가 매우 빨라지는 것을 느낄 수 있다.

 

 

⚡25. Peacock

 

⚡26. Auto-Using for C#

자동으로 using문 작성해주는거 편리하다

 

Auto-imports and provides intellisense for references that were not yet imported in a C# file.

Works for extension methods. No more being confused that linq methods don't exist.

 

 

⚡ vscode-icons

 

 

이게 제일 좋다

 

 

⚡ AutoHotkey NekoHelp

오핫쓸때 너무좋다 Hover부터 해서 Outline 설명까지 굿