Qiita의 내용을 모아 책으로 대폭 수정·가필한 것을 출간했다.
→ 블로그: Brackets의 해설서가 출판되었다

이른바 Brackets

웹에 따른 차세대 웹 편집기

Brackets 자체가 HTML·CSS·Javascript로 웹 기반 웹 편집기라고 할 수 있다.
오픈 원본 코드로 업데이트도 활발하게 진행되며 2.5주마다 진행된다.
→ Sprint에서 공식 버전으로 바뀌면서 업데이트 간격이 늘어난 것 같다.

텍스트 편집기와 IDE 사이

기본적으로 현장 미리보기가 있고 Adobe 공식 확장을 통해 PSD를 읽을 수 있으며 기능은 높지만 IDE처럼 기능이 많지 않고 동작도 무겁지 않다.
매우 균형 잡힌 간단한 텍스트 편집기와 고기능 IDE가 바로 중간에 있는 인상이다.

Adobe 지원

Adobe가 프로젝트를 설립했고 GiitHub의 창고도 Adobe가 관리한다.
공식 판본.1.0부터 Creative Cloud Extract 확장도 지원되며, PSD에서 다양한 정보를 추출할 수 있어 매일 진화하고 있다.
(기능 소개→PSD 읽기, 다양한 정보 추출

기능 소개

개시하다

Brackets는 기본적으로 UTF-8 이외의 문자 코드를 지원하지 않기 때문에 ShiftJIS를 비롯한 다른 문자 코드에 대응하기 위해서는 추가 Shizimily Multiencoding for Brackets 확장이 필요합니다.

현장 미리보기(크로스오버 브라우저 지원)

확장하지 않아도 기본적으로 현장 미리보기를 할 수 있다.(Chrome 필요)
HTML/CSS는 파일을 저장할 필요가 없고 실시간으로 저장할 수 있으며 SASS(터미널에watch를 설치해야 함)/JS는 파일을 저장할 때 변경 사항을 반영합니다.
Ver.1.1 크로스오버 브라우저의 현장 미리보기를 지원합니다.

설정 방법
디버그 > 환경 설정 파일을 열면 설정 파일(Win의 경로는 C:\Users\사용자 이름\AppData\Roaming\Brackets\brackets.json)에만 추가"livedev.multibrowser": true됩니다.
실시간 미리 보기가 시작되면 기본 브라우저에서 열리며 다른 브라우저에서 URL을 입력하기만 하면 됩니다.
(죄송합니다. 2014/12/19 현재 IE 11에서 실행되지 않습니다. Chrome Firefox, Opera가 확인 중입니다.)

빠른 편집

Brackets의 빠른 버전은 주로 4가지가 있다.
바로 가기는 Ctrl+E에서 공통으로 사용되며 실행할 위치에 따라 각 빠른 편집이 확장됩니다.

HTML의 빠른 편집
id 이름/class 이름/HTML 탭 이름에서 실행하면 적용 가능한 스타일을 선택하여 편집할 수 있습니다.
Sublime Text 플러그인 GoTo-CCS-Declation과 달리 CSS 파일을 미리 열 필요가 없습니다.

색상 지정 빠른 편집
다양한 파일에서 HEX/RGB(A)/HSL(A) 색상이 지정된 곳에서 실행하면 팔레트가 열립니다.
트레이에서 편집한 값은 실시간으로 수치로 반영됩니다.

CSS 애니메이션의 빠른 편집
CSS/LESS/SCSS에서 cubic-bezier() 또는 steps()에서 애니메이션이 정의한 곳에서 실행하면 베젤 곡선 기반 편집 화면이 열립니다.

자바스크립트 함수의 빠른 편집
JavaScript 함수 이름에서 를 실행하면 해당 함수의 컨텐트가 확장됩니다.

뷰 동기화

이미지와 색상이 지정된 두 가지 빠른 뷰를 지정하고 커서를 각각 지정된 위치에 놓으면 표시 정보가 팝업됩니다.
특히 그림은 가로대에서만 width/height 값을 확인할 수 있어 매우 편리하다.

이미지의 스냅샷

색상으로 지정된 빠른 보기

코드 힌트

Brackets 표준은 HTML/CSS/JS의 코드 힌트를 탑재하고 있다.
각 비헤이비어는 문자를 입력하는 동안 코드 힌트가 표시되고 다시 표시하려면 Ctrl+Space를 누릅니다.

HTML의 코드 힌트

CSS에 대한 코드 힌트

Ver.1.2 색상을 지정할 때 미리 볼 수 있습니다.

JS의 코드 힌트

PSD 읽기, 다양한 정보 추출

연장이지만 Ver.1.0에서 설치 프로그램까지의 표준에 추가된 아주 좋은 기능입니다.
PSD를 Brackets에 직접 읽기

각 층의 width/height 값 획득

인접 상자와의 상대 거리 획득

응용 프로그램의 스타일을 CSS

로 가져오기

선택층을 즉석에서 이미지 슬라이스로 하고 HTML/CSS

에 직접 반영
이 정도면 됐어.
상세한 상황은 이쪽 보도에서 별도로 설명한다.
→ 텍스트 편집기에서 PSD를 여는 시대!차세대 도구 Extract for Brackets 사용 방법

빠른 문서

CSS 등록 정보에서 Ctrl+K 키를 누르면 문서가 표시됩니다.
영어지만 개요와 수치 설정 등을 즉석에서 간단히 확인할 수 있다.

확장을 통해 다른 언어의 문서를 추가할 수 있습니다.
예, 설명)

