VScode 프런트 엔드 플러그 인을 권장

자동 닫기 태그가 자동으로 태그를 닫는 HTML / XML을 추가
자동 이름 바꾸기 태그 이름 변경 자동으로 쌍 HTML / XML 태그
아름답게 서식 코드 [해야]
브라켓 쌍 Colorizer 색상 인식 일치하는 괄호를
코드 러너는 여러 언어로 실행할 수있는 매우 강력한 플러그인입니다 또는 코드 파일 : C, C ++, 자바, 자바 스크립트, PHP, 파이썬, 펄, 루비, 이동 , 그래서
설치가 완료된 후, 오른쪽 상단이 나타납니다 ▶
변경-케이스 VSCode 박스의 내장 만 텍스트 변환 옵션을,하지만 텍스트 대소 문자 변환. 이 플러그인과는 이름과 CONST_CAS 이름과 다른 snake_case, 밑줄로 구분 이름을 명명 혹을 포함하여 텍스트를 수정하는 데 더 명명 형식을 추가,
비주얼 중국어 (간체) 언어 팩을 스튜디오 코드 중국어 간체 언어 팩

일단, 설치 locale.json 추가 "locale": "zh-cn"중국어 (간체) 언어 팩을로드 할 수 있습니다. 수정하려면 locale.json, 당신은 누르면 Ctrl+Shift+P 열기 명령 패널의 "설정"을 입력 가능한 명령 목록을 선별 한 후, 마지막으로 선택한 구성 언어 명령을.

색상 정보이 편리한 플러그, 당신은 CSS 색상의 사용 당신에 대한 정보를 제공합니다. 당신은 단지 색상 위에 커서를 올려 놓으면, 당신은의 색상 모델 (HEX, RGB, HSL 및 CMYK)의 색상 정보를 미리 볼 수 있습니다
이 플러그인을 사용 CSS 픽을, 당신은 클래스와 ID의 CSS 스타일 시트의 정의를 추적 할 수 있습니다 장소. 당신은 HTML 파일에서 선택기를 마우스 오른쪽 버튼으로 클릭하면, 선택한 당신의 스타일에 대한 CSS 코드로 전송됩니다 옵션, "정의와 픽 정의로 이동"
크롬 디버거 프런트 엔드 디버거,
때 ESLint EsLint은 우리가 자바 스크립트 프로그래밍을 확인할 수 있도록 문법 오류. 예를 들어 자바 스크립트 응용 프로그램에서, 당신은 거의 변수 또는 누설 당신의 방법을 찾을 수 있습니다. EsLint JS 코드 분석은 우리가 버그를 발견하고 어느 정도의에 기록 된 JS 문법의 정확성을 보장하는 데 도움이 될 수 있습니다
또한 하단의 상태 표시 줄에 대한 자세한 생성, 수정 시간을 볼 수 있습니다 클릭, 현재 파일 크기를 표시 할 파일 크기를
차트의 망할 놈의 역사보기 자식 양식 로그인
GitLens - 망할 놈의 슈퍼 쇼 정보 확약과 현재 행의 저자 최근 파일을
HTML 템플릿 플러그인을 사용하여 HTML 상용구를, 당신은 - 다시 쓰기 머리와 몸 라벨 할 수있는 HTML 파일로 새로운 고통의 제거 얻을 것이다. 당신은 깨끗하고 문서 구조를 생성하기 위해, Tab 키를 빈 html 파일을 입력하고 눌러야
HTMLHint HTML 코드 형식 탐지
HTML 코드 완성 조각
선택한 태그 htmltagwrap HTML 태그 한 규정하고
"("Alt + W를 " 옵션 + Mac 용 W ")
미리보기 이미지를 통해 이미지 미리보기 마우스 경로에 표시되는
현재의 압입 깊이를 강조 Indenticator
HTML에서 스마트 팁의 이름으로 프로젝트의 HTML의 CSS 파일에 CSS 클래스 이름에 대한 인텔리
자바 스크립트 (ES6) 코드를 ES6 스 니펫 스 니펫
라이브 서버 브라우저 실시간 새로 고침
Node.js를가에서 자바 스크립트 / 타이프 라이터 모듈 가져 오기 문을 자동화하는 인텔리 모듈
NPM 인텔리 프롬프트 필요로 할 때 패키지
경로 인텔리 자동 전체 경로
Quokka.js 쿼카는 디버깅 도구입니다 플러그인은 작성중인 코드를 기반으로 실시간 제공 피드백
사용법 : Ctrl 키 + 시프트 + P 입력 쿼카는 새로운 자바 스크립트를 선택할 수 있습니다
이 리얼 타임 테스트 정규 표현식이다 유틸리티 정규식 미리보기를. 그것은 열려있는 모든 파일에 적용 정규 표현식 패턴, 그리고 모두가 일치 강조 표시 할 수 있습니다
, 당신은 편집기를 떠날 필요가 없습니다 당신이 SVG 파일을 열 수 있습니다이 플러그인은 비주얼 스튜디오 SVG 코드에서 유용한 프로그램의 번호를 추가 SVG 뷰어 그들을 볼 수 있습니다. 또한 PNG 형식으로 변환에 대한 옵션을 포함하고 데이터 URI 패턴 생성
Vetur 뷰 구문 강조, 문법 오류 검사, 코드 자동 완성 [해야] VUE 프로젝트
(와 더 나은 ESLint 플러그인 효과)
vscode-fileheader 최고 주석 템플릿은 저자, 시간 및 기타 정보를 정의 할 수 있으며, 자동으로 마지막으로 수정 한 업데이트됩니다
바로 가기 키 : Ctrl + Alt + I
(기본 정보는 파일 → 환경 설정 → 설정에서 변경 될 수 있습니다)

setting.json

{ 
    "window.zoomLevel": 1, 
    "terminal.integrated.shell.windows": "D : \\ 프로그램 파일 \\ 망할 놈의 \\ 빈 \\ bash.exe", //使用자식终端(直接显示当前分支) 
    "files.autoSave": "onFocusChange", 
    "[스크립트]"{ 
        "editor.defaultFormatter": "esbenp.prettier-vscode" 
    } 
    "git.autofetch"참 
    "fileheader.Author": "XXX" 
    "fileheader.LastModifiedBy": "XXX", 
    "prettier.semi"거짓, //结尾不加分号
    "prettier.singleQuote"사실, //单引号
    "vetur.format.defaultFormatterOptions": { 
        "예뻐" { 
          "반"거짓, // 포맷되지 않는 세미콜론 
          "singleQuote"사실 // 작은 따옴표로 포맷 기반 
        } 
      }
}

VScode 프런트 엔드 플러그 인을 권장

추천