HTML/CSS/Javascript 작성을 위한 Visual Studio Code 모듈 설치

HTML/CSS/Javascript 작성을 위한 Visual Studio Code 모듈 설치

최근 개발을 위한 에디터(Editor) 도구(Tool)로 가장 많이 사용되는 Visual Studio Code에 HTML/JavaScript/CSS 개발 및 편집을 위한 확장 모듈을 설치 해 봅니다.

먼저 Visulal Studio Code를 먼저 설치 합니다

   참고 : 개발도구-VSCode-설치와-한글-설정-방법

Visual Studio Code - 확장(Extensions) 도구 검색 및 설치 메뉴 클릭

HTML / CSS / JavaScript를 위해 설치해야 할 유용한 도구

• HTML Server  : 별도의 웹서버 없이 편집중인 HTML문서를 웹서버를 대신해 서비스 할 수  있게 하는 모듈
• HTML Snippet : HTML Code작성시 단축코드를 이용해 빠른 코딩을 도와주는 모듈
• Prettier : 코드 포멧터(Code Formatter)로 HTML 코드를 보기 쉽게 정리해 주는 모듈

Prettier(Code formatter) 설정 확인 - 저장시마다 적용할것인지의 여부

Visual Studio Code의 통합 검색창 열기 (Ctrl + Shift + P)

기본설정 - 사용자 설정 열기

검색 "formatonsave" 

> 파일 저장시 code formatter가 작동해서 서식을 자동으로 편집해 저장 하는지 여부(체크)

Web Developer 크롬 확장판 추가

구글 검색 "web developer google chrome extension"

확인(크롬의 확장 모듈 아이콘 확인)

WhatFont 확장모듈 설치

  웹페이지내의 글자 요소에 대한 폰트정보를 표시해 주는 모듈

WhatFont 기능 선택후

웹페이지 요소를 선택하면 선택 요소의 CSS 설정 상타값이 보여진다.