VS 코드 프런트 엔드 구성

머리말

최근에는 프론트 엔드를 많이했는데 편리한 에디터를 찾을 수 없습니다. 나중에는 시도해 보겠다는 마음으로 vscode를 사용했는데, 사용한 후에는 vscode가 너무 nb 라고만 말할 수 있습니다. 몇 가지 vscode 플러그인의 구성과 만난 구덩이를 소개하겠습니다.

vscode 다운로드

다운로드를 클릭 하고 자신의 매칭 시스템을 선택하여 다운로드하십시오.
여기에 사진 설명 삽입

중국어 (simplifield) 플러그인 설치

이 플러그인은 VS Code 용 중국어 (간체) 언어 팩입니다.
다운로드 및 설치 후 vscode를 열고이 버튼을 클릭하고 중국어를 입력
여기에 사진 설명 삽입
여기에 사진 설명 삽입
하면이 페이지가 보이면 설치 버튼을 클릭합니다. 설치 후, 클릭 Ctrl+Shift+P. 볼
여기에 사진 설명 삽입
첫 번째를 클릭-CN에서 zh 다시 시작 vscode을 선택, 당신은 중국어 로케일 변경 내용을 볼 수 있습니다.
여기에 사진 설명 삽입

라이브 서버 플러그인 설치 (권장)

설치

Live Server는 실시간 재로드 기능이있는 소형 개발 서버입니다. HTML / JavaScript / CSS 파일을 핫로드하는 데 사용하지만 최종 웹 사이트 시스템을 배포하는 데는 사용할 수 없습니다.
간단한 프로젝트를 작성하거나 몇 가지 기술 연습을 배울 때 서버가없는 경우 코드를 작성할 때마다 브라우저를 수동으로 새로 고쳐야합니다. 조금 무력하지만이 라이브 서버 서버를 설치하면 수동으로 새로 고치지 않고도 작성한 코드를 실시간으로 미리 볼 수 있습니다.
같은 방법으로 플러그인 스토어에서 Live Server를 검색하여 다운로드하여 설치합니다. 확장 설정을 입력하려면 옆에있는 설정 아이콘을 클릭하십시오. 여기에 사진 설명 삽입
내 그림의 구성에 따라 일련의 설정 (기본 브라우저, 포트, 서버 주소)을 볼 수 있으며 비디오를 가르치는 데 문제가 없을 것입니다.

여기에 사진 설명 삽입
여기에 사진 설명 삽입
여기에 사진 설명 삽입

테스트

vs로 html 파일을 열고 GoLive를 클릭하면 웹 페이지가 팝업됩니다. 위의 URL에는 설정 한 URL 이름과 포트 번호가 있습니다.
여기에 사진 설명 삽입
여기에 사진 설명 삽입
그런 다음 html 파일을 변경하고 저장하십시오. 웹 페이지는 실시간으로 업데이트됩니다. 매번 열 필요가 없습니다.

브라우저 플러그인 설치 미리보기

이 플러그인도 같은 방식으로 설치됩니다. 대략적인 효과는 그림에 나와 있으며 vscode 측면에 html 효과를 표시합니다. 그러나 그것은보기 영역을 차지합니다.
여기에 사진 설명 삽입

브라우저 플러그인 설치에서 열기

이 플러그인도 같은 방식으로 설치됩니다. 설치 후 구성을 확장하고 기본 브라우저를 설정하십시오. alt + B창을 불러올 수는 있지만 실시간으로 업데이트되지 않으며 매번 웹 페이지를 다시 열어야합니다.

전원 모드 플러그인 (커서 효과)

일반적인 커서는 수직선으로 이미 불안한 삶에 지루한 삶을 더합니다. 전원 모드 플러그인은 프로그래밍 생활에 색감을 더 해줍니다.
전원 모드 플러그인을 설치하고 확장 설정을 열고 하단에 자신 만의 커서 효과를 설정합니다.
여기에 사진 설명 삽입
여기에 사진 설명 삽입
현재 5 가지 특수 효과 옵션이 있습니다.

추천

출처blog.csdn.net/m0_43456002/article/details/105874973