vscode 설치 에 사용 되 는 상세 한 튜 토리 얼

1.vscode 가 무엇 입 니까**
    Visual Studio Code(VS Code/VSC 로 약칭)는 무료 로 개 원 된 현대 화 된 경량급 코드 편집기 로 거의 모든 주류 개발 언어의 문법 하 이 라이트,스마트 코드 보완,사용자 정의 단축 키,괄호 일치,코드 세 션,코드 대비 Diff,GIT 등 특성 을 지원 하고 플러그 인 확장 을 지원 하 며 웹 개발 과 클 라 우 드 응용 개발 을 최적화 시 켰 다.소프트웨어 크로스 플랫폼 은 Win,Mac,Linux 를 지원 합 니 다.
vscode 홈 페이지:https://code.visualstudio.com/
2.Vscode 버 전
현재 최신 버 전 1.27 2018 년 8 월
버 전 목록:https://code.visualstudio.com/updates/v1_27
3.Vscode 다운로드
다운로드 주소:https://code.visualstudio.com/Download
.zip 압축 해제 버 전 을 다운로드 할 수 있 습 니 다.압축 해제 버 전 을 다운로드 하면 사용 할 수 있 습 니 다.【전자 로 포장 한 거 예요.
설치 판 실행 가능 한 프로그램 도 다운로드 할 수 있 습 니 다.설치 후 많은 것 을 설정 할 필요 가 없습니다.
4.한 화 vscode
f1 검색 Configore Display Language 설정 zh-cn 을 누 르 면 소프트웨어 를 닫 고 다시 시작 합 니 다.

주의:
재 부팅 후에 도 영어 로 되 어 있 으 면 상점 에서 설 치 된 플러그 인 을 보고 중국어 플러그 인 Chinese(simplified)를 다시 설치 한 다음 소프트웨어 를 다시 시작 하면 됩 니 다.

한 화 성공:

5.몇 가지 상용 명령 설명

주의 하 다.
1.Ctrl+shift+F 파일 에서 찾기,동시에 바 꿀 수 있 습 니 다.어떤 파일 에 있 는 지,어떤 파일 을 제외 할 지 등 도 지정 할 수 있다.
2.단축 키 Ctrl+`을 통 해 명령 창 을 vscode 에 열 수 있어 사용 하기에 편리 합 니 다.
3.우 리 는 vscode 를 설치 한 후 임의의 항목 디 렉 터 리 에서 마우스 우 클릭 으로 이 항목 을 서버 에서 열 수 있 습 니 다.(만약 당신 이 이미 창 을 열 었 다 면,그 는 새 창 을 열 것 입 니 다)
왼쪽 아이콘 설명

7.기본 사용
1.프로젝트 폴 더 를 소프트웨어 에 직접 끌 어 옵 니 다.
    방식 1:작업 영역 에 끌 어 다 놓 기(그러면 현재 및 열 린 항목 폴 더 를 유지 합 니 다)
    방식 2:작업 영역 오른쪽 창 에 끌 어 다 놓 으 면 끌 어 다 놓 은 창 이 원본 과 열 린 창 을 덮어 씁 니 다.
(이 때 vscode 는 다음 에 이 파일 을 열 수 있 도록 원래 작업 영역 정 보 를 저장 할 파일 을 저장 하 느 냐 고 물 을 것 입 니 다)
메모:왼쪽 폴 더 에 대해 서 는 바로 단축 키 로 붙 여 넣 기 등 을 복사 할 수 있 습 니 다.
2.vscode 에 프로젝트 폴 더 만 들 기

3.포맷 코드
코드 에서 오른쪽 메뉴 를 누 르 면 포맷 등 기능 옵션 이 팝 업 되 고 참조 찾기 등 메뉴 도 정의 되 어 있 습 니 다.
4.브 라 우 저 에서 웹 페이지 열기
1.파일 프로 토 콜 형식 으로 파일 열기
설치 플러그 인:기본 브 라 우 저 에서 HTML 열기
특징.
기본 브 라 우 저 로 HTML 파일 을 엽 니 다자원 관리자 에서 HTML 파일 오른쪽 단 추 를 누 르 면 브 라 우 저 에서 메뉴 를 엽 니 다편집기 에서 HTML 파일 을 오른쪽 단추 로 표시 합 니 다

브 라 우 저 에서 메뉴 를 열 면 여러 페이지 를 동시에 열 수 있 습 니 다

작업 영역 항목 에서 오른쪽 메뉴 를 누 르 면 자원 관리자 에서 파일 을 여 는 옵션 을 볼 수 있 습 니 다.
2.서버 형식 으로 파일 열기
방식 1:
    live server 플러그 인 을 설치 하고 다시 불 러 오 거나 vscode 를 다시 시작 한 다음 마우스 오른쪽 단 추 를 누 르 면 서버 에서 열 수 있 습 니 다.
이 모드 를 열 면 자동 으로 페이지 를 새로 고 칩 니 다.
방식 2:
    1.단축 키 누 르 기:Ctrl+`명령 행 터미널 열기,cnpm install live-server-g 실행
    2.설치 후 매번 실행 하려 면 터미널 을 열 고 live-server 를 실행 하면 됩 니 다.
    3.live-server 를 사용 하면 전체 사 이 트 를 서버 에 엽 니 다.현재 어떤 디 렉 터 리 를 찾 든 지 간 에 그 가 연 것 은 기본 홈 페이지 파일 입 니 다.예 를 들 어 index.html
    4.루트 디 렉 터 리 에 폴 더 가 가득 하거나 index.html 등 기본 홈 페이지 파일 이 없 으 면 서버 에 선택 할 폴 더 가 표 시 됩 니 다.
