본문 바로가기

Web Front-End/Vue

Vue.js 개발을 위한 Visual Studio Code 세팅

현재 Atom, Bracket 등 유용한 도구가 많지만, VS Code가 가장인기있는 IDE이다.

따라서 가장인기 있는 VS Code를 설치하기로한다.

 

설치 URL은 https://code.visualstudio.com

여기서 쉽게 다운로드하여 설치 할수 있다. (다음>다음...만 누르면 손 쉽게 설치 완료)

 

[유용한 플러그인]

플러그인은 좌측 상단에 확장(Extension 탭에서 아래 플러그인을 검색 후 install 한다)

- Korean Language Pack : VSCode에서 한국어를 지원해줌

- view-in-browser : html 파일을 기본 브라우절 쉽게 볼 수있다.

- vetur: 코드에 대한 문법 하이라이트, 코드 자동완성, 디버깅, 린팅 기능등을 제공

- HTML Snippets : HTML 태그 조각을 빠르게 작성할 수 있도록 도와줌

- JS-CSS-HTML Fomatters: JS, CSS, HTML의 코드 자동완성 기능을 지공하며 컨트롤+스페이스를 눌러서 사용

- Vue 2 Snippets: Vue.js 2.0 코드 조각 지원과 문법 강조 기능을 제공

- Vue-beautify : Vue.js 코드에 대한 정리 배치 기능을 제공

- ESLint: 자바스크립트 코드 스타일, 문법 체크 기능을 제공

- Highlight Trailing White Spaces : 공백 표시 제공

- Vue 2 Snippets : 코드상에 작성되어 있는 Vue 컴포넌트를 통해 해당 컴포넌트 파일로 이동시켜주는 기능 제공