나도 쓰는 VS Code 사용기 및 확장 플러그인 추천

오늘은 VS Code - Visual Studio Code 확장 플러그인 (설치 후 필요프록그램을 추가하는 것) 추천 포스팅을 하려고 합니다. 

혹시 html이나 파이썬 같은 것을 코딩하시는 분들은 어떤 에디터를 주로 사용하시는지요. 저는 오랫동안 드림위버를 사용했었어요. 회사에서 어도비(adobe) 프로그램을 사용하고 있었고 예전엔 마스터 콜렉션에 포함되어 있던 드림위버를 사용하는 것이 자연스러웠죠. 회사에 코드를 깔끔하게 작업하는 - 오류가 별로 없는 - 프로그래머 분이 있었는데 이분이 확인을 드림위버로 하더라구요. 그래서 드림위버가 저에겐 그냥 최고의 코딩 도구였던 거 같아요. 브라우저를 띄우지 않고도 웬만큼 확인도 가능하구요. 그런데 요즘은 드림위버를 쓰는 분들이 얼마나 될까요. 대부분 코딩은 텍스트에디터를 많이 쓰시고 전부터 유명한 에디터플러스나 비주얼스튜디오코드, 아톰, 서브라임텍스트, 브라켓(드림위버도 있는데 어도비에서 이런 것도 만들었더라구요) 이런 프로그램도 많이 쓰더라구요. 심지어 브라켓은 벌써 한물 갔다, 어도비에서 포기했다는 얘기도 있을 정도로 많이 변하고 새로 나오고 발전하고 그런 것 같아요. 저도 이것저것 써보다가 VS Code를 자주 사용하게 되었습니다. 

 

Visual Studio Code

이미 아는 분은 다 아시는 이 에디터는 MicroSoft에서 만들었습니다. 그리고 확장기능이 풍부하기 때문에 많은 분들이 사용하고 있는 것 같아요. 또한 라이브 서버 기능으로 바로 코딩한 것을 브라우저에서 실시간으로 적용하면서 테스트가 가능하구요. VS Code의 최신 버전은 1.47입니다.

 

윈도우에선 어떤지 모르겠는데요. 맥에선 VS Code 를 내려받으면 설치과정 없이 바로 사용할 수 있습니다. 그래서 저는 응용프로그램으로 옮겨서 사용중인데요. 별도의 프로그램을  설치하지 않아도 충분히 사용하는데 지장이 없지만 사용성을 높여주는 몇가지 확장 플러그인을 설치해주면 좋습니다. 제가 설치해본 것으로 몇가지만 예를 들어 볼게요. 이건 다른 분들도 추천하는 플러그인들이라서 크게 이견은 없는 것 같습니다. 

 

비주얼스튜디오코드를 설치하면 왼쪽에 아이콘들이 있습니다. 이중에서 아래쪽에 사각형 블럭을 조립하는 것 같은 것을 누르면 플러그인을 검색하거나 선택할 수 있어요.

 

 

Material Theme

코딩을 할 때 코드들이 색상으로 같은 것끼리 구분이 된다거나 눈에 잘 띄게 적당히 대조되는 색으로 표현된다면 작업에 도움이 됩니다. 

Materal Theme는 이런 역할을 해주는 컬러 테마 같은 것인데요. 다양한 종류의 컬러 테마들이 있는데 그중에서 Material Theme를 많이 추천하더라구요. 아, 플러그인을 선택하고 Install 버튼을 누르면 바로 설치가 됩니다. 

 

저는 그런데 Material  Theme 보다는 Sublime Material Theme가 더 낫더라구요. 컬러 대조도 더 직관적이라서 이쪽에 정착을 하고 있습니다. 물론 또 마음이 바뀌면 다른 테마를 설치해서 사용할 수도 있을거예요.

 Sublime Marerial Theme / 스토리블럭

Material Icon Theme

이것도 많이 사용하는 테마입니다. 제가 작업할 때는 꼭 필요한 것은 아니라서 저는 설치했다가 지금은 삭제했습니다.

Prettier

이것도 많이 추천하는 플러그인인데요. 예를 들어 아래와 같은 자바스크립트를 작성하고 나서 Prettier가 설치되어 있으면 저장할 때 코드 정렬이 깔끔하게 구조화되어 저장됩니다. 써보면 아시겠지만 예를 들어 js 파일 포맷과 내용이 일치하면 적용되는 것 같아요.  코드 내용이 html이고 html 파일로 저장하면 적용되는 식입니다.

 

Prettier 적용 전

Prettier 적용전 js 파일 / 스토리블럭

Prettier 적용 후

Prettier 적용 후 js 파일 / 스토리블럭

그런데 저는 이 Prettier가 어딘가 안맞더라구요. 아래 예를 하나 더 보시면,

