프런트 엔드 개발자 용 8 개의 강력한 Visual Studio 코드 확장

Microsoft는 불과 몇 달 전만해도 2016 년 3 월에 Visual Studio Code의 강력한 안정 버전 인 Visual Studio Code를 발표했지만 이미 다음 단계로 코딩 경험을 얻을 수있는 많은 확장 기능을 제공합니다. 그만큼 공식 Visual Studio 코드 확장 비주얼 스튜디오 코드 마켓 플레이스 (Visual Studio Code Marketplace)에서 호스팅되며, 많은 것들이 웹 개발자들에게 큰 도움이 될 수 있습니다..

이 게시물에서는 프론트 엔드 개발과 관련된 VS 코드 확장을 테스트하고 가장 많이 찾은 목록을 작성했습니다. 직관적이고 사용하기 쉽고 편리한. 그것은 모두가 궁극적 인 목록이 아닙니다. 시간을내어 시장을 직접 둘러보고 다른 훌륭한 기능을 제공 할 수있는 제품이 무엇인지 확인하십시오..

VS 코드 확장을 설치하는 방법

확장 기능을 설치하는 것은 Visual Studio 코드에서 매우 간단합니다. 코드 편집기 내에서해라.. VS 코드 마켓 플레이스에서는 모든 확장 프로그램마다 고유 한 페이지가 있으며,이 페이지 상단에 특정 확장 프로그램을 설치할 수있는 명령이 있습니다.

이 명령은 항상 내선 설치 기간. 확장 프로그램을 설치하려면 프레스 CTRL + P Quick Code (빠른 코드 열기) 패널을 시작하려면 VS 코드 안에, 이 명령을 복사하여 붙여 넣기하십시오. 그 안에, 그리고 마침내 코드 편집기를 다시 시작하십시오. 새로운 확장 작업을 만들기 위해.

8 개의 강력한 Visual Studio 코드 확장

HTML 스 니펫

Visual Studio 코드에 HTML을 자주 쓰려면 HTML 스 니펫 확장이 편리한 도구로 제공 될 수 있습니다. HTML에 대한 정교한 지원 추가. VS 코드는 HTML에 대한 기본적인 지원을 포함하지만 구문 색칠, HTML 스 니펫 확장 프로그램은 더 많은 것을 알고 있습니다..

아마도이 확장의 가장 유용한 기능은 HTML 태그의 이름을 입력하기 시작하면 (시작 꺾쇠 괄호없이), HTML 스 니펫 빠르게 목록을 표시하다 사용 가능한 옵션과 각 옵션에 대한 간단한 정보.

필요한 요소를 클릭하면 HTML 스 니펫이 가장 일반적인 속성을 포함한 전체 HTML5 태그를 추가합니다. 예를 들어 문서에 링크 (앵커 태그)를 추가하려면 에이 VS 코드에 팝업 상자에서 올바른 옵션을 선택하면 HTML 스 니펫이 필요한 아무 번거 로움없이 편집기에 미리보기.

이 확장 기능의 작성자는 사용되지 않는 요소를 제거하기 위해주의를 기울이기 때문에 팝업 목록에서 찾을 수없는 HTML 태그를 사용하려면 유효한지 여부를 확인해야합니다.
HTML CSS 클래스 완성

HTML CSS Class Completion은 많은 것을 사용해야하는 경우 유용한 확장이 될 수 있습니다. CSS 클래스 프로젝트에서 우리 개발자들은 종종 우리에게 정확한 명칭으로는 확실하지 않다., 그러나 그것은 수동적 지식으로 우리 마음의 뒤쪽에 있습니다..

이 스마트 확장 프로그램은이 문제에 대한 해결책을 제시합니다. 모든 CSS 클래스의 이름을 가져옵니다. 현재 작업 공간에.

예를 들어 Zurb Foundation을 사용하여 사이트를 만들고 작은 눈금을 사용하고자한다고 가정 해 보겠습니다. 클래스의 이름이 정확히 어떻게 기억되는지는 모르겠지만 의미 론적 이름이 있다는 것을 알고 있습니다..

HTML CSS Class Completion을 사용하면 단어 입력 만 시작하면됩니다. 작은, 사용 가능한 옵션이 화면에 즉시 나타나므로 원하는 것을 쉽게 선택할 수 있습니다.
브라우저에서보기

브라우저에서보기는 Visual Studio 코드의 간단하면서도 강력한 확장입니다. 프런트 엔드 개발을 용이하게 할 수 있습니다. 코딩하는 동안 브라우저에서 작업 한 결과를 빠르게 볼 수 있습니다.. VS 코드에서 직접 기본 브라우저로 HTML 파일을 열 수 있습니다. CTRL + F1 키보드 단축키.

