Visual Studio Code 설정

 

 

 

 

 

Vue.js 개발을 위한 Visual Studio Code 설정을 해보자!

 

---

 

1. 플러그인 설치

 

- vscode를 열고 좌측 메뉴에서 확장(Extensions) 탭으로 간다.

 

 

- 'vetur' 를 검색하여 최상단에 있는 것을 설치해준다.

   vetur는 Vue.js 에서 지원하는 플러그인으로 다양한 기능들을 제공해준다.

   .vue 파일에 대한 코드들을 만들어주는 기능을 비롯해 자동 완성, 디버깅 등을 지원한다.

 

 

- 'material' 를 검색하여 최상단에 있는 'Material Icon Theme' 를 설치해준다.
   각종 파일의 아이콘을 깔끔하고 보기좋게 나타내준다.

 

 

- 테마는'night owl' 를 검색하여 최상단에 있는 것을 설치해준다.

  Material Theme도 좋긴한데 이 테마도 상당히 깔끔하고 코드 하이라이팅도 좋은 것 같다.

 

 

- 'live server' 를 검색하여 최상단에 있는 것을 설치해준다.

  개발할 때 변경된 것들을 화면에서 바로바로 적용해서 보여준다.

 

 

** 그 외 'ESLint' / 'Prettier' / 'Auto Close Tag' / 'Atom Keymap' 들도 설치해주면 좋다.

 

 

 

---

 

2. 설정

 

- vscode 좌측 하단에 톱니바퀴를 클릭하면 나오는 메뉴들 중에서 File Icon Theme 를 클릭해준다.

 

 

- 'Material Icon Theme' 를 선택하여 아이콘을 적용해준다.

 

 

- 좌측 하단 톱니바퀴를 클릭하여 Color Theme를 눌러준다.

 

 

- 'night owl' 을 클릭하여 테마를 설정해준다.