본문 바로가기

프로그래밍/WEB FRONT END

Visual Studio Code HTML 확장기능

Visual Studio 확장(Extensions) 


웹클라이언트 프로그램 작성에 사용하는 경우 사용하면 편한 확장 기능들입니다.

출처: http://bimmermac.com/1242


EXTENSIONS설명
ftp-simpleFTP를 탐색기 패널에서 트리 구조로 볼 수 있습니다. 리스트를 동기화하는 방식이라서 처음 불러오거나 갱신할 때 시간이 조금 걸립니다.
ftp-sync프로젝트 개념으로 FTP를 사용하려고 하니 ftp-simple에 비해 더 편하네요. 다만 아직 Sublime Text의 SFTP에 비할 정도는 아니고, 보완할 부분이 많은 것 같습니다.
HTML SnippetsHTML 코드를 편하게 입력할 수 있도록 돕는 기능
View in BrowserHTML 문서를 디폴트 브라우저로 띄워주는 기능입니다. 설치 후 Ctrl+F1 키를 누르면 브라우저로 뜨게 됩니다. HTML 문서만 지원하며 저장되지 않은 문서나 다른 종류의 문서는 지원되지 않는 것 같습니다.
Live HTML PreviewerHTML 문서를 편집하며 실시간으로 미리보기할 수 있습니다.
Syncing확장 기능 및 에디터 환경 설정 등을 여러 디바이스와 동기화시켜주는 기능입니다. Github의 gist에 업로드하는 방식이라서 Private하게 올릴 수가 있습니다.
Guides여는 코드와 닫는 코드 사이에 가이드 세로선을 표시합니다.
Markdown Shortcuts마크다운 문법을 단축키 혹은 마우스로 쉽게 할 수 있도록 기능을 제공합니다.
markdownlint마크다운 문법을 체크합니다.
Beutify지저분하게 정렬돼 있는 코드를 예쁘게 정렬해줍니다.
Auto Rename TagHTML/XML에서 한쪽 태그를 수정하면 나머지 반대쪽 상응하는 태그를 함께 수정해 줍니다.
VS Color Picker컬러를 선택할 때 팔레트에서 고르거나 스포이트 툴로 색상 코드를 가져올 수 있습니다.
vscode-open-project프로젝트 기능에 비해서는 부족하지만, 작업 폴더를 프로젝트 리스트로 만들어서 쉽게 폴더 전환을 할 수 있습니다.
Paste Image클립보드의 이미지를 바로 마크다운 코드로 붙여넣을 수 있습니다. 붙여 넣은 이미지는 자동으로 지정된 폴더에 저장됩니다.


'프로그래밍 > WEB FRONT END' 카테고리의 다른 글

그림판  (0) 2018.01.12
[HTML5] 새로운 요소와 기능  (0) 2014.12.18
[자바스크립트] 9장. jQuery  (0) 2013.12.26
[자바스크립트] 8장. Ajax  (0) 2013.12.26
[자바스크립트] 7장. DOM객체  (0) 2013.12.26