Web 개발 시 VS Code 설치해야 할 Plug-in

Web 개발 시 프론트엔드 개발을 위해 설치해야 프로그램과 Plug-in 들을 소개한다.

먼저 VS Code(Visual Studio Code)를 해야 한다.

VS Code 설치 URL

VS Code 설치 후 추가해야 할 Plug-in 들은 아래와 같다.

• Korean Language Pack for Visual Studio Code : VS Code 용 한국어 팩
• indent-rainbow : 들여쓰기를 더 읽기 쉽게 만드는 간단한 확장 Plug-in
• Auto Rename Tag : Visual Studio IDE와 마찬가지로 쌍을 이루는 HTML/XML 태그의 이름을 자동으로 바꿔주는 Plug-in
• CSS Peek : HTML 파일에서 해당 CSS에 대한 정의로 CSS ID 및 클래스 문자열을  볼 수 있도록 지원하는 Plug-in
• HTML to CSS autocompletion : HTML에서 선언된 CSS 명을 .css 파일에서 입력할 때 자동 완성 기능 제공 Plug-in
• HTML CSS Support : HTML용 Visual Studio Code CSS Intellisense Plug-in
• Live Server : 정적 및 동적 페이지에 대한 live reload 기능을 사용하여 개발 시 즉각 적용되도록 도와주는 Plug-in
• ESLint : 코드 검사기로 자바스크립트 문법에서 에러가 발생하면 표시해주는 Plug-in
• Vue - Official : Vue 지원을 위한 공식 확장 Plug-in
• Vue VSCode Snippets : 사용하고자 하는 코드를 빠르게 타이핑할 수 있도록 도와주는 Plug-in

Web 프론트엔드 개발 시 Vue 사용 시에는  크롬브라우저를 사용해서 화면을 확인하고, 크롬 웹스토어에서 Vue devtools로 검색해서  설치하면 된다.