가장 날 카 로 운 Visual Studio 웹 개발 도구 확장:웹 Essentials 사용 설명

우선,Extension Manager 에서 설치:최신 버 전 은 19 일 에 발 표 된 2.5 버 전 입 니 다.

그리고 VS 개발 환경 을 다시 시작 하면 편리 한 기능 을 사용 할 수 있 습 니 다.
Web Essentials 는 CSS,JavaScript,HTML 에 대해 많은 빠 른 기능 지원 을 제공 합 니 다.구체 적 인 목록 은 다음 과 같 습 니 다.
CSS
실시 간 미리보기 라 이브 웹 미리보기
수정 할 때마다 CTRL+ALT+Enter 단축 키 를 사용 하거나 프로젝트 오른쪽 단추 에 있 는 Live Web Preview 옵션 을 누 르 면 수정 한 페이지 를 즉시 미리 볼 수 있 습 니 다.HTML 이나 해당 CSS 를 수정 할 때마다 Ctrl+S 가 저장 되면 즉시 창 이 적 용 됩 니 다.

호환성 CSS 코드 생 성
많은 CSS 3 코드 가 호 환 되 지 않 습 니 다.브 라 우 저 마다 언어 가 다 릅 니 다.이 확장 자 를 사용 하면 향상 되 는 방식 으로 특수 한 CSS 표 시 를 자동 으로 추가 할 수 있 습 니 다.예 를 들 어-moz,-webkit,-ms and-o 로 시작 하 는 일부 CSS 도 특정한 브 라 우 저 만 선택 할 수 있 습 니 다.

생산 된 코드 결 과 는 다음 과 같다.

일 부 를 추가 했다 면 이 확장 자 는 이 부분 을 제외 한 CSS 코드 만 추가 하고 중복 추가 되 지 않 습 니 다.
 
 
상하 화살 표 는 숫자 값 을 바 꿀 수 있다.
키보드 프롬프트 를 숫자 나 숫자 뒤에 놓 으 면 5px,25%,0.6em,23 등 CTRL+UP 또는 CTRL+DOWN 을 사용 하여 수 치 를 증가 하거나 줄 일 수 있 습 니 다.

CSS,SaSS,LESS,JavaScript 파일 지원
 
 
URL 주소 대신 Base 64 형식의 문자열 을 만 들 수 있 습 니 다.
url 을 통 해 배경 그림 을 참조 하면 이 확장 을 통 해 제공 하 는 Embed resource as base 64 기능 을 직접 참조 하여 base 64 형식 으로 변환 할 수 있 습 니 다.

내용 이 너무 길다 고 의심 되면 접 기 기능 을 사용 할 수 있다.

 
 
단축 키 주석 과 주석 반대 코드 지원
CTRL+K,CTRL+C 주석 이나 CTRL+K,CTRL+U 주석 코드 를 사용 할 수 있 습 니 다.VS 리 C\#프로 그래 밍 에 사용 되 는 단축 키 와 같 습 니 다.
 
 
TODO 주석 특수 지원
모든 설명 이 TODO 키 워드 를 포함 하면 왼쪽 에 회색 특수 표 시 를 표시 하여 이 부분 이 아직 완성 되 지 않 았 음 을 알려 줍 니 다.

 
색상 미리 보기
마우스 가 색상 으로 이동 할 때 색상 변경 을 미리 볼 수 있 거나 CSS 편집기 에서 도 색상 을 직접 미리 볼 수 있 습 니 다.


 
 
글꼴 미리 보기

 
 
그림 미리 보기

 
 
접 기 기능
생명의 선택 기 가 필요 합 니 다.오른쪽 단 추 를 누 르 면 Surround With Region 을 볼 수 있 습 니 다.이 코드 를 접 을 수 있 습 니 다.

기능 을 선택 하면 기본 MyRegion 이름 으로 자동 으로 위치 하고 접 는 대강 의 이름 을 수정 할 수 있 습 니 다.

 
 
문자 정렬
임의의 선택 기 를 누 르 면 이 선택 기의 CSS 정 의 를 정렬 할 수 있 습 니 다.

 
 
괄호 일치
현재{},[],()의 매 칭 을 지원 합 니 다.
 
 
압축 코드
이 확장 자 는 CSS 코드 를 압축 하기 위해 AjaxMin library 를 사용 합 니 다.

 
 
코드 접 기

 
 
드래그 지원
그림 과 글꼴 의 드래그 를 지원 합 니 다.예 를 들 어 tomxu.jpg 그림 을 이 CSS 선택 기 에 끌 면 다음 코드 가 자동 으로 생 성 됩 니 다.(글꼴 도 유사 합 니 다)
background-image: url('../tomxu.jpg');
 
 
색상 은 16 진수,rgb,이름 에서 직접 바 꿀 수 있 습 니 다.

 
 
선택 기 에서 어떤 브 라 우 저 버 전 만 지원 하 는 지 정의 할 수 있 습 니 다.

 
 
CSS 문법 에서 어떤 브 라 우 저 버 전 만 지원 하 는 지 정의 할 수 있 습 니 다.

 
 
JavaScript
지역 접 기 지원
//#region MyRegion
function Example() {
}
//#endregion
 
 
지원 코드 접 기

 
 
괄호 일치
현재{},[],()의 매 칭 을 지원 합 니 다.
 
 
높다
한 파일 의 모든 코드 에서 변 수 를 선택 하면 이 코드 의 모든 같은 변 수 는 C\#와 같이 하 이 라이트 로 표 시 됩 니 다.
 
 
압축 코드
AjaxMin library 를 사용 하여 압축 코드 를 만 들 었 습 니 다.압축 뿐만 아니 라 헷 갈 리 는 소 도 사 용 했 습 니 다!
 
 
바로 가기 파일 추가
솔 루 션 에 새 항목 을 추가 할 때 자바 스 크 립 트 파일 을 추가 할 지,아니면 Stylesheet 파일 을 추가 할 지 직접 선택 할 수 있 습 니 다.편리 합 니 다!

 
 
HTML
사용자 컨트롤 드래그 지원
예전 에 asp.net webform 을 개발 할 때 user control 을 마우스 로 aspx 페이지 나 템 플 릿 용기 에 끌 어 다 놓 을 때 자동 으로 a 연결 이 생 성 되 었 습 니 다.이 확장 을 사용 하면 자동 으로 이름 컨트롤 을 등록 한 다음 에가 있 는 코드 를 생 성하 여 직접 사용 할 수 있 습 니 다.
 
 
비디오 와 오디 오 파일 드래그 지원
오디 오 와 비디오 파일 에 대한 드래그 도 지원 합 니 다.
이상 의 이 가장 날 카 로 운 Visual Studio 웹 개발 도구 확장:웹 Essentials 사용 에 대한 상세 한 설명 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주시 기 바 랍 니 다.