This is your Park !!

sublime text 프러그인중에서 color 관련 플러그인이 몇개 됩니다.

지금 설명할 플럭그인은 color highlighter 인데요 그중에서 가장 편하게 사용할 수 있어서 소개합니다.

설치

다른 플러그인 설치할때처럼 Ctrl+Shift+P 를 눌러 pci 해서 package control 를 설치합니다.

그후 팝업창에서 Color Highlighter 를 입력해서 설치하면 됩니다.

사용법

사용법이라고까지 할건 없습니다.

좋은점은 Less sass scss stylus 모두 지원한다는 겁니다.

아래 이미지를 참고하세요.

컬러값이 있는 곳에 해당색상값으로 하이라이트가 되어 있어서 손쉽게 알수 있습니다.

색상값이 있는 곳에서 Ctrl+Shift+C 를 누르면 색상선택기가 나옵니다.

값을 변경하고자 할때는 Ctrl+Shift+A 를 누르면 됩니다.

근데 구지 그렇게 단축키를 누르면서 변경하지는 않죠. 그냥 바꾸면 되니까....

출처 : http://demun.tistory.com/2434

'SublimeText' 카테고리의 다른 글

서브라임 텍스트 플러그인 - DocBlockr (주석작성) (0)	2015.07.13
서브라임 텍스트 플러그인 - LiveReload (0)	2015.07.13
서브라임 텍스트 플러그인 - SublimeLinter (코드 오류 수정) (0)	2015.07.13
서브라임 텍스트 플러그인 - SideBarEnhancements(사이드바 향상) (0)	2015.07.13
서브라임 텍스트 플러그인 - Prefixr(CSS with Cross Browser) (0)	2015.07.13

서브라임 텍스트 플러그인 - SublimeLinter (코드 오류 수정)

2015. 7. 13. 12:28

[플러그인]Sublime Text 2에서 코드 오류를 자동으로 잡아주는 SublimeLinter

Sublime Text 2(서브라임 텍스트)의 플러그인중에서 코드의 오류를 자동으로 잡아주는 플러그인이 SublimeLineter 입니다. lint는 '보푸라기'를 의미하는 아주 생소한 단어인데, 코드에 버그가 있는 경우 작은 점을 표시해 에러가 있음을 나타내는 표시를 의미합니다.

서브라임 텍스트 3에서는 API 달라지면서 서브라임 텍스트2와 달리 사용 언어별로 플러그인을 별도로 설치해야 합니다. 여기서는 자주 사용하는 HTML, CSS, JavaScript, PHP 를 대상으로 ... ㅋㅋ. <책에서 발췌>

패키지 설치에서 sublimelint 로 검색해 SublimeLinter, SublimeLinter-csslint, SublimeLinter-html-tidy, SublimeLinter-jshint, SublimeLinter-php 를 각각 설치합니다.

플러그인을 설치하고 어떻게 오류를 잡아내는지 한번 보겠습니다.

SublimeLinter -> https://sublime.wbond.net/packages/SublimeLinter

Sublime Linter 설치하기.

Ctrl+Shift+P 를 눌러 Package Control 을 설치합니다.

바로 나오는 창에 sublime linter 을 입력하면 아래처럼 나옵니다.

엔터를 클릭해서 설치합니다.

SublimeLinter 은 설치하면 안내문구를 보여줍니다.

Sublime Linter 플러그인이 잡아주는 오류는 어떤 언어에서 해당이 될까요?

아래줄에 나오는것처럼 상당이 많은 언어의 오류를 잡아줍니다.

C/C++,CoffeeScript,CSS,Git Commit Messages,Haml,HTML,Java,Javascript,Lua,Objective-J,Perl,PHP,Puppet,Python,Ruby,XML

다른 플러그인처럼 여기서 끝나면 안됩니다.

https://github.com/SublimeLinter/SublimeLinter 보시면 Node.js 가 설치가 되어 있어야 한다고 합니다.

nodejs.org 에 가셔서 다운로드해서 설치하시기 바랍니다.

모두 설치가 되었다면 재실행을 해주세요. 혹시 설치순서가 바뀌어서 안될수도 있으니 ....

자바스크립트 문서를 하나 만들어서 ) 를 하나 빠뜨려봤습니다.

아래처럼 한행을 블럭을 잡아서 오류를 잡아냅니다.

CSS 파일도 마찬가지 입니다.

background 속성값을 않넣어봤습니다.

바로 잡아냅니다.

이런식으로 Sublime Linter 은 여려 언어에 걸쳐 오류를 잡아냅니다.

출처 : http://demun.tistory.com/2240

