VSCODE 익스텐션 어디까지 알고 있나요?? 나만 알고싶은 확장기능 총정리!!

안녕하세요 오늘은 VS Code (이하 VSC) 확장 플러그인 중 제가 사용하는 것들을 나열해 보고자 해요. 

저는 파이썬을 다룰 떄는 커뮤니티 버전이라 해도 파이참을 선호하는 편이예요. 그런데 파이썬을 뺸 나머지는 대부분 VSC를 사용합니다. 써보신 분들은 알겠지만, 기본적으로 지원해주지 않는 프로그래밍언어도 사용하려고 하면 그에 맞는 익스텐션을 추천해주고, 그래서 웬만한 서비스는 유료인 젯브레인의 파이참, 인텔리제이보다 확실히 가성비가 좋지요.

서브라임텍스트나 다른 에디터에 적응되신 분들도 많겠지만 저는 첫 코드를 이것으로 작성해서인지 너무 잘 맞는 것 같아요. 일단 코드를 쓸 때 가장 중요한 린트 기능이 잘 지원되거든요!! 이거는 진짜 뺴놓을 수 없는 장점..! 그리고 협업을 위한 툴도 젯브레인 프로그램에 비하면 무료인데다 꽤 쓸만합니다.

우선 우리가 알고 가야 할 사실은 이 에디터를 Microsoft에서 만들었다는 사실이예요. 이게 왜 중요하냐면!! 자바스크립트의 슈퍼셋인 타입스크립트도 마이크로소프트의 작품이고, github 조차도 마이크로소프트가 인수 후에 많은 기능을 추가하고 있는데 당연히 이런 것들에 대한 연결이 잘 지원되겠죠?? 나름의 주제를 분리해서 추천을 좀 드려보겠습니다. 저는 설치한 익스텐션이 70개..인데다 사용 중인 것만 해도 67개거든요...ㅎㅎ

우선 깔아두면 재미있는 기능이 많은 익스텐션!

Warm-Up - Typing test

특이하게도 VSC 안에서 타자연습을 해 볼 수 있는 손풀기 확장입니다!! 일반 영어 타자연습과 특정 프로그래밍 언어 빨리 입력하기 두가지 기능을 지원해요:D 저는 타자가 너무 느린 개발자라 이거라도 없으면...

수정한 코드를 바로바로 확인해볼 수 있다면?

Debuger for Chrome

(+FireFox용 등도 있습니다.) 크롬에서 현재 작성한 코드들을 디버깅 해 볼 수 있는 익스텐션입니다.

Live server

현재 작성 중인 html 파일을 그대로 가상의 서버에 띄워줍니다. 코드 작성 중에 저장 버튼을 누를 때마다 바로 페이지에 반영되기 때문에 CSS를 손대거나 html 구조를 바꿀 때 너무 좋습니다.

Live server Preview

라이브 서버와 똑같이 작동하지만! 대신 VSC의 탭 안에서 작동합니다. 새로 인터넷 창을 띄울 필요가 없다는 것이죠ㅎㅎ 특성 상 저장을 하지 않아도 그때그때 반영되는 점이 좋습니다.

HTML 이거 없인 좀 귀찮지

Auto Rename Tag

단순한 기능을 제공합니다. 여는 태그의 텍스트를 수정하면 짝이 맞는 닫는 태그도 함께 변경되어요ㅎㅎ

Color Highlight

#ececec나 Firebrick 같은 텍스트를 바로 컬러코드로 인식하고 그 색깔 형광펜 표시를 해줍니다. 되게 편하고 이쁩니다.

CSS Peak

HTML 태그를 수정할 때 특정 클래스에 커서를 올리면 해당 클래스의 CSS 내용을 볼 수 있습니다. 클릭하면 그 페이지로 넘어갈 수도 있구요. 사용법도 편하고 좋습니다.

IntelliSense for CSS class names in HTML

HTML 코드를 작성할 때 임포트 되어있는 CSS 파일의 클래스명이 연관검색어처럼 계속해서 힌트를 줍니다. Bulma를 사용하거나, 부트스트랩 등을 사용하면 더 유용하겠죠?

HTML snippets

코드 자동완성 에밋 을 제공하면서, html 코드에 컬러를 입혀줍니다. 혹시 최근에 사용을 권장하고 있지 않은 deprecated 코드를 알려줍니다. (event.target.... 왜 없어지는거야)

함께 코드를 쓰기 위한 협업용 툴

