Vscode의 유용한 Extensions

hahwul

Jan 05, 2022

여러분들은 어떤 코드 에디터를 사용하시나요?

저는 학부생 시절부터 vim 유져었었고 이후 vim + geany, atom + vim 을 거쳐 이제 vscode와 vim을 동시에 사용하는 형태로 전환헀습니다. (말이 vim이지 사실 neovim을 써요 😅)

어쨌던 vscode로 넘어오게 되면서 vscode의 extension을 찾아보게 됬었는데요, 여러개 설치해보면서 제가 괜찮다고 느꼈던 것들을 공유해볼까 합니다.

Atom -> Vscode

저는 사실 Atom에 만족하고 잘 사용하던 유저였습니다. MS가 어쩄던 Atom 보단 Vscode를 더 중요시 할거고 장기적으로 Atom의 미래는 약간 어둡다는 걸 알고 있었지만, 그래도 깔끔한 UI와 코드/글을 작성하는데 있어 불편함이 없어 잘 쓰고 있었죠.

그러나 딱 하나의 문제가 있었습니다. 바로 이 블로그 Project 디렉토리에서 발생하던 문제였죠. 지금 블로그 게시글만 해도 1,000개 가량되는데, 다른 코드 등과 합치면 파일 양이 좀 많아집니다. Atom은 이를 로드하는데 굉장히 오랜 시간이 걸렸었죠. (1분 이상…)

어쨌던 이러한 답답함은 제가 다른 에디터에 관심을 가지도록 변화를 주었고, 결국 작년 말에 고심끝에 블로그를 포함해 모든 프로젝트의 에디터를 Vscode로 전환했습니다. 결과가 어떘을까요? 네 아주 좋았죠! 디렉토리를 여는데 딜레이가 없어졌습니다 :D

서론은 됬고, 자 그럼 Extension 정리를 한번 시작해보죠!

Extensions - Developers

Language support

당연히 에디터기 때문에 기본적으로 언어 처리가 지원되지는 않습니다. 사용하시는 언어에 맞게 받아서 지원하는 기능들을 이용하시는 것을 추천드려요.

• https://marketplace.visualstudio.com/items?itemName=golang.Go

Test exploere

저는 테스트 코드가 주는 이점이 크다고 생각하는 사람입니다. 물론 TDD를 하기에는 아직 모자란 부분이 많아서 잘 실천하지는 못하지만, 어쩄던 테스트 코드를 잘 작성하고 관리하는 것도 개발 시 도움이 될 수 있다고 느꼈었는데요. 아래 2개의 Extension은 vscode에서 이를 좀 더 쉽게 만들 수 있도록 제공해줍니다.

• https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-test-explorer
• https://marketplace.visualstudio.com/items?itemName=ethan-reesor.vscode-go-test-adapter

특히 test explorer는 많은 색상으로 예쁘게 보여주기 떄문에 저는 이것을 추천드려요!

Power mode

이건 Atom에도 있는 extension이긴한데, 제가 vscode로 넘어오면서 알게된 extension입니다. 에디터를 코드를 작성할 떄 심심하지 않도록 커서 위치에 이펙트를 보여주는 extension입니다.

• https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode

이를 사용하기 위해선 설치 후 Settings.json에 값을 추가해야합니다. 먼저 Code -> Preferences -> Settings 로 진입한 후 우측 상단의 Open Settings(JSON)를 눌러 settings.json으로 진입합니다. 이후 JSON 값에 "powermode.enabled": true를 추가하여 활성화합니다.

{
    "workbench.colorTheme": "Default Dark+",
    "git.confirmSync": false,
    "git.autofetch": true,
    "powermode.enabled": true,
    "powermode.enableShake": false,
    "go.toolsManagement.autoUpdate": true
}

powermode.enableShake를 false로 주게되면 화면이 흔들리는 효과가 꺼집니다. 요정도로 사용하면 타이핑하는데 부담도 없고 심심하지도 않아 딱 좋은 것 같습니다. powermode.presets 값으로 효과를 전환할 수 있습니다.

{
    "powermode.presets":"particles",	 
    "powermode.presets":"magic",	
    "powermode.presets":"clippy",
    "powermode.presets":"flames",	
    "powermode.presets":"fireworks", 
    "powermode.presets":"simple-rift",
    "powermode.presets":"exploding-rift",
}

Bracket Pair Colorizer

괄호의 색상을 지정할 수 있습니다 :D

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

Indent-rainbow

탭에 색상을 적용합니다. 에쁘지만 개인적으로는 사용하다가 약간 눈에 거슬려서 지웠네요 😭

• https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Git graph

Git graph는 Git의 action들을 graph 형태로 표현해주는 extension입니다.

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

개인 Github의 프로젝트는 대부분 저 혼자 하기 때문에 복잡하지 않지만 여러명이 함께 하는 프로젝트에선 변경을 추척할 떄 눈에 잘 보여서 좋은 것 같습니다 :D

Peacock

vscode의 테두리 색상을 지정할 수 있습니다.

• https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

Extensions - Hugo

제가 현재 Hugo 기반의 블로그를 운영하기 떄문에 Hugo 관련 Extension도 정리합니다.

• Hugo Language and Snippets
• Hugo Snippets

코드 뷰에서 Hugo의 Template 문법 표기, Snippet을 단축키로 불러올 수 있도록 제공하는 기능을 가집니다.

Extensions - Security Testing

vim의 좋은점은 에디터이기도 하면서 vim-plug를 통해 여러가지 도구를 설치하고 vim 내부에서 처리할 수 있다는 점입니다. 이는 보안쪽 테스팅에서도 충분히 사용할 수 있고, 해외 일부 유저(tomnomno….m 등)는 이를 기반으로 테스트를 하기도 합니다. 저도 상황에 따라 vim에서 테스트 하는 경우도 있습니다.

어쩄던 vscode에서도 웹 기반 테스팅을 할 수 있기 때문에 몇가지 공유드리면서 글 마무리할까 합니다 😄

• Live Server
• REST Client

#develop