드림코딩 by 엘리_Visual Studio Code 설치 및 10 Extensions

---

Visual Studio Code 설치 및 10 Extensions for Web development.

---

 

 

마이크로 소프트에서 만든 text editing tools 중 하나로 typescript 언어를 기반으로한 open source project 이다. 

웹개발 뿐만 아니라 다양한 언어들을 개발할 때에도 사용 가능하다.

(IJ IDE(Integrated Development Enviornment)를 추천한다.)

 

visual studio code : https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

10 Extensions

1. Material Theme : 눈에 가장 편안한 개발 환경을 만든다.

2. Material Icon Theme : 아이콘들이 생동감 있게 변한다.

3. Prettier - Code formatter : 코드를 formatting 해준다. (동영상 참조)

4. Bracket Pair Colorizer : 괄호에 색감을 주어서 나중에 코드에 가독성을 준다. 

5. Indent Rainbow : 들여쓰기 된 부분이 여러색으로 하이라이트 되어 있어 가독성을 준다.

6. Auto Rename Tag : 앞의 tag를 바꾸면 뒤에 tag도 자동으로 바뀐다.

7. CSS Peek : CSS를 빨리 찾을 수 있다.

8. HTML CSS Support : HTML에서 CSS를 자동완성 기능 이용

9. Live Server : 명령팔레트에서 live server: open with live server 을 설정한다.

10. Markdown Preview :

 - 에디터에 내장되어 있음

 - 프로젝트를 github에 올리게 되면 readme 파일이 항상 추가로 들어가야 된다.

 - readme 파일은 md 파일로 확장자가 .md 이다. 즉 markdown 파일이다.

11. HTML to CSS autocompletion

 - HTML에서 정의한 class를 CSS에서 자동완성해주는 기능을 확인가능 하다.

 

현업에서 자주 쓰이는 Tip

프로젝트나 파일을 일일히 만들지 않고 HTML과 CSS 동작을 확인 가능하다.

jsbin : https://jsbin.com/

JS Bin

 

jsfiddle : https://jsfiddle.net/

JSFiddle - Code Playground

 

codesandbox : https://codesandbox.io/