[FrontEnd]Visual Studio Code를 활용한 HTML 프로그래밍 환경 구축 방법

Visual Studio Code란 무엇인가요?

마이크로소프트에서 개발한 오픈소스 텍스트에디터입니다. 다양한 확장프로그램이 있으며 이를 활용해 프로그래밍을 더 쉽게 하실 수 있습니다. Visual Studio Code는 https://code.visualstudio.com/ 에서 설치가 가능합니다.

 

Visual Studio Code 설치 방법

1. https://code.visualstudio.com/ 에서 각 운영체제에 알맞은 프로그램을 설치합니다.
2. 라이선스 계약서에 동의합니다.
3. 추가 작업 선택
   1. 아이콘 추가:
      바탕 화면에 바로가기 만들기(D)
   2. 기타:
      "Code(으)로 열기" 작업을 Windows 탐색기 파일의 상황에 맞는 메뉴 추가 -> 윈도우 탐색기에서 파일을 Visual Studio Code로 열 수 있습니다.
      "Code(으)로 열기" 작업을 Windows 탐색기 디렉터리의 상황에 맞는 메뉴 추가 -> 해당 디렉터리의 모든 파일을 Visual Studio Code에서 열 수 있습니다.
      Code을(를) 지원되는 파일 형식에 대한 편집기로 등록합니다. -> Visual Studio Code로 파일을 열 수 있게합니다.
      PATH에 추가(다시 시작한 후 사용가능) -> 환경 변수에 추가합니다.
4. 이후 다음을 눌러서 설치를 누르시면 됩니다.

저는 모든 기타의 항목에 체크하고 설치했습니다.

 

Visual Studio Code 웹 프로그래밍에 필요한 확장 프로그램

왼쪽 위에서 다섯번째 아이콘(단축키 Ctrl + Shift + X)를 클릭하여서 Visual Studio Code에 확장 프로그램을 설치하실 수 있습니다.

• CSS Peek
• CSS Snippets
• ESLint
• HTML CSS Support
• Korean Language Pack
• Live Preview
• Live Server
• Prettier

위와 같은 확장 프로그램을 설치하여 웹 개발을 더욱 쉽게 하실 수 있습니다.