예:

    5.live-server 를 닫 으 려 면 콘 솔 에서 아래 ctrl+c 를 실행 한 다음 y 를 입력 하여 확인 하면 닫 을 수 있 습 니 다.
    6.Live-server 는 임의의 항목 루트 디 렉 터 리 에서 터미널 창 을 열 고 live-server 를 입력 하면 현재 항목 을 서버 에서 열 수 있 습 니 다.
    7.서버 로 열 린 모드 에서 파일 내용 을 변경 한 후 저장 하면 브 라 우 저 는 자동 으로 새로 고침 되 며 브 라 우 저 에서 새로 고침 할 필요 가 없습니다.
방식 3:
    http server 플러그 인 을 설치 할 수도 있 습 니 다.설치 가 완료 되면 f1 을 누 르 고 http 를 입력 하면 다음 두 가지 옵션 을 볼 수 있 습 니 다.with current file 을 선택 하면 현재 파일 을 실행 할 수 있 는 서버 를 만 들 수 있 습 니 다.다른 하 나 는 현재 디 렉 터 리 에 있 는 index.html 를 찾 아 엽 니 다.

하 나 를 선택 하면 브 라 우 저 에서 열 지 vscode 에서 열 지 선택 할 수 있 습 니 다.
기타
    이 모듈 을 전역 적 으로 설치 할 수 있 습 니 다[cnpm install http-server-g]
전역 에 설치 후:터미널 에 hs 를 입력 하면 사용 할 수 있 습 니 다.
8.플러그 인 설치
설치 및 마 운 트 해제
4.567917.설치:왼쪽 맨 아래 에 있 는 아이콘 은 검색 플러그 인 을 클릭 하여 설치 하면 됩 니 다4.567917.마 운 트 해제:같은 곳 에서 플러그 인 을 찾 아 마 운 트 해제 하면 됩 니 다    플러그 인 을 설치 한 후 효 과 를 볼 수 없다 면 vscode 를 다시 시작 하거나 다시 불 러 오 십시오.
상용 플러그 인:
1.HTML Boilerplate
   HTML 모드 플러그 인 을 사용 하면 HTML 새 파일 의 머리 와 본문 탭 을 다시 만 드 는 고민 에서 벗 어 날 수 있 습 니 다.빈 파일 에 html 를 입력 하고 html:5 를 선택 하면 새로운 웹 파일 을 만 들 수 있 으 며 느낌표 도 입력 할 수 있 습 니 다.
2.browser-plus
편집기 에서 HTML 미리 보기
    포트 열기(10086)를 통 해 현재 열 린 항목 의 루트 디 렉 터 리 를 감청 하고 편집기 에서 웹 사 이 트 를 미리 보 며 브 라 우 저,편집기 에서 페이지 효 과 를 자주 전환 하지 않 고 코드 를 수정 한 후 자동 으로 페이지 를 새로 고 칩 니 다.
사용 방법
윈도우 Ctrl+F1,기본 10086 포트 미리 보기 페이지
3.CSS Peek
    이 플러그 인 을 사용 하면 스타일 시트 의 CSS 클래스 와 ids 가 정의 하 는 곳 을 추적 할 수 있 습 니 다.HTML 파일 에서 선택 기 를 오른쪽 단추 로 눌 렀 을 때'Go to Definition 과 Peek definition'옵션 을 선택 하면 스타일 설정 의 CSS 코드 를 보 냅 니 다.
4.Color Info
    이 편리 한 플러그 인 은 CSS 에서 사용 할 색상 에 대한 정 보 를 제공 합 니 다.색상 에 커서 를 걸 면 색상 블록 에 있 는 색상 모델(HEX,RGB,HSL,CMYK)에 대한 정 보 를 미리 볼 수 있 습 니 다.
5.Auto Close Tag
    HTML/XML 태그 자동 닫 기
6.Auto Rename Tag
    다른 쪽 탭 의 동기 화 수정 을 자동 으로 완료 합 니 다.
7.HTML Snippets
    스마트 알림 HTML 태그 및 태그 의미 JavaScript(ES6)code snippetses ES6 문법 스마트 알림 및 빠 른 입력 은.js 뿐만 아니 라.ts,.jsx,.tsx,.html,vue 도 지원 합 니 다.각종 js 코드 파일 을 포함 하 는 시간 을 절약 합 니 다.
8.Path Intellisense
    파일 경 로 를 자동 으로 알려 주 고 다양한 빠 른 도입 문 을 지원 합 니 다.
9.jQuery Code Snippets
jQuery 코드 지능 알림
10.Icon Fonts
    프로젝트 에 아이콘 글꼴 을 추가 할 수 있 는 플러그 인 입 니 다.이 플러그 인 은 Font Awesome,Ionicons,Glyphicons,Material Design Icons 등 20 개가 넘 는 인기 아이콘 집합 을 지원 합 니 다.
less 파일 을 css 파일 로 자동 으로 컴 파일 합 니 다:
    플러그 인 Easy LESS 설치,자동 컴 파일 저장,설정 필요 없 음(기본 값 은 현재 디 렉 터 리 로 컴 파일)
    서로 다른 파일 이름 의 css 파일 로 컴 파일 해 야 한다 면 less 파일 의 맨 위 에 주석 을 한 줄 추가 하면 됩 니 다://out:new-file.css
총결산
이 vscode 설치 사용 에 관 한 상세 한 튜 토리 얼 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 vscode 설치 사용 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!