Sublime Text3 설치 및 셋팅하기

Sublime Text는 코딩, 마크업을 하기 위한 에디터입니다. 인터페이스 및 사용 호환성이 좋아 요즘 많이 사용하고 있는 에디터 중에 하나입니다. 윈도우 및 맥에서 사용이 가능하며, 사용하기 전에 몇 가지 셋팅이 필요합니다.

Setting

• 서브라임 설치는 다운받아서 설치합니다. sublimetext.com

• 기본 서브라임만 설치된 상태이기 때문에 필요한 기능을 설치하려면 Package Control를 설치해야 합니다. Package Control
  1. View > Show Console를 클릭합니다.
  2. Package Control 소스를 복사하여 Console 붙여넣기 합니다.
  3. Preference에 Package Control이 있다면 설치가 완료된 것입니다.

Sidebar Enhancements

• Sidebar Enhancements는 사이드바의 기능을 향상시키는 기능입니다.
• 사이드바가 없다면 View > Side Bar에서 설정합니다.
  1. Preference > Package Control를 클릭하고 Package Control : Install Package를 클릭합니다.
  2. 검색란에 sidebar라고 하면 목록이 나타납니다.
  3. Sidebar Enhancements를 클릭하면 설치가 되고 사이드 바에서 오른쪽으로 클릭하면 다양한 기능들이 추가된 것을 확인 할 수 있습니다.

FTP 설치하기

• Sublime SFTP는 FTP, SFTP를 사용할 수 있도록 확장해주는 플러그입니다.
  1. Preference > Package Control를 클릭하고 Package Control : Install Package를 클릭합니다.
  2. 검색란에 SFTP라고 쓰면 SFTP 목록이 나타납니다.
  3. SFTP를 클릭하면 설치가 되고 File > SFTP/FTP를 확인할 수 있습니다.

• Sidebar에 폴더를 만들고 오른쪽을 클릭하면 FTP Setting이 나오고 Map to Remote...를 클릭합니다.

• 서버 정보를 적습니다.
  1. "type": "ftp"로 수정합니다.
  2. "host": "webstoryboy8.dothome.co.kr" : 호스팅에 가입한 주소를 적습니다.
  3. "user": "webstoryboy8", : 아이디를 설정합니다.
  4. "password": "password" : 패스워드를 설정합니다.
  5. "port": "21" : 특별한 사항이 없다면 기본 포트로 설정합니다.
  6. "remote_path": "/html/" 서버 기본 루트 주소를 얘기합니다. dothome의 경우는 /html/로 되어 있고, 카페24 같은 경우는 /www/로 적으면 됩니다.
  7. "file_permissions": "777",: 특별한 사항이 없다면 파일 권한은 777로 설정합니다.
  8. "dir_permissions": "777", : 특별한 사항이 없다면 폴더 권한을 777로 설정합니다.

• 폴더의 오른쪽을 클릭하고 SFTP/FTP를 클릭하고 Download Folder를 클릭하면 파일을 다운로드 화면을 볼 수 있습니다.

Emmet 설치하기

• Emmet는 코딩을 좀 더 쉽고, 수월하게 작업할 수 있도록 도와주는 플러그입니다.
  1. Preference > Package Control를 클릭하고 Package Control : Install Package를 클릭합니다.
  2. 검색란에 emmet라고 쓰면 emmet 목록이 나타납니다.
  3. emmet를 클릭하면 설치가 되고 Preference > Package Setting > Emmet을 확인할 수 있습니다.

Sublime 기본 설정하기

• Preference > key Bindings는 단축키를 변경합니다.

• Preference > Setting는 기본 기능을 설정합니다.
• 왼쪽에 있는 기본 기능을 오른쪽에 넣어주면 설정됩니다.

• 글꼴 설정 : "font_face": "",
• 폰트 사이트 설정 : "font_size": 14,
• 폰트 옵션 설정(굵기, 이탤릭체) : "font_options": ["no_bold"],
• 라인 넘버 표시 여부 : "line_numbers": true,
• 간격 : "margin": 4,
• 라인 위쪽 간격 : "line_padding_top": 2,
• 라인 아래쪽 간격 : "line_padding_top": 2,
• 탭 사이즈 설정 : "tab_size": 2,
• 줄바꿈 설정 : "word_wrap": "true",
• 미니맵 보더 설정 : "draw_minimap_border": true,
• 미니맵 표시 여부 : "always_show_minimap_viewport": true,
• 포커스 된 선을 강조 : "highlight_line": true,

코드 자동 정렬 기능 설정하기

1. Preference > Package Control를 클릭하고 Package Control : Install Package를 클릭합니다.
2. 검색란에 command Palette를 클릭하고 설치합니다.
3. Indentation: Reindent Lines / Indentation: Reindent Lines / Indentation: Reindent Lines