day1
Sublime Text 是款強大的跨平台文字編輯器，可支援 Windows、OS X、Linux 多個系統，他的開發者是前 Google 軟體工程師 Jon Skinner，據說受到 Vim 的種種啟發，決定打造一個更好的文字編輯器。他秉持著三項基本原則來 開發 Sublime Text： 1. 專注在文字與程式碼上，而不是讓人眼花撩亂的工具列； 2. 對話框訊息不使用晦澀難懂的文字； 3. 善用螢幕的每個空間，使全螢幕、多螢幕模式一起編輯檔案，儘可能很容易； Sublime Text 可以減少撰寫程式碼許多重複性的工作，讓開發者們可以更專注在程式身上，而且過程是讓人感到輕 鬆、愉悅！
Sublime Text 是款強大的跨平台文字編輯器，可支援 Windows、OS X、Linux 多個系統，他的開發者是前 Google 軟體工程師 Jon Skinner，據說受到 Vim 的種種啟發，決定打造一個更好的文字編輯器。他秉持著三項基本原則來 開發 Sublime Text： 1. 專注在文字與程式碼上，而不是讓人眼花撩亂的工具列； 2. 對話框訊息不使用晦澀難懂的文字； 3. 善用螢幕的每個空間，使全螢幕、多螢幕模式一起編輯檔案，儘可能很容易； Sublime Text 可以減少撰寫程式碼許多重複性的工作，讓開發者們可以更專注在程式身上，而且過程是讓人感到輕 鬆、愉悅！
1.sublime 安裝網站:https://www.sublimetext.com/
2.安裝套件
前置作業-安裝 Package Control操作說明
sublime啟動後我們按鍵盤 win + Shift + P ，此時會開啟一個小視窗，接著輸入 Install Package Control ，接著安裝它。
安裝套件-操作說明
在sublime一樣使用快速鍵 command + Shift + P ，輸入 Install Package Control ，這邊的步驟跟之前的目的不太一樣，之前輸入是為了安裝 Package Control，這次輸入並按下Enter後，會進到另一個視窗，這邊就可以開始安裝需要的套件。
正式安裝以下套件
1.ConvertToUTF8 套件：Sublime Text 3預設不支援中文的編碼，安裝此套件就沒問題
2..HTML5:開啟.html檔案後，輸入html:5後按下Tab鍵，直接生成一個html基本格式給你。如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
3.jQuery Mobile Snippets:安裝jQuery Mobile Snippets後輸入jQuery Mobile starter page 直接生成一個mobile 基本樣板給你。
4.Emmet:會提示html、CSS的相關格式，加快開發的速度。
這個套件有不少功能, 例如: 只打幾個縮寫, 就可以延伸出多列的 Html 指令, 範例可參考 http://docs.emmet.io/abbreviations/syntax/https://docs.emmet.io
a) div*3
b) ul>li*3 //代表 <ul> 包含 3 個 <li>
c) ul>li*3>a //代表 <ul> 包含 3 個 <li>, 而 <li> 裡面, 又包含 <a>
d) lorem //產生一段本文
e) .container>.row^.container ^結束子階層編輯，跳回父階層狀況中
5.AutoFileName:下拉式自動提示檔案連結，例如寫圖片路徑不需尋找後手動一個個輸入
6. FakeImg Image Placeholder Snippet:再製作網頁的過程中，常常會有一些版面的位置可能是已經知道圖片的大小，但是設計師還沒有把圖切好給你，這時候空一個位置在那不僅不方便我們看整體版面的配置，在美觀上也常常給人一種未完成品的感覺。這時候，你可以用簡單方便的假圖產生器快速生成一個圖，先把圖放在版面上，之後等實際的圖片切好之後，再把完成的圖置換上來就可以了。
製作300*250假圖如下:
<img src="http://fakeimg.pl/300x250">
7.ChineseLoremLpsum (lorem 外文假文 ctlorem 中文假文):輸入lorem後按下tab即生成假文章。
3.自訂snippet
1. tools> new snippets
2. 出現一個新檔案如下:
<snippet>
<content><![CDATA[
Hello, snippet.
]]></content>
<!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
<tabTrigger>hello</tabTrigger>
<!-- Optional: Set a scope to limit where the snippet will trigger -->
<!-- <scope>source.python</scope> -->
</snippet>
3. 以hello為範例
4. 在文件內只要鍵入hello然後按 tab 即可使用。
結果如下:
Hello, snippet.
推薦套件
• Package Control - 套件管理器。
• AdvancedNewFile - 在指定路徑新增檔案。
• Alignment - 讓程式碼能多行將’=’或自定義符號對齊的套件。會自動將程式碼對齊，再也不會看到眼花
• BracketHighlighter - 將括號高亮顯示。
• ConvertToUTF8 - 解決中文顯示亂碼的問題（將Big5, GBK轉為UTF8讓編輯器顯示）
• ColorHighlighter - 當的游標移至文字中如顏色相關的色碼會自動顯示對應的顏色。
• ColorPicker - 呼叫調色盤，讓你直接用選的來選顏色。
• Emmet - 原Zend Coding，能加速程式開發的神器，詳細使用方法請見官方文件。
• LiveReload - 此套件搭配對應瀏覽器擴充，可以讓你儲存檔案時，自動重新整理網頁。
• SFTP - 能夠讓你使用SFTP/FTP的方式，直接用本機的ST去修改檔案並且儲存。對於Vim苦手可說是必備套件！
• SideBarEnhancements - Enhancements to Sublime Text sidebar. Files and folders.
• SublimeLinter - 能用高亮提示使用者程式碼中，不是規範內或錯誤的寫法。
• SublimeCodeIntel - 多數語言的程式碼提示與追蹤。
選用套件
• Console API Snippets (JavaScript) - JavaScript Console API Snippets for Sublime Text
• CSS Less(ish) - 讓你用註解的方式，在CSS達到LESS用變數、嵌套的功能。
• DocBlockr - 自動完成PHP, JS, CoffeeScript, ActionScript, C, C++的DocBlock註解。
• Git - 能在ST下使用Git指令，免於在ST和Terminal間頻繁地切換。
• HTML5 - HTML5程式碼高亮與自動完成。
• jQuery - jQuery程式碼高亮與自動完成。
• JsFormat - 幫你格式化JavaScript排版，尤其使用在壓縮過的js檔上。
• LESS - LESS程式碼高亮
• Prefixr - 能透過Prefixr API協助處理CSS跨瀏覽器的相容問題。
• Sass - SASS程式碼高亮與自動完成。
• SCSS - SCSS程式碼高亮與自動完成。
• Tag - 重新格式化HTML/XML的排版。適合用在外來的dirty code。
A File Icon：在側邊欄的檔案增加圖示icon的顯示
CSS3 ：CSS3的提示碼
SublimeCodeIntel：會提示相關程式碼，極其強大的好東西
jQuery：jquery 提示碼
SublimeLinter：會提示程式碼中的錯誤，除錯必備！
Sublimerge Pro ：可以比對兩個檔案的差異處，不用大家來找碴了
ChineseLocalization：讓Sublime Text3 支援多國語系
留言
張貼留言