'SublimeText' 카테고리의 다른 글

서브라임 텍스트 플러그인 - LiveReload (0)	2015.07.13
서브라임 텍스트 플러그인 - Color Highlighter(색상 강조) (0)	2015.07.13
서브라임 텍스트 플러그인 - SideBarEnhancements(사이드바 향상) (0)	2015.07.13
서브라임 텍스트 플러그인 - Prefixr(CSS with Cross Browser) (0)	2015.07.13
서브라임 텍스트 플러그인 - Emmet LiveStyle (0)	2015.07.13

서브라임 텍스트 플러그인 - SideBarEnhancements(사이드바 향상)

2015. 7. 13. 11:35

Sublime Text 2 에디터는 사이드바라는 개념이 있습니다. 물론 다른 에디터에도 있긴 있지만 여기서는 기본적으로 제공하는 에디터의 사이드바 기능보다 좀더 확장해서 사용하는 방법을 알아보겠습니다.

[플러그인] SideBarEnhancements(사이드바향상) Open With 환경설정하는법 > http://demun.tistory.com/2394

[플러그인]Sublime text(서브라임텍스트) Sidebar Enhancements(사이드바의 향상된 기능) 두번째 -> http://demun.tistory.com/2386

[플러그인]Sublime Text(서브라임텍스트) Sidebar Enhancements(사이드바의 향상된 기능) -> http://demun.tistory.com/2385

에디터로 작성한 다음 브라우져에서 보려면 탐색기를 열어서 해당파일 예를들어 index.html 이면 이 파일을 떠블클릭 또는 마우스 우측버튼으로 브라우져로 열기를 해야 합니다.

이 한가지 메뉴만 보더라도 매우 번거로운 일이 아닐수 없습니다.

이러한 기능을 포함해서 다양한 메뉴를 사용할 수 있도록 하는것이 사이드바 확장(Sidebar Enhancements) 입니다.

Sublime Text 2를 설치한후 사이드바 확장을 설치하지 않았다면 기본적으로 아래처럼 보입니다.

사이드바 확장(Sidebar Enhancements)을 사용하려면 먼저 명령팔렛트를 불러와서 Control Package 를 설치한 다음 사이드바 확장(Sidebar Enhancements)을 설치하면 됩니다.

먼저 Package Control 설치.

사이드바 확장(Sidebar Enhancements) 설치.

그럼 끝입니다. 어떤 기능이 있나 한번 눌러볼까요?

사이드바에서 우측 버튼을 클릭합니다.

간단하게 브라우져로 열기를 클릭해보세요.

사이드바 확장(Sidebar Enhancements)를 설치하면 기본 폴더(C:\Users\demun\AppData\Roaming\Sublime Text 2\Packages) 에 SideBarEnhancements 라는 폴더가 생깁니다.

윈도우의 경우는 Default (Windows).sublime-keymap 파일을 열어봅니다.

그럼 아래처럼 단축키를 볼 수 있습니다.

F12 키군요.

이제 에디터에서 바로 F12 를 눌러 브라우저로 바로 열어 볼 수 있습니다.

Sidebar Enhancements 는 Sublime Text(서브라임텍스트)의 사이드바 기능을 좀 더 향상시킨 기능을 제공합니다.

사이드바 확장은 기존 서브라임 텍스트 2에서 사용하던것에서 3버젼이 발표되고 플러그인도 업데이트 되었습니다.

이전 SidebarEnhancements => https://github.com/titoBouzout/SideBarEnhancements

업데이트 된 SidebarEnhancements => https://github.com/titoBouzout/SideBarEnhancements/tree/st3

업데이트 된 사이드바 향상(Sidebar Enhancements) 는 Sublime text 2,3 모두 지원합니다.

특히 삭제,이동, 닫기, 이름 바꾸기 등 명령에 관한 여러가지 기능을 제공하며 기본으로 제공기능은 New File(새파일 만들기), New Folder(새폴더 만들기), Edit(수정), Open(열기)/Run(실행), Open In Browser(브라우져로 열기), Open In New Window(새창으로 열기-서브라임텍스트로 염) 등 다양합니다.

또한 파일을 수정한 날짜나 상태표시줄 페이지의 파일 크기등을 표시할 수 있다고 합니다.

설치

설치하는 방법은 대략 3가지가 존재합니다.

1. git 을 이용하는 방법.

2. git 에서 다운로드해서 폴더에 붙여넣기 하는 방법.

3. Sublime text 에서 Package Install 을 이용하는 방법.

아무래도 가장 간단한것은 3번 입니다.

