VSCode에서 HTML자동완성 사용하기

기본적으로 설치 되어있지만, 만약 안나온다면

 Ctrl + , 을 눌러서 설정창을 열고 User > Text Editor > Suggestions > Quick Suggestions 에서

other이 on으로 되어 있는지 확인해보자.

 

사용방법 

입력하려는 코드를 약간 입력하면 자동으로 뜨거나, 안뜬다면 Ctrl + Space를 눌러보자

• 마우스로 원하는 것을 클릭 혹은
• 키보드의 방향키로 원하는 것을 선택 후 'Tab' 혹은 'Enter'
  • 개행 해야 하거나, 선택 하고 싶지 않은데 선택되는게 귀찮을 경우엔,
    Setting에서 Accept Suggestion On Enter 항목을 Off로 바꿔주자

태그 입력하기

 

태그를 입력하고 Enter 혹은 Tab

 

단일 태그가 아닌 시작태그와 종료태그가 있는 경우엔 종료태그까지 자동으로 완성 시켜준다.

 

 

1. 태그에 간혹 ':' 로 자주 쓰는 표현이 완성이 되어있으니, 필요한걸 가져다 쓰도록 하자

예시에서 <input type="checkbox" name="|" id="|"> 이 자동 완성된다고 나오는데, 여기서 "|" 는,
 | 에 커서가 온다는 뜻이고,
 | 가 2개 이상일경우, 첫번째 |에 원하는 속성값을 입력해 준 뒤 Tab을 눌러주면 다음 | 위치로 커서가 이동하게 된다는 뜻이다.

 

2. 속성 자동완성 하기

태그 안에서 Ctrl+Space 혹은 원하는 속성명을 조금 입력하면 추천하는 자동완성 목록이 나온다.

 

3. 속성과 속성값을 입력한 채로 자동완성 하기

원하는 속성과 속성값을 정확히 안다면 [속성="속성값"]을 이용해서 한번에 만들 수 있으며(이때 속성 이름은 자동완성이 되지 않는다),
".클래스이름", "#id이름"을 붙여써서 class와 id 속성의 속성값을 쉽게 입력할 수 있다.

4. 계층구조 한번에 입력하기

• > : 자식 태그 생성
• + : 같은 계층에 태그 생성
• ^ : 상위 태그로 이동
• * : * 앞에 적은 태그를 * 뒤에 적은 숫자만큼 반복
• {} : 시작 태그와 종료 태그 사이에 내용이 들어가야 할 경우 {} 안에 입력
• $ : *를 이용해서 반복 할 시 $ 위치에 1부터 반복할 때마다 +1 되어 나타남
• () : ()안에 입력한 내용을 묶어줄 때 사용