VSCode 확장 프로그램 설치 종류

 

안녕하세요. 오늘은 HTML, CSS 등을 실행할 수 있는 코드 에디터에 대해서 글을 작성해볼까 합니다. 사실 HTML 언어의 경우 기본적으로 설치되어 있는 메모장을 통해서도 실행을 할 수 있습니다. 하지만 이용하기가 다소 불편한 감이 있어 저는 코드 에디터인 비주얼 스튜디오 코드(이하 VSCode)를 사용하려고 합니다.

 

https://code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

 

우선 위에 있는 링크로 들어가 다운로드를 받으시면 됩니다. 다운 방법은 간단하기에 생략합니다.

설치를 하고 나서 저는 VSCode 안에 있는 몇가지 확장 프로그램을 설치할 예정입니다. 

 

위의 사진 처럼 차례대로 누르 신 후 검색 창에 3번에 있는 것들을 모두 설치 해주었습니다.

 

1. Live Server

가상 서버를 통하여 작성한 HTML 코드를 실시간으로 확인을 할 수 있는 확장 프로그램입니다. 코드를 작성 후에 저장을 하게 되면 Live Server와 연동된 HTML 문서를 실시간으로 결과를 확인 할 수가 있습니다.

 

2. Auto Rename Tag

HTML 태그는 보통 시작(<>)과 끝(</>)으로 구성되어 있습니다. 태그명은 시작과 끝이 항상 같아야 하는데 해당 확장 프로그램을 설치하게 되면 둘 중 하나의 태그만 수정해도 다른 쪽이 자동으로 수정이 되게 설정을 할 수 있습니다.

 

3. Code Runner

Javascript 언어로 된 주제로는 지금 당장은 쓰진 않겠지만 해당 확장 프로그램은 VSCode 에디터 내부에서 자바스크립트 코드를 실행할 수 있게 해줍니다. 나중에 자바스크립트를 공부 할꺼니까 미리 설치를 하겠습니다.

 

4. HTML CSS Support

CSS 파일에서 작성한 아이디 및 클래스 값을 HTML 문서의 속성값을 자동으로 완성 시켜 주는 확장 프로그램입니다.

 

5. HTML to CSS autocompletion

4번과 비슷한 유형의 확장 프로그램으로 HTML 문서에서 class 속성으로 작성한 값을 자동으로 완성시켜 줍니다.

 

6. Korean Language Pack for Visual Studio Code

VSCode 코드 에디터의 메뉴와 설명을 한글로 변경해주는 확장 프로그램입니다. ( 저한테는 필수.. )

 

 

설치를 다 하셨으면 실행에 앞서, 기본 웹 브라우저를 크롬(Chrome)을 해주시기 바랍니다.

자 이제 그러면 저희는 이제 HTML, CSS, Javascript 까지 코딩을 할 수 있는 코드 에디터(VSCode)  확장 프로그램을 모두 설치를 완료하게 되었습니다. 다음 시간 부터는 실제로 코딩을 해보고 직접 실행시켜 보는 글을 작성해보겠습니다.

 

감사합니다.