Ctrl + Shift + P -> SideBarEnhancements 를 입력하고 엔터를 클릭하면 SideBarEnhancements 플러그인이 설치가 됩니다.

설치 후 서브라임텍스트를 재시작하는 것이 좋습니다.

F12

F12는 브라우져로 현재 파일을 열 수 있습니다.

F12(url_testing) 또는 Alt + F12(url_production) 를 통해 현재 파일을 브라우져로 열 수 있으며, url 도 수정할 수 있습니다.

절대 경로

사이드바의 파일을 마우스 우클릭으로 클릭하면 Project -> Edit Projects Preview URLs 을 클릭할 수 있습니다.

그러면 아래처럼 수정할 수 있습니다.

위에서 말한 F12에 대한 url 을 수정해서 열 수 있다는 이야기 입니다.

상대경로

절대경로가 아닌 상대경로로도 설정이 가능합니다.

프로젝트를 사용할 경우 아래처럼 한다고 가정하면

프로젝트에 사이드바 향상 플러그인의 사용자 설정을 할 수 있습니다.

그 설정은 프로젝트의 jsom 파일에서 설정합니다.

Project/.sublime/SideBarEnhancements.json

제가 프로젝트로 해보지는 않아서 뜻이 정확하게 전달되었는지는 잘 모르겠습니다.

연결 메뉴(Open With) 구성에 대한 참고사항

Open With 연결메뉴는 사이드바에서 마우스 우클릭하면 나오는 메뉴중에 하나 입니다.

그부분을 사용자 설정에 맞게 수정할 수 있습니다.

해당 파일은 패키지 폴더안에 유저폴더 안에 위치합니다. 서브라임텍스트 2를 예로 전체 경로를 보여드리겠습니다.

Sublime Text 2\Packages\User\SideBarEnhancements\Open With\Side Bar.sublime-menu

폴더에서 찾아도 되고 해당 파일을 열려면 사이드바에서 파일에서 우클릭하면 나오는 메뉴에서 Open With 를 찾아들어가도 됩니다

이번에는 사용하다가 편리한점, 또는 사용법에 대한 부분을 좀더 자세히 알아보겠습니다.

Sublime Text(서브라임텍스트) Sidebar Enhancements(사이드바의 향상된 기능) 중에서 Open With 라는 기능에 대해서 이야기 합니다.

Open With

사이드바 기능중에서 Open With 는 해당 파일을 어떤 프로그램으로 연결하여 열도록 하는 메뉴입니다.

예를들어 html 파일의 경우 크롬으로 열수도 있고, 익스플로러로 열수도 있고, 이미지의 경우는 포토샵으로 열수도 있고, 이미지뷰어로 열수도 있고.... 등등 원하는 연결 프로그램을 지정할 수도 있고, 지정한 후 실행할 수도 있습니다.

설정하는 방법부터 알아보겠습니다.

서브라임 텍스트에서 사이드바를 열고(Ctrl + K, Ctrl + B) 해당파일에 마우스 우클릭을 합니다.

그럼 메뉴가 열리는데요. Open With - Edit Applications 로 갑니다.

그럼 Side Bar.sublime-menu 라는 파일을 엽니다.

이 파일은 패키지폴더 즉 Sublime Text 2\Packages\User\SideBarEnhancements\Open With 폴더 안에 있습니다. 참고로 알아두세요.

그럼 대략 아래와 같은 코드로 되어있는 파일이 열립니다.

여기서 맨 아래보시면 Chrome 이 있는데요. 경로가 틀릴수도 있습니다.

현재 크롬이 설치되어 있다면 설치되어 있는 경로의 chrome.exe 를 지정하면 됩니다.

추가적으로 파이어폭스, 익스플로러 등 더 연결시킬수 있습니다.

방법은 그대로 복사해서 경로와 파일명만 변경해주면 됩니다.

이런식으로 연결하면 Open With 의 메뉴가 아래처럼 나옵니다.

이건 브라우져의 경우고, 다른 프로그램도 똑같이 사용하시면 됩니다.

기타 사이드바 향상의 기능들은 이름을 변경한다거나, 파일을 옮기고, 수정하고, 삭제하고 하는등의 작업을 할 수 있습니다.

또 텍스트를 인코딩하는 명령과, 찾기에 관한 메뉴들이 있습니다.

찾기(Find Advanced)는 좀 더 세밀하게 찾을 수 있습니다.

폴더에서 찾을수있고, 부모에서 찾을수 있고, 또 어떠한 확장자를 가진 텍스트를 찾을수 있고....

