visual studio code를 사용하시는 분들이 많을 겁니다. 저 또한 가끔 사용하는데요. 다른 분들처럼 고급적인 프로그래밍 뭐 그런건 아니고 html 이나 css 편집할 때 사용합니다.
매번 사용하는 게 아니고 가끔 사용하다 보니 visual studio code 단축키를 자주 잊게 되더라구요. 매번 찾아보는 것도 귀찮고 해서 이번 기회에 정리할 겸 한 번 포스팅해봅니다.
visual studio code를 다운로드 받을 수 있습니다.
https://code.visualstudio.com/
그냥 바로 받으시면 64비트 버전으로 다운로드가 되니까 32비트를 사용하시는 부들은 아래 표시가 되어있는 화살표를 눌러서 자신이 다운로드 받고자 하는 버전을 다운 받으시면 됩니다.
저는 다운받자 마자 가장 먼저 한 것이 바로 확장프로그램으로 한글 패치를 하는 겁니다. 영어가 더 편하다고 하시는 분들도 있지만 저는 아직 한글이 편하더군요. 설치를 완료하면 한 번 종료했다가 다시 실행해야 정상적으로 적용됩니다.
https://demun.github.io/vscode-tutorial/shortcuts/
visual studio code 단축키는 위 주소에서 확인하실 수 있습니다. 너무 많기 때문에 하나하나 다 적기에는 무리가 있고, 공식 홈페이지에서 튜토리얼 페이지에서 모든 단축키를 확인할 수 있으니 위 사이트에서 확인하시는 걸 추천합니다.
프로그램 내에서도 단축키를 확인할 수 있습니다.
기본 단축키는 ctrl+k, ctrl+s 를 통해 열람할 수 있습니다.
작성하는 코딩의 언어를 설정하는 방법은 컨트롤 + k + m 입니다.
몇가지 확장 프로그램을 추천드리자면.. 저는 html 편집을 주로 사용하기 때문에 live html Previewer를 자주 사용합니다. 자신이 작성한 코드를 우측에 실시간으로 웹페이지로 띄어서 확인할 수 있기 때문에 매우 편리하게 사용할 수 있습니다.
visual studio code의 가장 큰 특징이라고 하기엔 뭐하지만 emmet 기능이 매우 편리한데요, 위 움짤을 보시면 아시겠지만 <ul> <li> 등의 태그를 다중으로 사용할 때 여러번 직접 입력할 필요없이 ul>il*3 이런식으로 입력하면 알아서 소스가 완성 되기 때문에 편하게 사용할 수 있습니다.
ajax, jss 등 각 언어별로 emmet이나 snippet 기능이 있으니 자신이 원하는 확장프로그램을 다운로드 하셔서 사용하시면 편하게 이용할 수 있을 겁니다.
이렇게 한 번 정리를 해 놓으면 잊지 않고 두고두고 저도 써먹을 수 있겠지요. 매번 구글에서 찾아보고 다시 잊어버리고 다시 찾아보고 하는 반복된 검색이 지쳐서 한 번 정리해 봤습니다.