비주얼 스튜디오 코드 (Visual Studio Code) Extentions 설정

Extentions 설정

 

1. Material Theme에서 자신의 눈에 보기 편한 색상을 선택할 수 있다. 

 

Material Theme

 

 

2.  Meterial Icon Theme에서 다양한 아이콘들의 모양을 갖고 있는 테마로 바꿀 수 있다. 

 

Meterial Icon Theme

 

 

3. Prettier Formatter - Code formatter 코드를 포메팅해주는 툴 

 

• 설치 후 세팅으로 이동 (단축키 cmd + ,)

검색창에 save 로 검색 - Editor : Format On Save에 체크 (파일을 저장할 때 자동으로 포맷이 가능하도록 함) 

 

? 아직 html를 처음 시작하는 상태여서 이것이 왜 필요한지는 계속 공부해봐야겠다. ?

Prettier Formatter - Code formatter

 

검색창에 prettier 검색하면 세부적인 것을 설정할 수 있음 

 

• JavaScript > preferences : Quote Style : auto -> single로 변경 
• TypeScript > preferences : Quote Style : auto -> single 로 변경

Quote Style : auto -> single

 

Quote Style : auto -> single

 

? 이것도 아직 왜 필요한 것인지 앞으로 공부해봐야겠다. 앞으로 배우면서 재 수정할 예정 ? 

 

 

4. Bracket Pair Colorizer : 괄호에 색상을 주어서 가독성을 높여준다. 

 

Bracket Pair Colorizer

 

 

5. Indent - Rainbow : 들여쓰인 부분이 레인보우 색상으로 되어 있어 코드의 가독성을 높인다. 

 

Indent - Rainbow

 

 

6. Auto Rename Tag : html 편집할 때 앞의 태그를 바꾸면 뒤에 태그도 자동으로 바뀐다. 

 

Auto Rename Tag

 

 

 

7. CSS Peek : css를 금방 확인할 수 있게 도와준다. cmd 나 ctr를 누른 상태로 클릭하면 정의된 css 파일로 이동한다. 

 

CSS Peek

 

 

8. HTML CSS Support : css에서 클래스 별로 원하는 스타일을 지정한 후 html에서 바꿀 때 일일이 타이핑 하지 않고도 html 에서 앞자만 입력해도 css의 자동 완성을 할 수 있다. 

 

HTML CSS Support

 

 

9. Live Server : 새로고침을 누르지 않고 저장하면 수정한 것을 브라우저로 바로 확인할 수 있다.

cmd 팔레트 (shift + cmd + P)에서 Live Server 검색 Open With Live Server  숏컷 키를 누르면 새로운 브라우저 창이 열림. 

 

Live Server

 

 

10. Markdown Preview : VS code에 내장되어 있어 설치할 필요가 없다. 

readme file 이 항상 추가로 들어가야 한다. readme.md 는 Mark down 파일이다

Mark down 파일을 확인하면서 작성하고 싶다면 cmd 팔레트 (shift + cmd + P)에 Markdown Preview를 선택하면 된다. 

 

? 아직 만든 파일이 없어 정확히 어떤 것인지 확인할 수 없어 배우면서 확인할 예정 ? 

 

11. html과 css 가 어떻게 동작하는지 간단히 확인할 수 있는 웹사이트

jsbin. com

jsfiddle.net

codesandbox.io

 

드림코딩 by 엘리의 내용 참고함

https://www.youtube.com/watch?v=bS9yTI2fC0w&t=35s