[vue.js] 처음 Vue.js 개발 환경 세팅 해보기

 회사에서 vue.js를 접할 기회가 생겨 후다닥 스터디를 진행하게 되었다. 요즘 많이 사용한다는 vsCode로 학습을 해볼까 한다.

그동안은 Eclipse환경에서 개발을 하다보니 조금 적응이 안될 수 있지만! 아직 젊기에 도전해볼 수 이싸!! 

그래서 오늘은 vsCode로 vue.js 개발환경을 세팅하는 방법을 정리하려고한다!

 

  visual studio Code 설치 링크 : https://code.visualstudio.com/

1. Visual Studio Code 한글 적용하기! 

vsCode 패키지 설치 이미지

  1.1  처음 에디터를 켜면 영어로 되어 있기 때문에, 우선 한글화를 적용하려고한다. vsCode에서도 패키지 설치가 가능한데,

        Eclipse에서 사용했던 Marketplace에서 플러그인들을 추가해서 사용했던 것처럼 동일한 방식이더라..!

  1.2 "Korean Language Pack for Visual Studio Code"를 검색해서 한국어 패치를 해주자!

  1.3  설치가 다되면 [RestartNow]버튼을 눌러 vsCode를 재실행 시켜준다! 그러면, 한국어 패치가 적용된걸 확인할 수 있다. 

 

2. Vue.js를 사용하기 위한 Visual Studio Code Plugin Install

  2.1  Vue.js를 효과적으로 사용하기 위해서는 플러그인들을 설치

      - 필자가 지금 설치해본건 아래 세개지만, 이외에도 여러가지가 있기에 출처와 좀 더 좋은 블로그를 찾아서 플러그인을 설치하도록하자! 

        (출처 : https://joshua1988.github.io/web-development/vuejs/boost-productivity/ 

• Prettier - 코드 자동정렬
• vetur - 문법강조 및 자동완성등 기능 제공
• Vue VSCode Snippets - 자동완성기능 제공
• Material Icon Theme - 아이콘 구분기능 제공
• ESLint - JavaScript 코드스타일, 문법기능 제공
• Live Server -  작성한 소스코드의 웹페이지를 바로 확인해볼 수 있는 기능 제공

 

3. Chrome에서 Extendtion Tool 설치 

   - 크롬웹스토어 에서 확장프로그램 "vue.js devtools"를 추가하자

   - 크롬웹스토어 링크 : https://chrome.google.com/webstore/category/extensions?hl=ko