에디터 | 아톰(Atom) 미리보기 단축키 만들기

개요

다들 페이지 에디터는 본인에게 편한 걸 사용할텐데요, VS Code도 Live Server 라는 좋은 페이지 미리보기 플러그인이 있지만, 무언가 아쉬운 점이 있는 건 사실입니다.

아톰에서 가장 편리한 점은 html 파일을 간편하게 미리보기(Preview) 할 수 있다는 점인데요, 그렇게 하려면 몇가지 설정이 필요해요. 천천히 따라오시면 누구나 할 수 있도록 안내해볼게요

사용법

좌측상단의 [File] 클릭 > [Settings] 클릭

[Install] 클릭 > [atom-html-preview] 입력 > 설치

설치가 완료되었다면 [Settings]를 클릭합니다

스크롤을 내리면 이런 내용이 있는데요 해당 사진의 복사 아이콘을 클릭합니다

[Settings] 들어오기 – [Keyindings] 선택 – [your keymap file] 선택

순서로 진행합니다

저는 컨트롤 + 알트 + Z 가 편하기 때문에 해당 방법으로 링크를 넣겠습니다

이렇게 입력하면 돼요

'atom-text-editor[data-grammar~=html]':
'ctrl-alt-z': 'atom-html-preview:toggle'

위의 내용대로 코드를 추가하고 저장합니다.

자 이제 컨트롤 + 알트 + Z 를 누르면 현재 페이지를 미리보기 할 수 있게 됩니다.

실시간으로 변환이 되니 엄청 편합니다