Sublime Text3 我的使用心得

時間 2019-11-24

原文原文鏈接

sublime與webstorm的比較：css

webstorm真心很強大，強大到可以幾乎知足全部前端開發者編程的需求，方便的快捷鍵操做、代碼提示、瀏覽器查看、工程管理、歷史記錄（能夠找到以前編輯的內容，即便把文件刪掉，相似svn、git），各類主題風格，與webstorm相比，sublime更像是剛買回來的「裸機」，什麼都沒有，須要本身根據需求進行插件安裝。不過我的比較喜歡這種，「一直都是小受，終於能夠攻一把了」。html

webstorm讓我決定放棄也是由於它功能太強大了，強大到打開軟件，讓我產生時空錯亂感，就跟TM打開eclipse同樣，瞬間讓我想起之前開發java的時光（fuck，爲了天天不想在SB同樣地等着elipse打開，而後還得卡幾下，因此一個月關一次電腦）。前端

sublime最吸引個人地方，就在於一些獨特的快捷鍵、打開速度很是之快（賽過個人手速），尤爲是在家想寫點東西時，不會由於軟件漫長的打開同時，抽空去幹別的，從而一去不返，*_*，自從習慣於用sublime之後，媽媽不再用擔憂個人學習了。java

廢話很少說，下面就讓咱們一塊兒進入sublime的世界吧，看看我是怎麼把玩它的，sorry，寫着寫着就浪了。node

安裝與註冊jquery

我使用的是 sublime Text Build 3114git

註冊碼：web

Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36

用戶配置：npm

菜單 Preferences -> setting user{編程

"font_size": 16,
  "ignored_packages":
  [
    "Vintage"
  ],"highlight_line": true, //光標所在行高亮
  "show_encoding": true, //顯示文件編碼方式
  "bold_folder_labels": true  //讓文件夾加粗，粗的仍是細的，根據自身狀況奧

}

經常使用插件安裝與使用

* 首先要安裝package control組件，這就比如你想要嘿嘿嘿，總得先找個女友，至少也得是個充氣的吧

* 按Ctrl+`調出console

* 粘貼如下代碼到底部命令行並回車：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

* 重啓Sublime

* 安裝插件方法：按下Ctrl+Shift+P調出命令面板 -> 輸入install 調出 Install Package 選項並回車，而後在列表中選中要安裝的插件

1.編輯html/css提示插件： Emmet插件

2.原生JS提示補全插件： autoCompleteJs（替代方案，手動下載AndyJS2，而後解壓在packages中）

3.jQuery提示補全插件：jQuery

4.支持H5插件：HTML5和HTMLattributes（他倆是夫妻檔奧，因此要一塊兒來）

5.解決Sublime不支持GBK、GB2312編碼：ConvertToUTF8

6.方法說明自動生成：DocBlockr （在方法的上一行當輸入/**而且按下Tab鍵的時候，這個插件會自動解析任何一個函數而且爲你準備好合適的模板）

7.自動補全文件路徑：AutoFileName（例如引入圖片，自動補全圖片路徑）

8.建立新文件插件：Advance new file（ctrl+alt+n: 直接輸入文件名，則在主目錄建立新文件；若是輸入路徑/文件名，則能夠自動在某個路徑下建立文件）

9.管理最新插件庫：nettus fetch

選擇 Fetch:Manage，而後進行配置，配置如圖所示

接下來，就NB了，新建一個文件而後，在文件中，Ctrl+Shift+P: fetch File, 而後選擇 jquery 回車就下載了

10.鼠標右鍵功能（新建、刪除、重命名等等）：SideBarEnhancements（在擴展插件裏面已經沒有了，須要手動下載，而後解壓放在package目錄下

下載地址：http://pan.baidu.com/s/1jG4AnsU）

11.高亮顯示匹配的括號、引號和標籤：BracketHighlighter

12.CSS可自動添加 -webkit 等私有詞綴：Prefixr（Ctrl+Alt+X觸發）

13.JS代碼格式化插件：JS Forma（ 選中代碼，而後ctrl+alt+f）

14.查看標籤、CSS屬性瀏覽器支持狀況：Can I Use

15.安裝主題：Theme - Flatland

激活: 修改 Preferences 文件，經過 Sublime Text 2 的菜單「Preferences > Settings - User」可打開用戶配置文件，在其中添加（或修改原來的設置）：
"theme": "Flatland Dark.sublime-theme",
"color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme"

而後經過菜單選擇主題，進行配置

16.語法檢查插件：這個厲害嘍，須要配合node結合使用，關於node的使用，我會在下一篇文章中闡述

安裝這四個插件

SublimeLinter

SublimeLinter-contrib-htmlhint

SublimeLinter-csslint
SublimeLinter-jshint

node端安裝下面3個依賴包
npm install -g xg-htmlhint
npm install -g csslint
npm install -g jshint

17. Less：分別安裝less 和 less2css 這兩個插件

node：npm install -g less
npm install -g less-plugin-clean-css

經常使用快捷鍵

* Goto
* Goto Anything：ctrl+p 打開輸入的頁面
* Goto Symbol: ctrl+r 在定位到js方法或css樣式的行
* 打開的文件切換: ctrl+PgUP/PgOn 或 ctrl+tap進行切換
* 技巧:好比要修改style.css文件的body樣式，能夠 ctrl+p ,輸入style.css@body 就能定位到body了
* 在打開的文件裏面, ctrl+p ,輸入#body 就能定位到當前文件的body了

* 多行遊標（至關find Replace）
* ctrl+d:一次增長一個遊標，好比有多個 mode 單詞，鼠標選擇mode,而後按一次ctrl+d 就同時增長選擇了一個mode，選擇幾個就按幾回快捷鍵
* ctrl+k ctrl+d 能夠跳過一個mode
* Esc 能夠推出多行遊標
* alt+F3 : 能夠產生多行遊標,一次選中全部的點擊的單詞
* 按住shift+鼠標右鍵進行拖拽: 也能產生多行遊標

* 命令模式
* ctrl+shift+p: 切換文件語法模式,好比:html,選擇後就是html文件了

* ctr+回車，在當前行下方加入一行* ctrl+shift+回車，在當前行的上方加入一行* Ctrl+KK:從光標處刪除至整行的尾部* Ctrl+Shift+D:複製光標所在的整行，插入在該行以前* Ctrl+J：合併行(已選擇須要合併的多行時能夠理解爲不換行模式，直到遇到編輯器邊框後自動換行* Ctrl+Shift+[：摺疊代碼* Ctrl+Shift+]：展開代碼* Shift+table:向左縮進、Tab向右縮進* Shift+Tab 去除縮進* CTRL+O：打開文件* Ctrl+J 合併行（已選擇須要合併的多行時）* Ctrl+Shift+K 刪除整行* Alt+Shift+1（非小鍵盤）窗口分屏，恢復默認1屏* Alt+Shift+2 左右分屏-2列