Emmet + visual studio code extensions 추천

source : www.youtube.com/watch?v=m7wsrVQsVjI

* ide : integrated development environment

compiler, devugger, linker, performance 분석 가능

* text editor : visual studio code, atom, sublime

 

* command palette

cmd+shift+p

 

* Emmet(formerly Zen Coding)

[ 안되면]

파일-기본설정-설정-확장-emmet-trigger expansion on tab 체크하기

settings.json에 추가

"emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

 

[ HTML 자동 완성 ]

! + tab키 : html 자동완성

div + tab키 : div 태그 작성

div.className

div#idName 

 

[ 부모,자식, 형제 노드 ]

div>ul>li

div>ul+ol ( 형제, 나란히)

ul>li*5 (5개 li만든다)

div>ul>li^ol(ul형제로 ol만든다)

 

[ 그룹화하기 ]

div>(header>ul>li*2>a)+footer>p

https://www.youtube.com/watch?v=m7wsrVQsVjI

p.class${item $}*5

[ 더미용 텍스트 생성 ]

p>lorem + tab

p>lorem4 : 4개 단어 더미 텍스트 생성

 

* 확장 프로그램 추천

1. material theme

2. material icon theme

3. prettier

설치 후 mac (cmd + , ) window는 ctrl + , => setting으로 간다

format on save를 체크한다

tab width는 2

quote는 single

4. bracket pair colorizer

괄호 찾기 쉬워

5. indent rainbow

6. auto rename tag : html 편집할 때 편하다

h1 대신 h3로 바꾸고 싶을 때 앞의 태그를 바꾸면 뒤의 태그가 자동으로 바뀐다

7. css peek

cmd(ctrl) + 누른 상태로 클릭하면 css 파일로 이동한다

8. html css support : html에서 css 자동완성 이용가능

+ html to css autocompletion : css 파일에서 자동완성 기능 제공!

9. live server

10. markdown preview (설치 X)

md파일이 어떻게 보이는지 확인할 수 있다