동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

Visual Studio Code는 HTML 프로그래밍을 기본적으로 지원합니다. 구문 강조, IntelliSense를 통한 스마트 완성 및 사용자 지정 가능한 서식이 있습니다. VS 코드에는 훌륭한 Emmet 지원도 포함됩니다.

IntelliSense

HTML을 입력 할 때 HTML IntelliSense를 통해 제안을 제공합니다. 아래 이미지에서 제안 된 HTML 요소 클로저 </ div>와 제안 된 요소의 컨텍스트 특정 목록을 볼 수 있습니다.

또한 요소, 태그, 일부 값 (HTML5에 정의 된대로), Ionic 및 AngularJS 태그에 대한 제안을 제공합니다. 문서 기호는 HTML에서도 사용할 수 있으므로 ID 및 클래스 이름별로 DOM 노드를 빠르게 탐색 할 수 있습니다.

임베디드 CSS 및 JavaScript로 작업 할 수도 있습니다. 그러나 스크립트와 스타일에는 다른 파일의 내용이 포함되어 있지 않으므로 언어 지원은 HTML 파일의 내용 만 봅니다.

Ctrl + Space를 눌러 언제든지 제안을 실행할 수 있습니다.

활성화 된 기본 제공 코드 완성 공급자를 제어 할 수도 있습니다. 해당 제안 사항을 보지 않으려면 사용자 또는 작업 영역 설정에서 이를 재정의하십시오.

// Configures if the built-in HTML language suggests Angular V1 tags and properties.
"html.suggest.angular1": true,

// Configures if the built-in HTML language suggests Ionic tags, properties and values.
"html.suggest.ionic": true,

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
"html.suggest.html5": true

태그 닫기

열린 태그의>가 입력되면 태그 요소가 자동으로 닫힙니다.

일치하는 닫기 태그는 닫는 태그가 입력 될 때 삽입됩니다.

다음 설정으로 자동 닫기 태그를 해제 할 수 있습니다.

"html.autoClosingTags": false

색상 선택기

VS 코드 색상 선택기 UI는 이제 HTML 스타일 섹션에서 사용할 수 있습니다.

Hover

커서 아래의 기호에 대한 자세한 정보를 얻으려면 HTML 태그 나 내장 스타일 및 JavaScript 위로 마우스를 이동하십시오.

Validation(유효성검사)

HTML 언어 지원은 모든 내장 JavaScript 및 CSS에 대해 유효성 검사를 수행합니다.

다음 설정을 사용하여 유효성 검사를 끌 수 있습니다.

// Configures if the built-in HTML language support validates embedded scripts.
"html.validate.scripts": true,

// Configures if the built-in HTML language support validates embedded styles.
"html.validate.styles": true

Folding(접기)

줄 번호와 줄 시작 사이의 여백에있는 접이식 아이콘을 사용하여 소스 코드 영역을 접을 수 있습니다. 접기 범위는 소스 코드의 여러 줄 주석에 대한 모든 HTML 요소에서 사용할 수 있습니다.

또한 다음 영역 마커를 사용하여 접는 범위를 정의 할 수 있습니다.

과

HTML 사용을 위해 들여 쓰기 기반 접기로 전환하려는 경우

"[html]": {
    "editor.foldingStrategy": "indentation"
},

서식 지정

HTML 소스 코드의 형식을 개선하려면 Ctrl + K Ctrl + F를 누르면 선택한 영역이 다시 포맷됩니다.

HTML 포맷터는 js-beautify를 기반으로합니다. 해당 라이브러리에서 제공하는 서식 옵션은 VS 코드 설정에 포함되어 있습니다.

html.format.wrapLineLength: 한 줄당 최대 글자 수.
html.format.unformatted : 재 형식화해서는 안되는 태그 목록.
html.format.contentUnformatted : 컨텐트를 다시 포맷하면 안되는 쉼표로 구분 된 태그 목록.
html.format.extraLiners : 앞에 새 줄이 있어야하는 태그 목록.
html.format.preserveNewLines : 요소를 보존하기 전에 기존 줄 바꿈 여부.
html.format.maxPreserveNewLines : 한 개의 청크에 보존 할 최대 줄 바꿈 수.
html.format.endWithNewline : 개행 문자로 끝납니다.
html.format.indentInnerHtml : 들여 쓰기 <head> 및 <body> 섹션.
html.format.wrapAttributes : 속성의 배치 형식
auto : 줄 길이를 초과 할 때 줄 바꿈
force : 첫번째 속성을 제외한 모든 속성을 감싸기
강제 정렬 : 첫 번째를 제외한 모든 속성을 감싸고 속성을 정렬합니다.
force-expand-multiline : 모든 속성 줄 바꾸기

** 마켓 플레이스에는 선택할 수있는 여러 가지 포맷터가 있습니다. 다른 포맷터를 사용하려면 설정에서 "html.format.enable": false를 정의하여 내장 포맷터를 끕니다.

Emmet 스니펫

Emmet 스니펫 확장을 지원합니다. Emmet 약어는 편집기 자동 완성 목록에 있는 다른 제안 및 스니펫과 함께 나열됩니다.

유효한 약어에 대해서는 Emmet cheat sheet(https://docs.emmet.io/cheat-sheet/)의 HTML 섹션을 참조하십시오.

다른 언어와 함께 HTML Emmet 약어를 사용하려면 emmet.includeLanguages 설정을 사용하여 Emmet 모드 중 하나 (예 : css, html)를 다른 언어와 연결할 수 있습니다.

설정은 언어 ID를 가져 와서 Emmet 지원 모드의 언어 ID와 연결합니다.

예를 들어, JavaScript에서 Emmet HTML 약어를 사용하려면 다음을 수행하십시오.

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

HTML 확장

확장 기능을 설치하여 더 많은 기능을 추가하십시오. 확장보기 (Ctrl + Shift + X)로 이동하고 'html'을 입력하면 HTML을 만들고 편집하는 데 도움이되는 관련 확장 목록을 볼 수 있습니다.

비주얼 스튜디오 코드 HTML > Visual Studio Code강좌

비주얼 스튜디오 코드 HTML

페이지 정보

댓글목록 0

웹학교

메인메뉴

고객센터

회원영역

회사정보