sublime text 3

1. 安裝與設定

  1. 請至官網下載：https://www.sublimetext.com/3
  2. 安裝套件管理程式
    1. 下載 Package Control.sublime-package 至 Installed Packages/ 
      防毒與防火牆有時會阻擋連線
    2. 打開控制台列: 從選單的View > Show Console。或是按快捷鍵「ctrl+`」
    3. 貼上這個網站提供的的安裝碼: https://packagecontrol.io/installation
    4. 試著打開命令列: 按快捷鍵ctrl+shift+p。從選單的Tools > Command Palette。
  3. 安裝套件
    打開命令列(按快捷鍵ctrl+shift+p。從選單的Tools > Command Palette。)，輸入install，找到"Package Control: Install Package"，然後按下Enter鍵。接著輸入要安裝的套件名稱，再按下Enter鍵就會進行安裝。
    ​以下為基本需要安裝的套件：
    1. ChineseLocalizations: 選單中文介面，有日語、簡中、繁中三種語言。
      「Help/language」選擇 語系
    2. ConvertToUTF8: 編輯或儲存GBK或BIG5編碼的文件，或是互轉編碼為UTF-8。
  4. 前端(Javascript/HTML)工程師會用到的幾個套件：
    1. Emmet: 用簡碼的方式輸入HTML與CSS碼，以前叫Zen Coding。搭配小抄學習會比較快。
    2. jQuery: 針對jQuery程式碼提供較佳的高亮度函式顯示與程式片段。
    3. SublimeCodeIntel: 智慧型語法、函式自動完成的套件，支援多種語言如JavaScript, Python, HTML, Ruby, Python3, XML, HTML5, Perl, CSS, Node.js, PHP等等。
    4. JsFormat: 格式化Javascript/JSON程式碼的套件。
    5. SublimeLinter: 檢查程式的基礎套件，主要用來檢查程式碼的語法問題，支援多種語言如Javascript, CSS等等。
      不過只裝這個是沒有作用的，要另外依照不同程式碼安裝相對應的套件，例如下面介紹的 SublimeLinter-php。
    6. SublimeLinter-php：PHP 錯誤檢查工具，要先安裝 SublimeLinter 以及 PATH 有 php 執行檔的路徑才會有作用
      https://packagecontrol.io/packages/SublimeLinter-php
  5. 其他推薦的套件：
    1. SideBarEnhancements: 加強側邊列(檔案與資料夾)功能的套件。
    2. BracketHighlighter: 把各種括號符號、標記特別高亮度顯示出來。
    3. Color Highlighter: 有顏色碼的地方用顏色標示出來。
      「設定/Package Settings → Color Highlighter → Settings – User」 
      {
"ha_style": "filled"
}

       

    4. Alignment
    5. DocBlockr：自動產生區塊是註解的工具，可用在 JS, CSS, PHP, CoffeeScript, Actionscript, C & C++ 等等
    6. Color Picker：在CSS檔案中直接開啟色盤選色。按「ctrl + shift + c」，不過跟ConvertToUTF8的快捷鍵打到，要修改
    7. Bootstrap 3 Snippets ：使用 Sublime Text Snippets 快速編輯 Bootstrap 3 的 HTML 代碼
    8. TrailingSpaces：這款插件能高亮顯示多餘的空格和Tab
  6. 參考與推薦網站
    1. Sublime Text 手冊
    2. Sublime Text 3 Mac 指南
    3. GETTING STARTED WITH SUBLIME TEXT 3: 25 TIPS, TRICKS, AND SHORTCUTS
    4. Sublime Text Unofficial Documentation
    5. 下載

 

sublime text 3

2. 操作

  1. 改變文字大小：「設定/字型」「ctrl + =」增大 「ctrl + -」減少
  2. 分割視窗：「檢視/佈局」
  3. 切換全螢幕：「F11」
  4. 切換側邊欄：「檢視/側邊欄」
  5. 加入專案資料夾：直接拖曳資料夾至左側或「檔案/資料夾」
  6. 開關左側「專案資料夾」： ctrl+k , ctrl+b 請注意順序
  7. 解決開發PHP時，正常雙擊選取不到$
    在個人設定檔中（Preference->Settings User）(設定/設置用戶)加入設定
    {"word_separators": "./\\()\"'-:,.;<>~!@#%^&*|+=[]{}`~?"}
  8.  

sublime text 3

3. emmet 快捷鍵

  1. 快速編寫HTML代碼：「!」+ tab、「html:5」+ tab

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

  2. 添加 class，id，標籤和屬性

id： p#foo => <p id="foo"></p>
class：.container =>  <div class="container"></div>
內容： h1{foo} => <h1>foo</h1>
屬性： a[href=#] => <a href="#"></a>

  1. 嵌套

>：子元素符號，表示嵌套的元素  p>span => <p><span></span></p>
+：同级標籤符號 h1+h2 =>
 

<h1></h1>
<h2></h2>


^：可以使該符號前的標籤提升一行 p>span^p
 

<p><span></span></p>
<p></p>
  1. 分組

(.foo>h1)+(.bar>h2) 
 

<div class="foo">
	<h1></h1>
</div>
<div class="bar">
	<h2></h2>
</div>

  1. 隱式標籤 

    聲明一個帶類的標籤，只需輸入div.item，就會生成<div class="item"></div>。 

    在過去版本中，可以省略掉​​div，即輸入.item即可生成<div class="item"></div>。現在如果只輸入.item，則Emmet會根據父標籤進行判定。比如在<ul>中輸入.item，就會生成<li class="item"></li>。
    下面是所有的隱式標籤名稱：
    li：用於ul和ol中
    tr：用於table、tbody、thead和tfoot中
    td：用於tr中
    option：用於select和optgroup中

  2. 定義多個元素 
    要定義多個元素，可以使用*符號。比如，ul>li*3可以生成如下代碼： 
    <ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

     

  3. 定義多個帶屬性的元素 
    如果輸入ul>li.item$*3，將會生成如下代碼： 
    <ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
</ul>

     

  4. CSS縮寫
w10 => width: 10px;
h10 => height: 10px;
bg:#000 => background: #000;
  1. 假字
    lorem 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

     

  2.  

sublime text 3

4. Sublime text3 插件ColorPicker(調色板)不能使用快捷鍵的解決方法

原因：

convertToUTF8和ColorPicker快捷鍵衝突，convertoUTF8的默認轉換GBK的快捷鍵和ColorPicker打開調色板的快捷鍵都是ctrl+shift+c

解決方案：

ConvertToUTF8 比較不常用，所以調整它的快捷鍵

「設定/瀏覽資源包」=> 打開「ConvertToUTF8」資料夾

「Default (Windows).sublime-keymap」拖曳至 sublime text3 編輯
多加 +alt 即可
 

[
	{ "keys": ["ctrl+shift+alt+c"], "command": "convert_to_utf8", "args": {"encoding": "GBK", "stamp": "0" } }
]