사이트 개발을 시작하는 즉시 사용할 수 있는 첫 번째 도구는 간편한 텍스트 편집기는 물론이고 지원합니다.
이번 에피소드에서는 Addy & Matt가 자사의 플러그인 모음을 살펴보고 Sublime Text를 통해 워크플로에 도움이 됩니다
패키지 제어
에피소드에서 참조된 패키지 (또는 플러그인)를 가져오려면 다음을 실행해야 합니다. 패키지 제어를 설치하면 설치할 수 있으며 방법은 여기를 참고하세요.
JSHint
JSHint는 JavaScript를 검사하는 JavaScript 린터입니다. 코드에서 발생할 수 있는 오류나 잘못된 관행을 강조표시합니다.
예를 들어, 변수 이름을 실수로 잘못 입력한 경우
아래에서 JSHint는 fo가 정의되지 않았으며
오류가 발생합니다.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
JSHint 플러그인 노란색 상자를 표시하여 문제가 있음을 알려줍니다. 커서를 코드에 배치하면 오류가 발생합니다. 메시지가 표시됩니다.
그 밖에 포착할 수 있는 문제는 다음과 같습니다.
- 정의되었지만 사용되지 않은 변수
- 루프 내부에 함수 생성 방지
- 올바른 비교 방법 사용
SublimeLinter-JSHint 패키지 설치 SublimeLinter 패키지도 설치하고 설치 안내를 따라 자세한 내용은 SublimeLinter-JSHint 패키지 페이지를 참조하세요.
일부 개발자는 JSHint 거터 사용할 수 있습니다 그러면 버튼에 작은 점을 JSHint 문제가 있는 줄의 여백입니다.
JSCS
JSCS는 자바스크립트가 특정 코딩 스타일을 따르지 않는 경우
예를 들어 JSCS를 사용하여 공백을 입력해야 하는지 여부를 정의할 수 있습니다. 'if'와 같은 키워드 뒤에 사용하거나 중괄호와 메서드의 같은 줄 또는 새 줄에 있어야 합니다.
SublimeLinter-JSCS 패키지 JSHint와 유사한 스타일로 문제를 인라인으로 강조 표시합니다. 문제를 쉽게 해결할 수 있습니다.
이것은 매우 유용한 모두가 같은 스타일 가이드와 코드를 일관성 있게 유지하세요
가장 좋은 점은 JSCS-Formatter 패키지를 사용하면 페이지의 문제를 자동으로 수정할 수 있다는 것입니다.
ctrl + shift + p를 누르고 'JSCS Formatter: Format this file'을 입력합니다.
Enter 키를 누르면 됩니다 에디의 블로그 게시물에서 자세히 알아보세요.
컬러 하이라이터
색상 형광펜 배경에 색상을 추가합니다. CSS 또는 Sass에서 색상을 정의하는 것이 좋습니다.
밑줄로 표시할지 여부를 정의할 수 있습니다. 전체 배경화면에 마우스를 가져가거나 항상 정의 배경에 색상을 표시합니다. 그냥 '패키지 설정' > '컬러 하이라이터' > '설정 - 기본값' 초기 설정을 확인하고 '설정 - 사용자'에서 설정을 변경할 수 있습니다.
전체 배경 강조 표시 '설정 - 사용자'에 다음을 추가합니다. 파일:
{
"ha_style": "filled"
}
거터 색상
거터 색상 컬러 형광펜의 대안인 색상 변수 위에 색상을 표시하는 대신 해당 선의 여백에 색상을 배치합니다.
색상 선택 도구
화면에서 색상을 빠르고 쉽게 선택해야 하는 경우 그런 다음 색상 선택 도구 패키지를 유용할 수 있습니다
ctrl + shift + c 키를 누르고 쿵쾅거리면 색상 선택 도구가 제공됩니다.
AutoFileName
AutoFileName 간단한 플러그인으로 입력할 때 사용 가능한 파일 목록이 표시됩니다. 완전 멋져요 이미지 이름을 입력하거나 시간 절약을 위해 CSS 또는 JS 파일 추가 무엇보다도 오타의 위험을 줄일 수 있습니다
자동 접두사
우리 모두는 스스로 깨달음의 순간을 경험했고 접두사가 있는 CSS 속성을 추가합니다. 다음으로 바꿉니다. 자동 접두사 CSS에서 실행하기만 하면 필요한 모든 접두사를 추가합니다.
그건 우리가 여기로 간다는 뜻이야...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
ctrl + shift + p 키를 누르고
'Autoprefix CSS' Enter 키를 누르면 됩니다
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
또한 원하는 브라우저 및 브라우저 버전도 정의할 수 있습니다. 패키지 설정에서 지원해야 합니다. 패키지 제어 페이지 확인 참조하세요.
더보기...
맥락적 해석의 토대가 되는 Sublime Text를 사용하므로 Package Control을 살펴보세요.
더 많은 조언과 팁을 얻으려면 WesBos의 슬라이드 자료를 확인해 보세요. 단축키 및 기타 Sublime Text 플러그인에 대해 자세히 알아보세요.
WesBos에서도 '고급 사용자를 위한 Sublime Text for the Power User' 여러분에게도 관심이 있으실 것입니다. :)