[Sublime Text3] Setting

# 설치 및 기본세팅

1. https://www.sublimetext.com/3

2. 사이트 바 활성 화 : View -> Side bar 

3. 단축키 세팅 : Preferences -> Key Bindings - User

( "Key Bindings - Default"에서 변경할 부분을 카피해서 변경하기를 권장 )

[

{ "keys": ["ctrl+shift+x"], "command": "toggle_side_bar" }

]

4. 환경 세팅 : Preferences -> Setting - User

( "Setting - Default"에서 변경할 부분을 카피해서 변경하기를 권장 )

{

// typography

"font_face": "Verdana",

    "font_size": 12,

    "font_options": ["no_bold","no_italic"],

    // padding

    "line_padding_top": 1,

    "line_padding_bottom": 1,

    // tab  

    "tab_size":2,

    //  word_wrap

    "word_wrap": true,

    // min_map

    "draw_minimap_border": true ,

     "always_show_minimap_viewport": true,

     // highlight

     "highlight_line": true,

}

5. Package Control 설치 : View -> Show Control ( ctrl+` )

참고 : https://packagecontrol.io/installation#Simple ( Sublime Text2 와 설치 방법이 다름 )

import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

6. 윈도우 메뉴 등록 : https://gist.github.com/jcppkkk/8330314

   (베치 파일을 서브라임 설친된곳에서 실행 )

# Remove Package (플러그인 삭제)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 언인트톨 준비 : rp ( "Package Control: Remove Package" 선택 )

3. 삭제 하려는 플러그인 선택 엔터 

플러그인 블로그 : http://webdir.tistory.com/tag/sublimetext?page=2

# Sidebar Enhancement (사이드바 확장)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. SideBarEnhancement인스톨 :  sbe ( "SideBarEnhancement " 선택 )

4. 브라우저 설정 : Preferences -> Package Settings -> Side Bar -> Settings User 

{

//if installed in a default location maybe this works.

"default_browser": "chrome", //one of this list: firefox, chrome, canary, chromium, opera, safari, ie

"open_all_browsers": ["firefox", "chrome", "opera", "safari", "ie", "edge"], //any of this list: firefox, chrome, canary, chromium, opera, safari, ie, edge

"portable_browser": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe", // for example:  C:/Program Files (x86)/Nightly/firefox.exe

}

5. 브라우저 오픈 단축키  : Preferences -> Package Settings -> Side Bar -> Key Bindings - User

{ "keys": ["f12"], 

"command": "side_bar_open_in_browser", 

"args" : {"paths":[], "type":"testing" }

}

# IMESupport 패키지 설치 (한글지원)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. IMESupport 인스톨 :  ime ( "IMESupport " 선택 )

# ConvertToUTF8 패키지 설치 (utf8 을 기본설저으로)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. ConvertToUTF8 인스톨 :  ctu ( "ConvertToUTF8" 선택 )

# Emmet 패키지 설치 (젠코딩 사용)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. emmet 인스톨 :  emmet ( "Emmet" 선택 )

# Syntax Highlighting for Sass 패키지 설치 (sass 문법, 하이라이팅)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. Syntax Highlighting for Sass 인스톨 :  Syntax Highlighting for Sass ( "Syntax Highlighting for Sass" 선택 )

# LiveStyle

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. ConvertToUTF8 인스톨 :  LiveStyle ( "LiveStyle" 선택 )

4. 크롬 웹스토어에서 직접 LiveStyle을 설치한다. 설치하면 개발자모드(F12)에 LiveStyle 이라는 마지막 패널이 추가된다.

# SFTP 패키지 설치 (ftp 사용)

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. ConvertToUTF8 인스톨 :  sftp ( "SFTP" 선택 )

# sublimelinter-jscs 패키지 설치 ( 자바스크립트 오류 체크 )

- https://packagecontrol.io/packages/SublimeLinter-jscs

- npm install -g jscs

- npm install -g jshint

1. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

2. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. sublimelinter-jscs 인스톨 : sljs ( "SublimeLinter-jscs" 선택 )

# SASS 설치 : https://vividviolethykr.wordpress.com/2013/09/05/sublime-text-2%EB%A1%9C-sass-%EC%A4%80%EB%B9%84%ED%95%98%EA%B8%B0/

1. 루비 설치 : http://rubyinstaller.org/

2. 명령프롬프트 에서 설치 확인 : ruby -v

3. sass 설치 :     C:\Users\OOOOO>gem install sass

4. compass 설치 : C:\Users\OOOOO>gem install compass

- compass 사이트 ,강좌 : http://compass-style.org/ ,  ( https://youtu.be/PRJpf-yyWZ4 )

- 도스창 실행 기본 홀더생성 : compass install compass

- sass 감시 : compass watch 

5. 프러그인 설치 : Sass, Sass Build, Scss, Scss snippets, compass

I. 커맨드 파레트 열기 : Tools -> Command Paleatte ( ctrl+shift+p ) 

II. 패키치 인트톨 준비 : pci ( "Package Control: Install Package" 선택 )

3. Sass 인스톨 I,II후 :           Sass         (선택 )

4. Sass Build 인스톨 I,II후 :     Sass Build    (선택 )

5. Scss 인스톨 I,II후 :           Scss         (선택 )

6. Scss Snippets 인스톨 I,II후 :  Scss Snippets(선택 )          

7. Compass 인스톨 I, II후 :       Compass      (선택 ) 

8. 루투에 Config.rb 파일 만들기 

- 루비 참고 : http://compass-style.org/help/documentation/sass-based-configuration-options/

http://liginc.co.jp/web/html-css/css/53075

# add_import_path "./library/scss/"    

http_path = "/"

css_dir = "css"

sass_dir = "scss"

# You can select your preferred output style here (can be overridden via the command line):

output_style = :compact # :expanded or :nested or :compact or :compressed

 

# To enable relative paths to assets via compass helper functions. Uncomment:

# relative_assets = true

 

# To disable debugging comments that display the original location of your selectors. Uncomment:

line_comments = false

preferred_syntax = :scss

# If you prefer the indented syntax, you might want to regenerate this

# project again passing --syntax sass, or you can uncomment this:

# preferred_syntax = :sass

# and then run:

# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

http_path = "/"

css_dir = "css"

sass_dir = "scss"

output_style = :nested

line_comments = false

9. 홀더구 조

– folder

– scss

– sytle.scss

– css

– config.rb

10. 빌드 설정 : Tools -> Build System -> Compass

11. scss 제작 

@import "compass";

$width: 640px;

$height: 480px;

#box01 {

      width: $width;

      height: $height; }

#box02 {

      width: $width;

      heihgt: $height; }

12. 빌드 실행 : [Ctrl]+[b] 

13. css 확인