위에 <link 하고 줄바꿈이 되어 있는 것은 사실 한줄로 되어 있어도 상관이 없거든요. 위와 같이 줄바꿈이 자동으로 여러번 적용되면서 보기는 좋긴하지만 라인이 너무 길어지는 단점도 있는 것 같습니다. 개인적으로는 좌우로 길어지더라도 화면 크기 때문에 자동으로 줄바꿈되어 보이는 것도 상관 없기 때문에 Prettier는 설치했다가 역시 삭제했습니다.

 

indent-rainbow

indent라는 것은 들여쓰기죠. 코딩을 해놓은 것을 보면 단계별로 안쪽으로 조금씩 들여쓰기를 하고 상대적으로 밖으로 내어쓴 것도 있는데요. 위 그림의 왼쪽과 오른쪽을 비교해보시면 오른쪽은 옅은 컬러로 다른 색으로 단계 구분이 되어 있는 것을 보실 수 있습니다. 이렇게 컬러로 얼마나 들여쓰기 되었는지를 가늠할 수 있게 해주는 것이 Indent-rainbow예요. 이 들여쓰기를 딱딱 맞춰서 코딩을 해야 나중에 구분이 쉽고 어디서 어디까지가 한 묶음인지 확인하기도 편하기 때문에 이걸 잘 지켜서 코딩하시는 분들도 많거든요. 그때 얼마나 들여썼는지 쉽게 알 수 있게 해줍니다.

 

CSS Peek

이 플러그인은 html코드에 적용된 CSS가 어디에 있는지 한번에 찾아가게 해주는 플러그인입니다. css 파일이 html 파일과는 별도로 작성되어 있고 적용된 CSS가 굉장히 많을 수도 있는데요. 아래 왼쪽그림과같이 class=comments라고 적용된 것을 클릭하면 오른쪽과 같이 바로 해당 부분을 가지고 있는 CSS파일을 열고 보여줍니다. 아래 캡처는 살짝 위치가 벗어나서 commetnts를 안보여주고 다른 걸 보여주는데요. :) 양해부탁드립니다.

 

 

Html CSS Support

플러그인을 설치하면 위와 같이 해당html문서에 적용되어 있는 CSS를 추천해주는 기능입니다. 이게 안나오면 끝까지 다 입력해야하는데 추천해주면 바로 선택해서 넣을 수 있으니 시간이 제법단축됩니다.

 

Emmet

Emmet은 예전 버전에선 플러그인에서 선택해서 직접 추가로 설치 해줘야했는데요. 지금은 Emmet은 기본으로 설치되어 있습니다. 이 플러그인은 위에  html css support 보다도 잘만쓰면 더 많은 시간을 단축시켜주는데요. 코드를 입력할 때 일정정도 약속된 방식으로 부분적으로만 입력을 해도 코드를 완성시켜줍니다. 가령 열고 닫는 <>이런 괄호 기호를 쓰지 않아도 한꺼번에 입력이 된다거나 ul>li*3 이라고 입력하면 아래와 같은 코드가 한꺼번에 자동으로 입력됩니다. 영상을 참고로 보시면 좋을 거 같아요.

<ul>
<li></li>
<li></li>
<li></li>
</ul>

 

 

 

Live Server

라이브서버는 코딩하는 것을 실시간으로 브라우저에서 바로 적용해서 확인가능하도록 해주는 가상서버입니다. 

플러그인을 설치하면 아래와 같이 우측하단에 Go Live라는 아이콘이 나타납니다. 클릭하면 현재 코딩을 브라우저에서 바로확인할 수 있습니다.

live server / 스토리블럭

마치며,

오늘은 VS Code (Visual Studio Code / VSC) 설치와 설치하면 도움이 되는 플러그인을 살펴봤습니다. 사실 드림위버도 비주얼스튜디오코드가 가진 기능들을 많이 가지고 있고 일부 기능은 제 기준에선 더 훌륭합니다. 서버형태로 파일 관리하는 기능도 있고 강력한데요. 다만 비주얼스튜디오 코드는 무료고 드림위버는 플랜 구매해야해서 월별로 결제를 해야합니다. 게다가 VSC에 비해 몇배나 무거운 프로그램이기도 합니다. 그런 의미에서  기능도 좋고 확장기능도 풍부한 비주얼스튜디오코드는 꽤나 훌륭한 프로그램인 거 같아요. 그리고 마치 IDE처럼 하단엔 명령창까지 가지고 있어서 파이썬 같은 프로그램을 개발하시는 분들도 많이 사용하는 것 같습니다. 혹시 VSC에 대해 관심은 있으나 어떻게 사용할지 잘 모르는 분들께 도움이 되었음 좋겠네요. 

고맙습니다!