[vscode 에디터] vuejs 익스텐션 추천

비쥬얼스튜디오 코드(vscode)의 익스텐션(extension)은 개발을 효율적으로 할 수 있도록 도와주는 도구이다.

 

vscode 를 사용하기 전에는 atom 에디터를 사용했었고 익스텐션을 사용하지 않았다.

 

1. Atom One Dark Theme (글꼴 및 글 색상 익스텐션)

vscode 에서 첫 번째로 사용한 익스텐션은 Atom One Dark Theme 이다.

이 익스텐션 덕분에 atom 에디터에서 사용하던 글꼴 및 글 색상을 그대로 vscode에서 사용할 수 있었다.

2020년 3월 기준으로 약 110만 명이 사용하고 있고 평점이 5점이다. 

사용자 수를 봤을 때 아톰에서 vscode로 넘어온 사람이 많은 것 같다.

 

1) Atom One Dark Theme

 

2. Vue Peek (클래스 및 함수 이동)

두 번째로 vscode에서 찾은 vuejs 익스텐션은 goto definition (클래스 및 함수로 이동)이 가능한 Vue Peek 이다.

goto definition은 코드 규모가 커지면서 찾게 되는 기능인데, 폴더 및 파일이 많아 질 수록 단기간에 코드를 찾을 수 있다. 협업 시에도 다른 사람이 작성한 코드를 파악하는데 도움이 된다.

2020년 3월 기준으로 약 25만명이 사용하고 있고 평점이 5점이다.

 

2) vue peek

 

3. Prettier (저장 시 자동 줄 및 띄어쓰기 조절)

프런트엔드 개발자들 대부분이 사용하는 기능인 것 같다. 

처음 vuejs 를 이용해서 개인 프로젝트를 시작했을 때는 이 익스텐션 없이 진행했는데, 이제는 이 익스텐션은 필 수 인

것 같다. html, css, jsavascript, vuejs 관련 코드를 저장 시 자동 줄 및 띄어쓰기 조절해 준다.

 

3) Prettier

2020년 3월 기준으로 약 578만명이 사용하고 있고 평점이 4점이다.

대부분의 프런트엔드 개발자가 사용하고 있는 것 같다.

 

특별히 설치에 어려움은 없이 vscode extension에서 install을 누르면 바로 사용할 수 있었다.