FE/HTML

VS Code(Visual Studio Code) 설치

kKkKkKWJ 2024. 6. 1. 09:24

*작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다.

VS Code(Visual Studio Code) 설치

- 파일 확장명 보이기

  1. 아무 폴더나 열어서 상단에 있는 ‘보기’탭을 누른다.
  2. 파일 확장명 체크박스를 선택한다.
  3. 파일의 확장명이 뜨는지 확인한다.

💡 개발을 진행할 때 파일의 확장명은 매우 중요하므로, 폴더에서 바로 확인할 수 있도록 설정한다.

 

- Visual Studio Code 다운로드

  1. 아래 사이트에 접속하여, 사용자의 환경에 맞는 버전을 설치한다.
    https://code.visualstudio.com/download
  2. 다운로드 받은 exe 파일을 실행하고, 별다른 설정은 없이 기본 설정으로 설정하면 된다.

 

- 작업폴더 생성하기

  1. 원하는 위치에 원하는 이름으로 폴더를 생성한다.
  2. Visual Studio Code에서 File - Open File…을 누른다. (단축키 : Ctrl+O)
  3. 선택한 폴더가 정확하게 선택되었는지 확인한다.

dev_study폴더의 HTML폴더에 HTML에 대한 실습 문제들을 저장하고자 한다.

 

 

- 새로운 HTML 파일 생성

  1. New File 아이콘을 선택하거나 Ctrl+N 단축키를 사용하여 새로운 텍스트 파일을 생성한다.
  2. File - Save As…을 누르거나 Ctrl+Shift+S 단축키를 사용하여 새로운 이름으로 저장한다.
  3. 저장할 때 파일 이름을 파일명.html로 저장하면, 자동으로 HTML파일이 생성된다.

💡 단축키를 이용하면 보다 쉽고 빠른 작업을 할 수 있다. 처음에는 손에 익지 않더라도 많이 연습해두자!

 

- 플러그인(Plug-in) 설치

  1. 왼쪽 탭의 가장 아래에 있는 아이콘을 누른다.
  2. 설치하고 싶은 플러그인을 검색한다.
  3. Install 버튼을 이용해 플러그인을 검색한다.

💡 플러그인을 설치하지 않아도 코드를 작성하는 것에 문제는 없다. 플러그인은 단지 코드를 작성하는 데 도움이 되는 추가 기능이다. 아래 플러그인 목록에서 설치하고 싶은 것만 골라서 설치하면 된다.

  • HTML 플러그인(Plug-in) 목록
    1. HTML Snippets
      HTML 코드를 작성할 때 자주 사용되는 코드 조각(스니펫)을 빠르고 편리하게 삽입할 수 있게 해준다.
    2. HTML Boilerplate
      HTML 기본 템플릿을 신속하게 생성할 수 있는 스니펫을 제공한다.
    3. Open In Default Browser
      코드 에디터에서 HTML 파일을 기본 웹 브라우저에서 직접 열 수 있는 기능을 제공한다.
    4. Open in browser
      코드 에디터에서 작성된 웹 파일을 웹 브라우저에서 쉽게 열 수 있도록 도와준다.
    5. Live Server
      로컬 서버를 통해 HTML 파일을 실시간으로 미리 보고 자동 새로 고침하는 기능을 제공한다.
    6. Eclipse Keymap
      이클립스 개발 환경에서 사용되는 단축키 구성을 Visual Studio Code에 적용한다.
    7. Bootstrap 5 & Font Awesome Snippets
      Bootstrap 5와 Font Awesome 관련 코드 스니펫을 제공하여 빠른 개발을 도와준다.
    8. Bootstrap 5 Quick Snippets
      Bootstrap 5를 사용할 때 필요한 HTML 스니펫을 신속하게 삽입할 수 있도록 돕는다.
    9. Bracket Pair Color DLW
      괄호 쌍을 서로 다른 색으로 표시해 가독성을 향상시켜준다.
    10. Bracket Pair Colorzation Toggler
      코드 내의 괄호 쌍 색상화 기능을 쉽게 켜고 끌 수 있게 해준다.
    11. Color Picker
      코드 내에서 색상 코드를 선택하고 수정할 수 있는 컬러 피커 도구를 제공한다.
    12. CSS Peek
      HTML 파일 내에서 클래스나 ID를 클릭하여 관련 CSS를 빠르게 조회할 수 있는 기능을 제공한다.
    13. HTML CSS Support
      HTML 파일 내에서 CSS 클래스나 ID의 자동 완성을 지원한다.
    14. indent-rainbow
      코드의 들여쓰기 레벨에 따라 색상을 다르게 해 가독성을 높여준다.
    15. Auto Close Tag
      HTML과 XML 파일 작성 시 자동으로 태그를 닫아주는 기능을 제공한다.
    16. Auto Rename Tag
      HTML 태그 수정 시 시작 태그와 종료 태그를 동시에 자동으로 수정해준다.
    17. Prettier - Code formatter
      코드를 자동으로 정렬해 일관된 스타일을 유지하도록 돕는 코드 포맷터이다. HTML, CSS, JavaScript등 다양한 언어를 지원한다.