경위

모처럼 ATOM으로 환승했고, 실시간으로 업데이트를 반영하고 싶다면, 어쨌든 같은 화면에서 확인하고 싶고, 터미널도 같은 화면에서 만지도록하고 싶고, 바로 가기를 충실하게하고 싶다는 것으로, 어쨌든, 할 수 있다. 없을까라고 생각해 조사하고 있으면 만들 수 있었으므로 공유. 이른바, 「나의 칸가에타사이쿄의 Rails 개발 환경」이라고 하는 사람입니다.

환경

Mac OS 10.10.5

Atom 1.5.3

※ Win기로 앞으로 말할 환경을 만들 수 있는지 확인은 취하고 있지 않습니다.

화면도를 확인해 본다

① 화면 왼쪽이 프로젝트 디렉토리를 트리 구조로 한 TreeView
②그 오른쪽에 에디터를 표시
③ 더욱 오른쪽에 웹뷰를 두고 있습니다.
④ 그리고 아래쪽에는 터미널을 두고 있습니다.
이것은 폭속 개발을 가능하게하는 기본 스타일입니다.

환경을 구축합시다.

1. Package를 붓는다

주로 사용하는 패키지는 이쪽이 됩니다. 우선 패키지를 흩어 갑시다.
- emmet( htps : // 나중에 m. 이오 / 파 c 게 s / 에메 t )
- terminal-plus( htps : // 나중에 m. 이오 / 파 쿠 케이 s / 테르 모두 lp ぅ s )
- browser-plus ( htps : // 나중에 m. 이오 / 파 c 게 s / b 로 w 세 rp p s )

2. emmet란?

프런트 엔드 개발을 굉장히 편리하게 해주는 녀석. 매우 유명하거나하기 때문에 이번에는 해설을 생략합니다. 자세한 것은 이쪽을 보면 좋을까.
htps : // 나중에 m. 이오 / 파 c 게 s / 에메 t

3. terminal-plus란?

ATOM 에디터상에 자신의 터미널을 표시해 주는 패키지. 그 밖에도 Term3라든지 여러가지 있었지만, 설정 귀찮게 동작 불안정하고, 라고 일로 이쪽을 사용했습니다. 설치하는 것만으로 바로 사용할 수 버리는 편리한 것.

주요 단축키

Ctrl + Shift + @ : Toggle 열거나 닫거나

Cmd + Shift + x : 닫고 종료

더 터미널처럼 보이기 위해

디폴트라면, 이런 느낌으로 검은 화면과 흰색 문자가 되어 있습니다.


하지만 iTerm이라든지 사용하고 있으면, 문자색은 녹색이므로, 똑같이 정돈하고 싶다. 그런 희망도 이루어졌습니다. Atom의 스타일 시트 설정에서 지정할 수 있습니다.

.terminal-plus .xterm {
  background-color: #000;
  color: #00B100;

  ::selection {
    background-color: #cbcbcb;
    color: #fff;
  }

  .terminal-cursor {
    background-color: #00B100;
  }
}

4. browser-plus란?

이 녀석이 이 환경의 키모라고 해도 과언이 아닙니다. 어쨌든 파일을 저장하면 즉시 자동 반영 해주기 때문입니다. Rails라면, gem으로 guard-livereload등의 자동 리로드를 가능하게 해 주는 구조가 있습니다만, 이것 사용하면 guard 필요없다. (물론, 어디까지나 Atom상의 이야기이므로, 필요하다면 넣는 편이 좋습니다.)

사용법

설치가 완료되면 option + ctrl + o에서 브라우저를 시작합니다.

검색창에 URL을 입력하세요. 로컬 Rails 서버에 액세스하려면 localhost:3000이것으로 기본적인 설정은 완료. 다음은 자동 리로드 설정을 실시합시다.

자동 재로드 설정 수행

왼쪽의 에디터로 편집해 갱신하면, 자동적으로 웹 뷰로 확인하고 싶다. 그런 것도 쉽게 할 수 있습니다. 그래, atom-webbrowser라면.
그렇다고해도, 방법은 매우 간단합니다. 빨간색 테두리로 둘러싸인 아이콘을 포치로 하는 것만.


이것으로 모든 설정이 완료됩니다.

어쨌든, 이것으로, 화면 천이 없이 실시간 프리뷰·터미널 기동이 동시에 행할 수 있어 최고! 같은 환경의 완성입니다 ☺

ATOM의 패키지를 사용하면, 그 밖에도 vim 사양으로 하거나라든지, 칼라 차트이거나, 칼라 피커 내보내기라든지 여러가지 할 수 있는 것 같기 때문에, 거기엔은 좋아하는 취향에.