01. [FE] VS code 기본 & 시작하기

VSCode 

 : 소스코드 편집기. 

   기본 디버깅 지원 및,  git제어, JavaScript, TypeScript, CSS, HTML 또한 기본으로 지원한다. 

   그 외에 '확장(extension)'기능을 통해 다운로드 받아서 언어및 기능 확장을 할 수 있다. 

 

---

기본 사용방법

• 바탕화면 등 원하는 곳에 '새폴더'를 생성해, 다음 기본화면 (시작하기 탭)에,
• 1. 드래그& 드롭을 통해 간단히 프로젝트 파일을 열 수 있다. 
• 이후 좌측 메뉴바 에서 폴더 구조를 확인할 수 있는데,
• 2. 좌측 메뉴바 상단의 아이콘에서, 파일&폴더를 추가할 수 있다.
• 파일 이름설정 할 때 확장자를 .html, .js, .txt 등등 으로 지정해 해당 언어로 작업할 수 있음

Extension

: VSCode 에서는, '확장' 탭에서 검색을 통해 손쉽게 확장프로그램을 다운받아 적용할 수 있다.

  이 Plug-in 대신, Extension 이라고 부른다. 

  웹개발에 필수적인 Extension 을 소개한다. 

  다음을 설치한 후, 코드작성 하는 것을 추천한다.

Live Server	Web 저장할 때 마다 새로고침 자동으로 하여, 결과를 실시간으로 볼 수 있음
Path Intellisense	이미지 / 파일 위치 가져올 때 자동완성 수행
IntelliSense for CSS class names in HTML	CSS 자동완성
Auto Close Tag	HTML 태그를 자동으로 닫아준다
Auto Rename Tag	HTML 태그를 수정할때 자동으로 변경해준다
Bracket Pair Colorizer	짝이 되는 괄호끼리 색을 칠해준다 (함수 괄호등)

 

설치방법

1. VSCode 화면 좌측 바의 가장 아래쪽 '확장 탭' 클릭
2. 원하는 extension 검색 후, '설치' 버튼클릭