[컴][웹] jQuery / Javascript / HTML / CSS 을 위한 sublime text2 add ons

sublime text 2 add ons / 애드온 / 서브라임 텍스트 웹 개발 / 웹 개발 설정



ref. 1 에서 sublime text 2 에서 jQuery / Javascript / HTML / CSS 을 이용하기 편리한 add on 설치에 대한 이야기를 해준다. 그 내용을 아래에 정리했다.

Package control 설치

console 창을 띄우자. ctrl+`

import urllib2,os; 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())); open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read()); print 'Please restart Sublime Text to finish installation'

sublime text 2 를 restart 시킨다.

Install Package

• ctrl + shift + P > Package Control : install Package 

를 해서 아래 항목들을 install 하자.

1. Additional PHP Snippets
2. Alignment : http://wbond.net/sublime_packages/alignment
3. Auto Semi-colon : https://github.com/LewisW/SublimeAutoSemiColon
4. BracketHighlighter : https://github.com/facelessuser/BracketHighlighter
5. Case Conversion : https://github.com/jdc0589/CaseConversion
6. ChangeQuotes : https://github.com/colinta/SublimeChangeQuotes
7. Clipboard History : https://github.com/kemayo/sublime-text-2-clipboard-history
8. CSSLint
9. Code Alignment : http://www.codealignment.com/ForSublimeText.html - not in sublime text 2
10. DetectSyntax
11. Emmet (a renew brand for ZenCoding) : http://docs.emmet.io/actions/expand-abbreviation/ , css 문법으로 적으면, html 로 변환해 준다.
12. Hex to HSL Color Converter
13. Hex to RGBA
14. HTML5
15. jQuery
16. jQuery Mobile Snippets
17. jQuery Snippets pack
18. JS Minify
19. JsFormat
20. LoremPixel
21. PlaceHolders
22. Prefixr
23. Sublime-HTMLPrettify
24. SublimeCodeIntel
25. SublimeLinter

JQuery Autocomplete

jQuery add on 에 autocomplete 가 없다.[ref.1] 그래서 아래 프로젝트에서 가져오자.

• https://github.com/agibsonsw/AndySublime
• downlaod zip file

git hub 에서 아래 파일을 가져와서 packages\jQuery 에 copy 하자.

• <AndySublime-master_path>\AndyjQuery.sublime-completions

을

• c:\Users\namhadmin\AppData\Roaming\Sublime Text 2\Packages\jQuery

에 copy 한다.

Reference

1. The Perfect jQuery-PHP-Javascript-HTML-CSS Editor : Sublime Text 2
2. 10 BEST JQUERY AND HTML5 WYSIWYG PLUGINS
3. http://i5on9i.blogspot.kr/2013/05/sublime-text-2.html