HTML CSS ECMAScript

개발 환경(Visual Studio Code)설정

Visual Studio Code(이하 VSCode) 설치

• 검색창에 Visual Studio Code를 검색한다.

  ❊ 검색 결과 중 Visual Studio Ide는 다른 툴이므로 해당 툴을 선택하지 않도록 주의 한다.

• Visual Studio Code 페이지 내의 Download for Mac (또는 Download for Windows) 버튼을 클릭하여 압축을 해제하고 설치한다.

Mac 터미널에서 code . 명령으로 VSCode 열기를 설정하려면, VS Code 실행 후 F1(또는 ⌘+⇧+P) 입 력 후, 셀명령: PATH에 ‘code’ 명령 설치를 선택한다. ⌘ + [+ / -] 키를 누르면 화면을 확대 / 축소 할 수 있다.Show All Commands: [⇧ +⌘ + P]

❊ 아래쪽의 보라색 상태바: 아무런 프로젝트도 열려 있지 않는 경우

❊ 프로젝트가 시작되지 않으면 하단의 상태바가 보라색이다. 파일→오픈→디렉터리 선택 후 열기 버튼을 누르면 아래쪽 상태바가 파란색으로 변경 된다.

❊ 프로젝트 단위는 파일이 아닌 폴더 이다.

파일과 폴더의 생성

• 사이드바의 탐색기 영역이 보아지 않는다면 화면 액티비티바[화면 왼쪽의 세로로 긴 아이콘 모음]의 탐색기 아이콘을 클릭 하거나, 단축키 ⌘+B를 누른다.
• 사이드바의 탐색기 영역을 클릭하면, 새파일, 새폴더, 탐색기 새로고침, 모든파일 닫기 아이콘을 확인할 수 있다.
• 파일을 생성하려면 새파일 아이콘을 누르고 파일명을 입력 합니다. (⌘+N 버튼을 눌러서 새파일을 생성하고 저장하기에서 파일이름을 입력해도 된다.)
• 폴더를 생성할 때는 탐색기 영역에서 “새폴더” 아이콘을 클릭하여 폴더명을 입력 한다.

Extensions[확장] (플러그인)사용

Prettier 설치

• 액티비티바의 Extensions(확장) 아이콘을 클릭한다.
• 한글로 된 메뉴를 사용하고자 한다면 상단의 검색 창에서 Korea를 입력하여 “Korean Language Pack for Visual Studio Code”를 설치한다.
• 같은 방법으로 코드 포멧터인 Prettier 를 검색 하여 설치한다.
• 사용 방법은 ⇧ + ⌥ + F 단축키를 사용하거나, 모든 명령표시를 [⌘ + ⇧ + P ] 에서 문서서식 [ Format Document]를 선택한다.

Auto Rename Tag 설치

• html 태그의 열기태그를 변경하면, 닫기 태그를 자동으로 변경해 주는 플러그인