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