vs code 단축키 및 기본 세팅 -win기준 (프론트 개발할 때)

 

-html 기본구조 자동완성 단축키

 

! + 탭

 

 

 

- 태그 자동완성 단축키

선택자 + 탭

 

ex) 태그선택자 :  h1 + 탭

ex) 클래스 선택자 : .container + 탭

 

 

-코드 정리 단축키

ctrl + k + F

 

-> 개발자 도구에서 element 그대로 복사하면 이렇게 안이쁘게 복사되니깐 그럴 때 유용.

--> 아래는 ctrl + k + F 로 정리된 코드

 

 

-> 단축키 잊어버리면 오른쪽 버튼 > '선택 영역 서식' 

 

 

 

-html 파일 초기 설정 : setting.json 에서 

 

- html 코드 들여쓰기 간격 setting

 

 "editor.tabSize": 2

 

 

-html lang 설정. 

    "emmet.variables": {

        "lang": "ko"

    }

 

- 브라우저에서 코드 출력되게

-> 확장 프로그램 설치 : live server

 

 

 

-> 활용.

 

 

-> 파일 저장해가면서 실시간으로 결과 확인. 

 

 

 

 

-닫는 태그 자동완성 : 앞쪽 태그 이름바꾸면 닫는태그도 같이 바뀌도록

-> 확장 프로그램 설치 : auto rename

 

 

 

 

 

 

 

- 메뉴(기능) 찾기 단축키

ctrl +shift + p

 

- 주석 단축키

ctrl + /