Visual Studio

• MS에서 만든 Text Editing 툴 중에 하나로 Typescript 언어를 기반으로 한 open source project다.
• 이 말인 즉슨, Visual studio를 쓰다가 개선사항이 있다면 MS사 지원의 도움을 받을 수 있다는 뜻.

참고) IDE란?
Integrated Development Environment의 약자로 text editing뿐만 아니라 compiler, debugger, syntax highlighting 등 퍼포먼스 분석할 수 있는 굉장히 많은 것들이 한번에 포함된 툴을 말한다.

• visual studio code의 경우 IDE가 아닌 간단한 text editing 툴이다.

Visual Studio Extensions

Live Server

HTML/CSS 변경 후 창을 새로고침할 필요 없이 저장만 하면 자동으로 바로바로 창이 업데이트 되는 모습을 볼 수 있다.

Prettier

파일을 저장할 때 자동으로 format을 예쁘게 만들어준다. (indent 등)

Material Icon Theme

생성된 파일의 아이콘들이 기본 아이콘보다 조금 더 생동감 있게 보여진다.

Indent-rainbow

들여쓰기 된 부분이 rainbow 컬로로 하이라이트 돼 있어 코드를 읽을 때 한눈에 알아보기 쉽게 도와준다.

Auto Rename Tag

HTML 편집할 때 하나의 tag를 다른 tag로 바꿀 때 open tag를 변경하면 close tag가 자동으로 함께 변경된다.

CSS Peek

HTML 파일에서 특정 영역에 적용된 CSS를 확인해기 위해 command+클릭 할 경우 정의된 CSS 파일 영역으로 이동함. 즉 어떤 CSS가 적용돼 있는지 한번 클릭을 통해 바로 확인할 수 있다.

HTML CSS Support

CSS에서 클래쓰별로 원하는 스타일을 지정해두고, HTML에서 바꾸고 싶을 경우 굳이 타이핑 하지 않고 자동완성 입력이 될 수 있도록 도와준다. (HTML에서 CSS의 자동완성 이용하기)

---

기타 팁

프로젝트를 하면서 코드가 어떻게 나오는지 따로 파일을 만들지 않고 하기 사이트를 통해 확인해볼 수 있다.

a) JS Bin : https://jsbin.com/?console,output
b) JS Fiddle : https://jsfiddle.net/
c) codesandbox : https://codesandbox.io/s/vanilla