티스토리 뷰
# 설치 및 기본세팅
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
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 확인
'작업환경 > Publishing(setting)' 카테고리의 다른 글
[Compass] 사용법 (sass and .scss) (0) | 2016.03.23 |
---|---|
[Brackets]setting & 확장기능 ( .brackets.json , js.concat ) (0) | 2016.03.09 |
[Sublime Text3] 단축키 (0) | 2016.02.18 |
[Grunt] sass 설치&기본세팅 (min.css, min.js) (2) | 2016.02.01 |
[Aptana Studio3]&[Eclipse] plugin (젠코딩 or Emmet , svn) (0) | 2014.03.26 |
- Total
- Today
- Yesterday