브라우저에서보기 HTML 만 지원합니다., 따라서 사이트를보고 싶다면 HTML 파일을 열어야합니다. 당신 CSS 또는 JavaScript 파일에서 브라우저에 직접 액세스 할 수 없습니다..
Chrome 용 디버거

Chrome 용 디버거는 Microsoft 자체에서 제작되었으며 현재 가장 자주 다운로드되는 4 번째 Visual Studio 코드 확장입니다..

Chrome 용 디버거를 사용하면 코드 편집기를 종료하지 않고 Google 크롬에서 자바 스크립트 디버그. 즉 브라우저에서 볼 수있는 변환 된 JavaScript로 작업 할 필요가 없지만 원래 소스 파일에서 디버깅 권한을 수행한다.. 작동 방법을 보려면이 데모보기.

확장 기능에는 다음과 같이 필요한 모든 기능이 있습니다. 중단 점 설정, 변수 관찰, 스테핑, 에이 편리한 디버그 콘솔, 및 기타 여러 기능 (첫 번째 릴리스의 기능 목록 참조).

이 확장 프로그램을 사용하려면 다음과 같이 Chrome을 시작해야합니다. 원격 디버깅 사용, 적절한 설정 launch.json 파일. 이 작업은 잠시 동안 걸릴 수 있지만 GitHub에서 제대로 수행하는 방법에 대한 자세한 지침을 찾을 수 있습니다.
JSHint

Visual Studio Code의 JSHint 확장은 인기있는 JSHint JavaScript lint를 코드 편집기에 통합하여 커밋하자마자 오류에 대한 정보를 얻으십시오.. 기본적으로 JSHint 확장은 구성 파일을 사용하여 사용자 정의 할 수있는 기본 옵션을 사용합니다.

JSHint는 오류를 빨간색으로 표시하고 알림에는 녹색 밑줄을 표시하므로이 확장의 사용법은 매우 간단합니다. 문제에 대한 자세한 정보를 원하면 밑줄 친 부분 위로 마우스를 가져 가면 JSHint는 문제의 설명이 포함 된 레이블을 한 번에 떠있게됩니다.
jQuery 코드 스 니펫

jQuery 코드 조각은 Visual Studio 코드의 프론트 엔드 개발 속도를 크게 향상시켜 기본 구문 오류없이 jQuery를 빠르게 작성할 수 있으므로. jQuery 코드 스 니펫 현재 주변에있다. 사용 가능한 스 니펫 130 개 오른쪽 트리거를 입력하여 호출 할 수 있습니다..

모든 jQuery 스 니펫은 일곱 번째 접두사. 한 가지 예외는 기능 그걸 촉발시키다 익명의 함수를 편집기에 삽입한다..

이 편리한 확장은 적절한 구문에 대해 확실하지 않고 문서를 확인하는 시간을 절약하고자 할 때 편리한 도움말입니다. 또한 사용 가능한 옵션을 신속하게 스크롤 할 수 있습니다..
나무 그늘

Bower VS 코드 확장을 사용하면 Bower 패키지 관리자를 Visual Studio 코드에 통합하여 웹 개발 워크 플로를보다 직관적으로 만들 수 있습니다..

이 확장 프로그램을 사용하면 터미널과 편집기 사이를왔다 갔다 할 필요가 없다., Visual Studio 코드 내에서 패키지 관리 작업을 쉽게 수행 할 수 있습니다..

Bower 확장 기능은 프로젝트 생성을 안내합니다. bower.json 파일을 설치하고, 제거하고, 검색하고, 패키지를 업데이트하고, 캐시를 관리하고, 많은 다른 작업을 수행 할 수 있습니다 (전체 기능 목록 참조).

너는 할 수있다. 명령 팔레트를 시작하여 Bower 관련 명령에 액세스하십시오. 눌러서 F1, 타자 “나무 그늘” 입력 막대에 “나무 그늘” 드롭 다운 목록에서 적절한 Bower 명령을 선택하십시오..
힘 역사

힘 역사를 사용하면 Visual Studio 코드 내에서 Git 프로젝트의 변경 사항을 따르십시오.. 이 확장은 특히 더 큰 Github 프로젝트에 기여할 때 유용합니다. 다른 개발자가 만든 수정 사항을 빠르게 확인하는 방법이 필요합니다..

Git History 확장 프로그램을 설치하면 역사를 보아라. 전체 파일의 특정 선 그것의 내부. 당신은 또한 수 이전 버전 비교 같은 파일.

단어를 입력하면 Git History와 관련된 명령에 액세스 할 수 있습니다. “망할 놈” 커맨드 팔레트 (F1), 선택 “망할 놈” 드롭 다운 목록에서 원하는 명령을 선택하십시오. 유의 사항 파일을 열어야합니다. 어떤 작업을 수행하기 전에 내역을보고 싶습니까?.