Conventional Commits

설치하면 소스트리 탭에서 커밋하는 부분에 동그란 버튼이 생깁니다 누르면 옵션들이 여러가지 나타나고 지금 커밋하려는 내용에 맞게 버그를 고친 것인지 코드 리팩토링만 한 것인지.. 새로운 기능을 추가했는지 등을 명시할 수 있고 이렇게 완성된 완전한 컨벤션에 맞는 커밋메세지로 커밋을 할 수 있습니다. 개인 프로젝트에선 귀찮을 수 있지만 버릇을 들여놓기 편해서 추천합니다.

Live Share 

라이브서버 기능만큼 유용합니다. 협업하고자 하는 동료들을 초대해 함께 나의 로컬 워크스페이스를 공유하면서 함께 코드를 쓸 수 있습니다. 협업 프로젝트의 분업이 아직 미흡하거나, 혹은 누군가를 가르쳐줘야 하는 상황에 말로 설명하는 것보다 직접 원격으로 건드려주고 싶을때 이런 도구를 사용합니다. Live server voice 라는 다른 익스텐션도 있어 함께 사용하면 음성채팅도 가능하다.

Git History

현재까지의 깃 진행상황과 각 브랜치의 계통표(?)를 볼 수 있고, 특정한 커밋 시점으로 rollback하는 기능도 아주 간단하다. 뷰가 한눈에 쏙 들어오는 깔끔한 구조라 초보자도 어려움 없이 사용가능

Git Lens

커밋, 리포지토리, 파일 히스토리, 브랜치, 라인히스토리, 리모트, 스태시, 태그, 참여자 등 프로젝트에 대한 정보를 한 눈에 들여다보고 관리할 수 있다. Git History는 보기 위해, 이 익스텐션은 조정하기 위해 사용하는 편.

자바스크립트를 위한 익스텐션

ESLInt

이것은 정말 추가해놓길 바라는 익스텐션이다. 설치도 제일 먼저 했다. 간단한 오류를 잡는 것은 물론이고, 선언해놓고 사용하지 않고 있는 변수가 있다거나, 암튼 많은 실수를 잡아준다.

JavaScript (ES6) snippets

자바스크립트의 최신 문법 자동완성을 도와준다.

JavaScript REPL

console.log를 입력하고 실행을 해봐야 알 수 있을 내용을 미리 라인의 오른쪽에 초록색 글씨로 보여준다. 어떤 함수가 몇번 실행되었는지 이 콘솔로그에는 어떤 값이 결과적으로 찍히게 될지 예상해준다.

Turbo console.log

특정한 변수 위에 커서를 두고 Ctrl+Shift+I 를 입력하면 바로 다음줄에 그 변수를 console.log()에 찍어볼 수 있는 기능이 있다. REPL 관련된 확장과 함께 사용하면 시너지가 크다.

Quokka.js

꼭 써봤으면 하는 익스텐션이다. REPL 기능을 제공하는데 타이핑하는 순간마다 갱신되어서 천사가 따로없다.

기타는 둥둥

Tabnine

인공지능으로 당신이 작성하는 코드들을 학습해 특별한 린트를 제공한다. 사용 초반에는 데이터가 적어 좀 이상한 린트를 줄 때가 있었는데 쓰다보니 괜찮다. 모든 기능을 쓰려면 유료인듯하지만 린트만 쓰는 것도 나쁘지 않다.

Power Mode

마우스를 클릭할때 불꽃이 튀고 폭발하고 별 난리가 나는 희한한 익스텐션이다. 깔아두고도 잘 쓰진 않지만 이런 것도 있다는 것....

새로운 웹프레임워크나 프로그래밍언어를 사용할 때, 해당 기능을 지원하는 익스텐션을 찾아보는 것이 좋다. 그리고 다운로드받은 사용자가 많은 것을 받는 것이 좋다. 나는 Tailwind를 쓸때는 그 익스텐션을, styled-components 를 사용할떄는 그 익스텐션을 쓰는 식이다.

• 마크다운 - Markdown Preview Enhanced, Markdown ALl in One
• 오타 캐치용 - Code Spell Chcker
• React-Vative - ES7 React/Redux/GraphQL/React-Native snippets, Recat Extension Pack
• Excel - Excel Viewer
• SQL - SQLite
• FIrebase - Frebase
• Jupyter - Jupyter, Jupyter Keymap
• node - npm, npm Intelisense

70개나 된다면서 왜 별거없어!!!!!