Visual Studio Code(VS Code) Extension(익스텐션) 추천! (feat, 드림코딩 by 앨리)

오늘 주제는 바로

"비주얼 스튜디오 코드(VS Code)의 익스텐션(Extension)"

아래 영상을 참고해서 작성하였어요!

 

 

먼저 Visual Studio Code(VS Code)가 아직 설치되어있지 않다면, 

간단하게 구글에 vs code download라고 검색하면 나오는 제일 위 링크 클릭하시면 될 것 같아요~

혹시 이 글을 보시고 설치 예정이시라면 여기를 클릭해주세요!

사용하시는 OS에 따라서 윈도우 혹은 맥 버전 설치해주시면 됩니다.

 

 

저는 VS Code를 작년 초에 아주 잠깐 접해보았는데

그때는 잠깐 버전 컨트롤하는 Git인가 GitHub를 처음으로 배워볼 때라

HTML, CSS 같은 코딩은 사용해보지 않아서 좀 처음에는 좀 낯설었지만 이제는 많이 적응되었어요!

참고로 그 전에는 아톰이랑 브라켓 사용했었습니다.

 

 

아무튼 처음 편집기? 설치하시면

익스텐션을 설치해서 조금 더 편리하게 프로그램을 사용하실 수 있답니다 :)

저는 일단 라이브 서버(live server) 기능이나 Prettier(프리티어) 같은 거는

브라켓(Brackets)에서 썼던 걸로 기억해서 그거 검색해보려다가 위 영상을 보게 되었어요!

 

 

총 10가지 정도 익스텐션을 추천해주셨는데 빠르게 하나씩 정리해볼게요!

익스텐션은 아래 사진처럼 왼쪽 메뉴들 중, 노란색 박스로 표시한 곳을 누르면 됩니다!

 

 

일단 두 개의 단축키만 짧게 적을게요, 정말 많이 쓰는 거라 ㅎㅎ

 Ctrl + ,  : Setting(설정 화면)

 Ctrl + Shirt + P  : Command Pallette

 

 

코딩할 때 키보드랑 마우스 왔다 갔다 하면 은근 짜증 날 때가 있거든요ㅠ 

포토샵이나 일러스트레이터처럼 코딩에서도 단축키 필수입니다. ㅋㅋㅋ

 

---

 

☑️ Material Theme 

: 개인 취향에 맞는 색상의 테마 적하는 기능.

: Set Color Theme을 누르면 여러 가지 테마가 있어서 선택 가능.

 

 

☑️ Material Icon Theme

: 설치하면 파일 확장자 별로 아이콘이 생동감 있게 변하여 가독성이 증가.

 

 

☑️ Prettier - Code formatter  Ctrl + K + F 

: 코드 포매팅해주는 도구

: 설치한 후 작업

- Setting(Ctrl + ,) 화면 검색창에 save를 타이핑하고, Editior: Format on Save 체크☑️

- prettier quote 검색 후, JavaScript > preference: Quote Style와 TypeScript > preference: Quote Style를 single로 바꾸기. 

 

 

☑️ Bracket Pair Colorizer

: 괄호에 색감을 주어서 코드의 가독성을 높여주는 기능.

: 괄호마다 색 지정이 달라져서 빠트린 괄호가 있는지 확인 가능

 

 

☑️ Indent-rainbow

: 들여 쓰기 된 부분만큼 배경이 하이라이트 되어 코드를 읽을 때 도움을 주는 부분.

 

 

☑️ Auto rename tag

: HTML 편집할 때 큰 도움이 되는 기능으로 앞 태그를 바꾸면 자동적으로 마무리 태그 역시 자동으로 변경

 

 

☑️ CSS Peek

: 어떤 CSS가 적용되어있는지 빠르게 확인할 수 있는 기능.

: class나 id가 적용된 HTML 문서 내 원래 태그 부분을 Ctrl 버튼을 누른 채로 클릭하면 해당 스타일로 이동.

 

 

☑️ HTML CSS Support

: 클래스 별로 스타일을 적용한 후에, html문서로 돌아와 클래스 값을 변경하고 싶을 때 자동완성으로 추천됨.

 

 

☑️ Live Server  Alt + L,  Alt + O 

: HTML CSS 수정한 부분을 실시간으로 자동 업데이트되어 확인 가능.

: 비슷한 걸로 open in browser가 있지만, 그건 코드가 변해도 바로바로 적용은 안돼서 새로고침을 계속 해줘야 하는 것 같아요!

 

 

☑️ Markdown Preview

: 내장된 익스텐션으로 설치하지 않아도 되는 익스텐션. 

: readme.md파일을 생성한 후에 Ctrl + Shift + V를 누르면 markdown preview를 볼 수 있습니다.

: commom pallette에서 markdown 파일이 어떻게 보이는지는 상단에서 markdown preview 선택하면 작성하면서 어떻게 보이는지 확인 가능

: 이 기능은 아직 어떻게 쓰는지는 모르지만 차차 알아가 보려고요 ㅎㅎ

 

---

 

마지막으로 시각적인 효과가 얼마나 큰지 비교해볼게요.

 

 

코드는 제가 보는 수업에서 복잡해 보이는 것으로 골라서 했어요 ㅋㅋ

조금 더 극적인 변화가 잘 드러날 수 있도록요!

왼쪽이 익스텐션 적용 전, 오른쪽이 적용 후 화면입니다.

딱 보기에도 색이 들어가서 그룹화도 잘 되고 색상이 화려해졌죠! 

거기에 들여 쓰기가 적용되어 가독성이 훨씬 좋아진 게 보이시나요? 

 

 

없어도 코딩하는 데는 문제가 없지만,

있으면 훨씬 유용한 익스텐션들 저말 편리하네요 ㅎㅎ

사실 예전에 다 설치되어있었는데, 

제가 뭘 잘못 손 댄건지..

어제부터 VS Code가 자꾸 오류나서 싹 다 지우고 재설치해서

익스텐션들도 다시 깔았네요 ㅎㅎ

그러는 김에 포스팅도 완성!

 

 

앗 추가로 편집기 외에 브라우저를 이용해서

간단한 코드가 동작하는지 확인하고 싶을 때에는 아래 사이트들을 이용하면 좋습니다.

🖱️ jsbin.com/?html,css,output

🖱️ jsfiddle.net/

🖱️ codesandbox.io/ide

🖱️ codepen.io/

 

 

다음번에는 VS Code 단축키와 Emmet에 대해서 정리해볼게요!