2015年8月11日 星期二

sublime text 3 基本設定和常用套件安裝

下載完檔案後
把「Default.sublime-package」放到
Sublime Text Build 3047 資料夾\Data\Installed Packages
- See more at: http://ilowkey.net/4cht-sublime-text/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+zkm+%28%E4%BD%8E%E8%AA%BF%E4%B8%80%E9%BB%9E%29#sthash.RmuHQEsi.dpuf

1、Sublime有內建HTML5的snippet
! + tab
html:5 + tab

2、選取引號內字串
"string"利用滑鼠從第一個引號拉到後面那個。或輸入:command + d 即可完成

3、貼上符合縮排
有時候從網站上複製一段code,常常貼上的部份本身就有縮排,貼完卻只有第一行有縮排,其他跑到前面。
複製完後,輸入:shift + ctrl + v 就可以解決!



4、自動換行
在個人設定檔中(Preference->Settings User)加入設定
{"word_wrap": true}
其中 word_wrap 是强制换行

5、刪除不必要的空白
在個人設定檔中(Preference->Settings User)加入設定,這樣在存檔時,就會自動幫你刪掉全部多餘的空白。
{"trim_trailing_white_space_on_save": true}

6、解決開發PHP時,正常雙擊選取不到$
在個人設定檔中(Preference->Settings User)加入設定
{"word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"}

7、修改快捷鍵的方式
在套件資料夾底下,有一個副檔名為「.sublime-keymap」的文件

sublime text 3 套件(https://packagecontrol.io/)
1、安裝Package Control:必裝的套件,未來安裝其他套件就透過這套
Ctrl + `」叫出Sublime的Console,在這個連結「https://packagecontrol.io/installation」複製sublime text 3的指令碼到主控台命令列中,並按下 Enter 執行。
import urllib.request,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

2、Emmet(Zen Coding):快速編寫 html/CSS
指令教學
http://vimeo.com/7405114
http://www.youtube.com/watch?v=ug84Ypwqfzk

3、ConvertToUTF8:自動轉換為UTF-8編碼,解決中文亂碼,但快速鍵跟colorPicker套件的快捷鍵打到。
預設判斷字集的優先順序是先判斷是否為簡體字(GBK),再判斷是否為繁體字(BIG5),編輯這個位於 User 目錄下的 ConvertToUTF8.sublime-settings 檔案。
將 encoding_list 前兩個字集定義對調即可。

4、KeymapManager: 所有的快捷键管理,「ctrl + alt + k

5、HTML-CSS-JS Prettify: HTML/CSS/JS 格式化的套件
需先安裝 node.js ,安裝此套件才會有作用。指令碼「Ctrl + Shift + H

6、ColorPicker:在CSS檔案中直接開啟色盤選色
按「ctrl + shift + c」,不過跟ConvertToUTF8的快捷鍵打到,要修改

7、LiveStyle:可直接在瀏覽器的開發者工具與 Sublime Text 中,互相同步修改 css
sublime安裝完,Chrome瀏覽器也要安裝 Emmet LiveStyle 擴充套件,按下「F12」開啟開發者工具,最後一個選項會出現「LiveStyle」,把他「enable」起來

8、BracketHighlighter:可自動顯示 HTML 標籤或 JavaScript 的各種對應區塊 ( { } )

9、deleteBlanklines:刪除空白行,按「ctrl + alt + Backspace

10、SideBarEnhancements:提供許多側邊攔 (SideBar) 的右鍵選單功能

11、Trailing Spaces:可以自動刪除多餘的空白

12、SublimeLinter:程式碼錯誤檢查工具
https://packagecontrol.io/packages/SublimeLinter
不過只裝這個是沒有作用的,要另外依照不同程式碼安裝相對應的套件,例如下面介紹的 SublimeLinter-php。

13、SublimeLinter-php:PHP 錯誤檢查工具,要先安裝 SublimeLinter 以及 PATH 有 php 執行檔的路徑才會有作用
https://packagecontrol.io/packages/SublimeLinter-php

14、SublimeLinter-jshint:JS錯誤檢查工具

15、phpfmt:PHP格式化
ctrl + f10, ctrl + f11
https://packagecontrol.io/packages/phpfmt

16、Theme - Soda
在個人設定檔中(Preferences > Settings – User)加入以下指令
{"theme": "Soda Dark.sublime-theme"}
https://packagecontrol.io/packages/Theme%20-%20Soda

17、Theme - Seti_UI
在個人設定檔中(Preferences > Settings – User)加入以下指令
{
"theme": "Seti.sublime-theme",
"color_scheme": "Packages/Seti_UI/Scheme/Seti.tmTheme"
}
https://packagecontrol.io/packages/Seti_UI

18、Blade Snippets:Blade模版的Snippets

19、Laravel Blade Highlighter:高亮Blade模版的參數

20、CSS3:完整支援CSS3
安裝好後,需把預設的CSS關掉,「ctrl+shift+p → Package Control: Disable Package → CSS

21、HTML5:支援HTML5

22、AutoFileName:自動找出正確的路徑,並提供該路徑下的所有檔案或資料夾給您選擇

23、Color Highlighter:在CSS中,點選有色碼的部份即可預覽顏色

24、Theme - Predawn在個人設定檔中(Preferences > Settings – User)加入以下指令
{
"theme": "predawn.sublime-theme",
"color_scheme": "Packages/Predawn/predawn.tmTheme"
}
https://packagecontrol.io/packages/Predawn

25、Theme - Material 在個人設定檔中(Preferences > Settings – User)加入以下指令
{
"theme": "Material-Theme.sublime-theme",
"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme"
}
https://packagecontrol.io/packages/Material Theme

26、Theme - Spacegray在個人設定檔中(Preferences > Settings – User)加入以下指令
{
"theme": "Spacegray Eighties.sublime-theme",
"color_scheme": "Packages/Theme - Spacegray/base16-eighties.dark.tmTheme"
}
https://packagecontrol.io/packages/Theme - Spacegray

27、YUI Compressor:壓縮js和css檔案
需要先安裝java元件,即JDK,
快速鍵「F7」或「ctrl + b」,即會產生同檔名後面接.min的js或css檔
https://packagecontrol.io/packages/YUI%20Compressor

沒有留言:

張貼留言