VSCode 로 개발하기

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

HTML 내에서 매칭되는 닫는 태그나 여는 태그를 강조해 주는 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

ㅇㅇㅇㅇ

설정

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

JS, CSS, HTML 파일 또는 디렉토리 내의 파일에 대해서 코드를 축소해 주는 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=HookyQR.minify

파일을 선택 후 Minify 시 {파일명|디렉토리명}.min.[js|css|html] 형식으로 파일을 생성해 줍니다.

원본 : index.html

축소 : index.min.html

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

작업 공간에 있는 정의를 기반으로 HTML Class 속성에 대한 CSS Class 이름을 자동 완성해 줍니다.

링크 : https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

지원 언어 모드

• HTML
• Razor
• PHP
• Laravel (Blade)
• JavaScript
• JavaScript React (.jsx)
• TypeScript React (.tsx)
• Vue (.vue) [requires octref.vetur]
• Twig
• Markdown (.md)
• Embedded Ruby (.html.erb) [requires rebornix.Ruby]
• Handlebars
• EJS (.ejs)

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

HTMLHint 확장은 열려 있는 HTML 파일에서 HTMLHint를 실행하고 오류와 문제의 수를 상태바에 표시해줍니다.

문제 패널에서 세부 정보를 함께 볼 수 있습니다.

HTML 파일의 오류는 강조표시되며 마우스 오버시 오류 메시지가 표시됩니다.

사용

로컬 프로젝트 폴더에 버젼을 설치

npm install --save-dev htmlhint

전역 설치

npm install --global htmlhint

VSCode = Visual Studio Code 에서 사용할 수 있는 확장(Extension) 입니다.

부트 스트랩을 위한 109개의 코드 스니펫 팩 확장입니다.

링크 : https://marketplace.visualstudio.com/items?itemName=Zaczero.bootstrap-v4-snippets

사용법

b- 로 snippet_name 을 입력하면 됩니다.

• 선택한 snippet을 미리 보려면 Ctrl + Space 를 누르시면 됩니다.
• 선택한 snippet을 사용하려면 Tab을 누르시면 됩니다.