vscode 입문 튜 토리 얼 페이지 시작 및 코드 디 버 깅

vscode 를 처음 사용 할 때 여러 가지 적응 이 안 되 고 필요 한 모든 기능 은 플러그 인 을 따로 설치 해 야 사용 할 수 있 는 것 같 습 니 다.이것 은 vscode 를 처음 사용 하 는 많은 친구 들 로 하여 금 어 쩔 줄 모 르 게 한다.
다음은 저 는 여러분 을 데 리 고 vscode 를 어떻게 사용 하여 가장 기본 적 인 작업 을 하 는 지 배 워 보 겠 습 니 다.페이지 시작 과 코드 디 버 깅
1.vscode 설치(설 치 된 친 구 는 무시 하고 두 번 째 단 계 를 진행 합 니 다)
홈 페이지 다운로드 주소:https://code.visualstudio.com/docs/?dv=win
몇 초 만 기다 리 면 다운로드 상자 가 자동 으로 팝 업 됩 니 다.
중국어 플러그 인 설치
vscode 는 기본적으로 영어 메뉴 입 니 다.중국어 로 표시 하려 는 친 구 는 플러그 인[Chinese(Simplified)Language Pack for Visual Studio Code]를 검색 할 수 있 습 니 다.그림 참조:

설치 후 다시 불 러 오 거나 vscode 를 다시 시작 하면 중국어 로 메뉴 를 표시 할 수 있 습 니 다.
페이지 디 버 깅
1.launch.json 설정

설정 이 끝 난 친 구 는 서둘러 시도 하지 마 십시오.녹색 시작 단 추 를 누 르 면 디 버 깅 이 시 작 된 후에 페이지 가 열 리 지 않 고 브 라 우 저 링크 가 실 패 했 음 을 알 립 니 다.
이 때,아 날로 그 서버 에서 페이지 가 실행 되 고 표시 되 는 것 을 지원 하기 위해 apache,iis 와 같은 서버 플러그 인 을 설치 해 야 합 니 다.
2.플러그 인 설치[라 이브 서버]
이것 이 바로 위 에서 언급 한 지원 페이지 가 아 날로 그 서버 에서 실행 되 는 플러그 인 입 니 다.그림 참조:

설치 가 완료 되 었 습 니 다.왼쪽 에[다시 불 러 오기]알림 이 있 으 면 이 단 추 를 누 르 면 다시 불 러 옵 니 다.
3.html 페이지 를 열 어 디 버 깅 테스트
기초 작업 이 모두 준비 되 었 습 니 다.이때 디 버 깅 모드 는 두 가지 가 있 습 니 다.
로 컬 정적 페이지 디 버 깅 사용 하기:
자신 이 설정 한 테스트 옵션 을 선택 하고 디 버 깅 할 페이지 를 열 고 F5 를 누 르 면 디 버 깅 을 시작 합 니 다.그림 과 같 습 니 다.


서버 형식 으로 디 버 깅 하기:
이때 우리 가 설치 한 live server 가 도움 이 되 었 습 니 다.마찬가지 로 디 버 깅 할 페이지 를 열 었 습 니 다.마 우 스 는 페이지 의 임의의 곳 에서 단일 기 를 오른쪽 클릭 하고"Open with live server"를 선택 하 십시오.그림 과 같 습 니 다.


이때 우리 가 vscode 를 사용 하여 코드 디 버 깅 을 하려 는 수 요 는 여기까지 이미 큰 성 과 를 거 두 었 습 니 다!!!
마지막 으로 예 쁜 vscode 파일 아이콘 테마 플러그 인 을 추천 합 니 다:[Material Icon Theme]
효 과 는 그림 과 같다