Sublime Text 網頁勞工常用擴充套件

誰適合用 Sublime text?
– 發現很多想做的網頁效果無法在 Dreamweaver 「工具列按一按就跑出來」,一定要打 html 跟 css,發現 DW 太肥、DW 的預覽功能又用不到的人類。
– 不知道怎麼讓 Visual Studio 在寫 CSS 時自動幫你打冒號的人類。
– 覺得用 Dreamweaver 寫 SASS 不好用的人類。
– 不知道怎麼讓 Dreamweaver 的語法編輯器變成暗色系的人類。
– 覺得 Visual Studio 註解的快速鍵很複雜的人、覺得 Dreamweaver 為什麼沒有註解的快速鍵可以用的人。

誰不適合使用 Sublime text?
– 團隊使用 asp.net 相關方案的成員,因為 sublime text 常常認不出格式,無法正確變色,一些功能也不如 Visual Studio 方便。
– 常常需要維護 Dreamweaver 專屬功能的東西(如DWT模板)。
– 常常需要建立/維護 HTML TABLE,希望可以即時預覽表格長什麼樣子,用滑鼠點選切割或合併儲存格、用滑鼠點選跨欄或跨列。但是 Sublime text 沒有這種視覺介面,只能敲完語法再用瀏覽器看。
– 看不懂程式語法,或是討厭打字,只喜歡動滑鼠跟出一張嘴的人。
– 英文不好的人,因為 Sublime text 沒有中文化。

Sublime text 主程式下載
http://www.sublimetext.com/3

要裝套件,先裝 Sublime Package Control
1.按Ctrl + ` 叫出console
2.輸入code,按Enter
3.安裝套件時按Ctrl+shift+p
4.輸入install

必備擴充套件
– ConvertToUTF8 不裝的話,無法開啟 big5 的網頁
– IME Support 不裝的話,輸入中文會很痛苦
– CSS3 不裝的話,一些 css 屬性不會自動提示或標顏色,會比 VS 跟 DW 還難用。
– HTML5 不裝的話,一些 html5 標籤不會自動提示或標顏色
– HTMLAttriutes 不裝的話,一些 html5 屬性不會自動提示
– jQuery 提示 JQuery 相關函式。

好用擴充套件
– HtmlTidy 把 HTML 排整齊(使用ctrl+shift+p > HtmlTidy)
– Color Highlighter 讓 HEX 色碼直接顯示顏色。
– AutoFileName 插入圖片時自動列出目錄底下的檔案,與相關屬性。
– SFTP ftp 管理、隨存隨上傳。
– JSformat 把 JS 排整齊(Ctrl+Alt+F)。
– Bracket Highlighter 標亮成對的括號、雙引號、單引號,可使用 Alt + Up/Down 來回開頭與結尾。
– All Autocomplete 自動完成頁面中寫過的 id/class/標籤名稱。
– emmet 使用一些簡寫打法產生 html 或 css
– livereload 存檔時自動重整瀏覽器內的網頁內容。
– tag 把 html 排整齊
– Sublimerge 左右視窗比較

疑難排除
– 有時候 sublime text 程式更新,造成一些自動完成或自動提示類的擴充套件不相容,在一些地方會突然卡頓。
按Ctrl + ` 叫出 console,然後輸入 dis,選Package Control: disable packages,暫時停用某套件。
– 常用快速鍵(取代已開啟的所有檔案的內容): Ctrl+shift+p,
– 常用快速鍵(註解): Ctrl+/
– 常用快速鍵(合併多行): 選取要合併的行後,按Ctrl+J
– 程式碼上下對調: Ctrl+Shift+上/下箭頭
– 同時在多處輸入文字:按住 Ctrl,再點滑鼠左鍵

其他連結
中文手冊 http://docs.sublimetext.tw/
Package Control https://sublime.wbond.net/
动画演示 Sublime Text3 非常有用的快捷键 http://www.wenwenyun.com/w3c/dev/2014/1110/2453.html

留言:

近期熱門 Hot Posts