Brackets 및 Visual Studio Code 사용법

Brackets 다운로드 받고 설치하기

• https://brackets.io/ 로 이동해서 Download 버튼 클릭
• 설치 파일이 다운로드 되면 따로 설정할 것 없이 설치하면 완료

 

에밋(emmet) 설치하기

• Brackets 실행 화면 오른쪽 상단에 두번째(번개 표시 아래 레고 모양) 아이콘 '확장 기능 관리자' 클릭(번개 표시 아래 레고 모양 아이콘)
• 설치 가능 탭에서 'Emmet' 검색해서 설치하면 완료
• 창을 끄고 Brackets 화면으로 나갔을 때 상단 메뉴에 'Emmet'이 설치되어 있음

 

Brackets 기본 사용법 및 필수 단축키 활용

• 에밋 단축키 참고 시트
• https://docs.emmet.io/cheat-sheet/ 

 

 

Visual Studio Code 사용법 및 환경설정

• https://code.visualstudio.com/ 에서 자신의 컴퓨터 OS에 맞는 설치 파일 다운로드
• 설치 화면에서 체크 항목은 모두 체크하기

 

프로그램 언어 한글로 바꾸기

• 비주얼 스튜디오 코드 실행 화면 왼쪽 상단 맨 아래(블록 모양) 아이콘 'Extension' 클릭
• 검색창에 '한국어' 검색 후 'Korean Language Pack for Visual Studio Code' 설치 후 프로그램 다시 시작

 

라이브 프리 뷰 설치

• 비주얼 스튜디오 코드 실행 화면 왼쪽 상단 맨 아래(블록 모양) 아이콘 'Extension' 클릭
• 검색창에 'Live Server' 검색 후 설치
• 자동저장 딜레이 조정: 기본 설정 > auto save로 검색 후 1000을 500으로 변경(빨라짐)

 

단축키 세팅

• 실행 화면 왼쪽 맨 아래(톱니 바퀴 모양) 아이콘 '관리' 클릭 > '바로 가기 키' 클릭
• 검색 창에서 단축키를 세팅하고 싶은 항목을 검색 후 연필 아이콘을 눌러서 원하는 단축키를 입력

 

 

Visual Studio Code에서 에밋 사용법

• 에밋 라이브러리 참고해서 자주 쓰는 명령어를 외워두면 편함
• https://docs.emmet.io/cheat-sheet