Vue.js + Express +MySQL 게시판 만들기 - 2. 비주얼 스튜디오 코드 설치하기

이전 포스팅

https://codingstep.tistory.com/entry/Vue-Express-MySQL-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0-1-Nodejs-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0

Vue + Express +MySQL 게시판 만들기 - 1. Node.js 설치하기

저번시간 Node.js를 설치한 후()에 이어서 코드를 작성할 에디터인 Visual Studio Code를 설치하고

Vue 작성을 도와줄 확장 기능을 설치해보겠습니다.

 

 

 

1.Visual Studio Code 설치하기

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Visual Studio Code 홈페이지에 접속을 합니다.

Visual Studio Code 공식 홈페이지

Download for Windows를 눌러 다운로드를 받아줍니다.

그리고 어려운게 없으니 그냥 Next를 쭉 눌러서 설치를 해주시면 됩니다.

 

 

2-1. 확장 기능 설치 - Vetur

Visual Studio Code를 실행하여 아래 그림의 왼쪽에 노랗게 사각형으로 체크된 Extensions 를 클릭하고

Vetur를 검색하여 install을 해줍니다.

 

이 Vetur는 나중에 우리가 쓸 .vue라는 확장자를 가진 파일의 텍스트를 하이라이트 하는 기능을 제공해줍니다.

무슨 말인지 모르겠다 하시면 안깔고 넘어가셔도 상관없습니다. 나중에 '아~' 하시며 무조건 깔게 되있습니다.

Vetur 설치

 

 

2-2. 확장 기능 설치 - Vue 3 Snippets

다음 설치할 기능은 Vue 3 Snippets입니다. Vue코드를 작성하는 생산성을 높여줍니다.

Vue3 Snippets

 

2-3. 확장 기능 설치 - HTML CSS Support

마지막으로 HTML CSS Support를 설치해줍니다. 문서에 있는 CSS를 추천해주는 기능을 제공해줍니다.

오타를 치는 실수를 줄여주고 은근히 편리합니다.

HTML CSS Support

 

 

오늘은 이렇게 Vue Code를 작성할 에디터와 확장기능을 설치해보았습니다.

다음 포스팅에서는 깃을 연동하여 형상관리를 할 수 있도록 해보겠습니다.