QuickDocsJS

QuickDocsPHP

프로젝트 루트

Brackets에서 지정한 디렉터리는 자동으로 프로젝트 루트가 되기 때문에 정식 환경을 구상하는 경로 지정으로 개발할 수 있습니다.

또한 로컬 서버를 지원하며 항목마다 로컬 호스트 URL을 입력하고 로컬 서버 측면에서 설정하면 PHP와 SSI도 이동할 수 있습니다.
(디렉토리에 2바이트 문자를 사용하지 않도록 주의)

다중 선택

서블림텍스의 대명사라고 할 수 있는 복수 선택으로, ST가 유행하기 시작했을 때 블랙텍스도 추가됐다.

다중 선택 → Ctrl+B

건너뛰기→Ctrl+Shift+B

커서 추가→Shift+Alt+↑ or↓

임의의 위치에 커서를 추가→Ctrl+왼쪽 클릭

사각형 선택 → Alt+ 마우스 드래그

다양한 옵션

커서 추가

위치에 커서 추가

직사각형 선택

2 창 표시

Sprint44에서 2분할 표현을 사용할 수 있습니다.
죄송합니다. 기본값은 Sublime Text처럼 화면 사이에서 탭을 이동할 수 없지만 Tabs - Custom Working의 확장을 통해 실현할 수 있습니다.
(원래 캡처된 탭 표시도 다른 확장으로 인한 것)
기본적으로 사이드바에서 드래그하면 좌우 사이를 바꿀 수 있습니다.

권장 설정

편집자

자동 닫기 괄호

나타내다

활성 행 강조 표시

행 번호

반환

저장 시 파일 검사

화속보기

디버깅

환경 설정 파일 열기

색상 브라우저, 섀도우 미리보기 유효화

코드 힌트의 최대 수량 변경(기본값은 50, 너무 많이 설정하면 동작이 무거워짐)

드래그 앤 드롭을 통해 텍스트 이동을 활성화합니다(Ver.1.2로 구현됨).

사용자 키 매핑 열기
문서 하단에서 Sublime Text 스타일의 주요 맵 설정을 복사할 수 있습니다.
GitHub User Key Bindings · adobe/brackets Wiki

권장 확장

여기서 따로 소개할게요.
Brackets 권장 확장 설명

키보드 단축키

여기서 따로 소개할게요.
짧은 렌즈 세트

바로 가기

여기서 따로 소개할게요.
Brackets 단축키 사용자 정의 수정 방법

사이트 축소판 그림

Brackets에 대한 정보는 아직 적지만 아래 사이트는 참고할 만하다.
링크가 불편하시면 연락 주세요.
・Brackets도 진화가 치열합니다!1년 동안 WEBCRE8을 주요 편집자로 사용해 보십시오.jp
・[오픈 소스] Adobe Brackets [텍스트 편집기] | Developers를 사용해 보십시오.IO
・제10회 "차세대 코딩 환경! Brackets" | ADC Plus 사용