아래는 예제로 이미지를 하나 찾아보았는데...결과창으로 경로와 텍스트를 모두 보여줍니다.

Sublime text(서브라임텍스트) Sidebar Enhancements(사이드바의 향상된 기능) 은 많은 기능이 있습니다.

저도 미쳐 사용해보지 못한 기능들이 너무 많아서 모두 설명을 드리기는 힘들군요.

나머지 부분에 대해서는 차차 사용해보고 좀 더 보강하도록 하겠습니다.

출처 : http://demun.tistory.com/2385

'SublimeText' 카테고리의 다른 글

서브라임 텍스트 플러그인 - Color Highlighter(색상 강조) (0)	2015.07.13
서브라임 텍스트 플러그인 - SublimeLinter (코드 오류 수정) (0)	2015.07.13
서브라임 텍스트 플러그인 - Prefixr(CSS with Cross Browser) (0)	2015.07.13
서브라임 텍스트 플러그인 - Emmet LiveStyle (0)	2015.07.13
서브라임 텍스트 플러그인 - Emmet (0)	2015.07.13

서브라임 텍스트 플러그인 - Prefixr(CSS with Cross Browser)

2015. 7. 13. 09:37

Prefixr 플러그인은 기본 CSS 코드를 Cross Browser 에 맞게 코드를 작성해주는 것을 말합니다.

http://prefixr.com/

Prefixr 설치하는 방법.
Prefixr 을 설치하는 방법은 Zen Coding을 설치하는 방법과 동일합니다.
Ctrl+Shift+P 를 클릭해서 명령 팔렛트를 불러와서 Package Control 을 인스톨하고, Prefixr 을 인스톨합니다.
자세한 방법은 http://wbond.net/sublime_packages/prefixr 를 참고하세요.

Prefixr 사용하는 방법.
Prefixr 를 사용하는 방법은 무척 간단합니다.
CSS 코드를 모두 선택한다음 단축키인 Ctrl+Alt+X 를 누르면 됩니다.

Prefixr

/* 사용전 */
.box {
animation: slide 1s alternate;
}

/* Ctrl+Alt+X 클릭한 후 */
.box {
       -webkit-animation: slide 1s alternate;
       -moz-animation: slide 1s alternate;
       -ms-animation: slide 1s alternate;
       -o-animation: slide 1s alternate;
       animation: slide 1s alternate;
}

출처 : http://demun.tistory.com/2223

'SublimeText' 카테고리의 다른 글

서브라임 텍스트 플러그인 - SublimeLinter (코드 오류 수정) (0)	2015.07.13
서브라임 텍스트 플러그인 - SideBarEnhancements(사이드바 향상) (0)	2015.07.13
서브라임 텍스트 플러그인 - Emmet LiveStyle (0)	2015.07.13
서브라임 텍스트 플러그인 - Emmet (0)	2015.07.13
서브라임 텍스트 플러그인 - Alignment(코드정렬) (0)	2015.07.13

서브라임 텍스트 플러그인 - Emmet LiveStyle

2015. 7. 13. 09:30

한번 쯤은 브라우저의 개발자도구들에서 임시로 수정한 내용들이 바로 저장되었으면 하는 바램이 있었을지도 모릅니다. 그 시발점에 있는 플러그인을 소개합니다.

Emmet LiveStyle 플러그인 시연

Emmet LiveStyle 소개

Emmet LiveStyle은 새로운 세대의 실시간 양방향(에디터↔브라우저)의 CSS 편집을 위한 플러그인이다. 현재는 Chrome, Safari과 서브라임 텍스트에서 작동한다. 위 동영상은 LiveStyle의 가장 강력한 기능을 보여준다. SASS/SCSS/LESS 에서도 작동한다.

홈페이지 : Emmet LiveStyle

LiveStyle 특징

즉시 업데이트 : 어떤 파일을 저장하거나 페이지를 다시 로딩할 필요없이 변경사항이 반영된다.
로컬 파일이 필요치 않다.
크로스플랫폼
멀티 뷰와 멀티 디바이스를 지원한다. 다른 창에서 같은 페이지를 열고 그것들 모두 즉시 업데이트가 가능해진다. 가령, 브라우저 창을 다른 크기로 두개를 띄워두고 한 개를 수정하면 두 개의 창이 모두 반영되어 반응형 디자인을 구상할때 편리해진다.
멀티 사이트 업데이트를 지원한다. 가령, 데스크탑 및 모바일 버전 같은 CSS를 공유하지만 다른 웹사이트인 경우 실시간으로 편집이 가능하다.
매우 쉬운 설치 : 어떤 복잡한 매핑이나 패턴등이 필요없이 단지 LiveStyle 브라우저 창 하나와 편집기와 연관된 CSS 파일을 열면 된다.

