브라켓(Brackets) 단축키 변경 방법

HTML, CSS, JavaScript 코드 구성을 쉽게 생성할 수 있는 프로그램 중 하나가 바로 Brackets(브라켓) 입니다. VS Code도 있긴 한데, 코드 정리는 브라켓이 한 수 위입니다. 전 그렇게 생각해요. 둘 다 써본 결과가 그렇습니다. 그래서 지금은 둘 다 사용중입니다. 다만 프로그램 두 개를 동시에 사용하면 발생하는 문제가 단축키입니다. 햇갈려요... 그래서 최대한 통일을 시키려고 합니다. 일단은 정말 자주 사용하는 단축키죠. 실시간 미리보기 기능을 단축키로 지정해 보려고 합니다.

 

브라켓을 실행 후 디버그 > 사용자 키맵 파일 열기로 들어갑니다.

 

그러면 새 창으로 keymap.json 파일이 열릴 것입니다. 현재 저는 단축키를 등록했기에 위의 화면에서 빨간색 코드가 있는 것입니다. 처음 실행하신 분들은 overrides 괄호 안에 아무것도 없을 것입니다. 이제 괄호 안에 추가할 단축키와 명령어를 원하는 것으로 입력 후 저장해주면 끝입니다. 다만 어떤 명령어인지를 모르므로 아래의 페이지를 참고해 자신이 원하는 기능에 대한 커맨드 ID를 그대로 입력해 봅시다.

 

https://github.com/adobe/brackets/wiki/Brackets-Shortcuts

Brackets Shortcuts

방문해 보시면 브라켓 기본 단축키 목록이 있습니다. 따라서 커맨드 ID만 가져오고 단축키는 원하는 조합으로 입력해놓으면 됩니다.

 

제 경우는 실시간 미리보기였으니 이것과 관련된 커맨드 ID는 file.liveFilePreview 입니다. Live Preview로 검색해도 명령어 검색이 됩니다. 만약 커맨드를 모른다면 단축키 정보로 검색을 해도 됩니다. 참고로 단축키 입력은 +가 아닌 -를 사용합니다. 보통 우리가 단축키 이것 이것을 누르라라고 글로 설명할 때, 예를 들어 저장 단축키를 설명할 때 Ctrl+S 라고 안내하고 있지 않습니까? +를 사용한단 말이죠. 허나 +키는 자체적으로도 단축키의 가치가 있기에 브라켓 키맵 입력 시에는 -키를 사용해야 한다는 것입니다. 즉 Ctrl+S가 아니라 Ctrl-S로 입력해야 한다는 의미입니다. 그렇기에 저는 실시간 미리보기 단축키를 Ctrl-M으로 입력한 것입니다. 끝.