Emmet LiveStyle 설치

아래에서는 Sublime Text와 Chrome의 플러그인을 설치하는 방법에 대하여 다룬다.

서브라임 텍스트 플러그인 설치

서브라임 텍스트를 실행한 후, 단축키 Ctrl+Shift+P 로 Command Palette를 불러온다.
install을 입력하면 자동완성되는 Package Control: Install Package를 선택하고 엔터를 누른다.
live를 입력하여 LiveStyle이 검색되면 선택한 후, 엔터를 눌러 설치한다.

아래처럼 안내문구가 나오면 설치가 잘 된것입니다.

서브라임에서 플러그인을 설치한 후 개발자도구로 사용할 수 있도록 간단한 설정을 해줍니다.

Prefernces - Emmet LiveStyle - Settings - Default 에 보시면 "debug": false 라고 있습니다.

여기서 fault 를 true 로 변경해도 되고, 관리를 위해 user 파일을 열어서 아래처럼 그 부분만 복사해서 true 로 변경해서 저장합니다.

참고로 관리를 위해서는 Default 파일을 건드리지말고 User 파일을 사용하세요.

이렇게하면 디버그에서도 이 플로그인을 사용할 수 있습니다.

여기까지 되었다면 이제 크롬에서 확장기능인 Emmet LiveStyle 를 설치해야 합니다.

크롬에서 아래 링크를 클릭하면 Emmet LiveStyle 의 확장기능을 설치하는 페이지로 이동합니다.

Google Chrome 확장 설치

설치후 크롬 주소줄에 chrome://extensions 를 입력하거나, 상단 우측의 목록 아이콘을 클릭해서 도구 - 확장 크로그램으로 가되 아래와 같은 화면이 보일겁니다.

Emmet LiveStyle 에 체크표시가 되어 있는 것이 보일겁니다. 안되어 있다면 체크하세요.

크롬 웹스토어에서 직접 LiveStyle을 설치한다.

설치하면 개발자모드(F12)에 LiveStyle 이라는 마지막 패널이 추가된다.

개발자도구의 LiveStyle 탭을 클릭하면 아래처럼 LiveStyle 플러그인을 사용할거냐고 묻는 체크박스가 나옵니다.

체크를 하면 아래처럼 현재 페이지에 로딩된 스타일시트가 나옵니다.

그러면 준비는 끝입니다.

현재페이지의 스타일시트는 아래와 같습니다.

이제 크롬 브라우져와 서브라임텍스트를 한 화면에 놓고 진행해보겠습니다.

서브라임텍스트에서 보시면 body 에 스타일이 크롬에서 보는 스타일과 동일한것을 알 수 있습니다.

이제 크롬 개발자도구에서 스타일을 수정을 해보겠습니다. 위 사진에서 보듯 color 값이 #fff 로 흰색으로 지정이 되어 있습니다.

이걸 blue 로 변경해보겠습니다.

blue 라고 입력했지만 아직 서브라임에서는 변경이 안되었지요.

하지만 모두 입력후 줄바꿈 또는 입력후 커서가 다른곳으로 이동하면 입력이 끝난것으로 인식하고, 서브라임텍스트에는 보시는바와같이 color 값이 변경되면서 그곳이 선택되어진것을 보실수 있을겁니다.

Safari 확장의 경우는 Safari extension을 참고하라.

Emmet LiveStyle 사용법

실시간으로 CSS 편집을 사용하려면 :

서브라임 텍스트를 실행하고 CSS 파일을 열거나 새로 하나를 만든다.
수정하고 싶은 페이지를 크롬 브라우저로 방문한다.
개발자도구를 열고 LiveStyle 패널에 Enable LiveStyle을 활성화한다.
활성화 됬을때, 왼쪽에 페이지의 외부의 스타일시트의 목록과 오른쪽에 편집기 파일의 목록을 볼 수 있다. 단순히 편집기 파일을 선택하면 브라우저 하나와 연결된다.

에디터의 파일 목록들은 에디터에서 생성하거나 열고 닫는 파일들을 자동적으로 매순간마다 체크하여 업데이트해 준다.

간혹 LiveStyle이 연동되지 않는 경우가 발생합니다. 이때는 콘솔창을 열고(Ctrl + `) 에러 메세지를 확인하고 문제가 발생하는 CSS 구문을 삭제하거나 수정해보길 권합니다.

출처 : http://webdir.tistory.com/400 / http://demun.tistory.com/2362