天天看點

最全的sublime插件整理 Package Control

Package Control

1.插件管理器

1)在Sublime中打開View –> Show Console,将以下代碼複制到輸入框中後按Enter鍵 

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()) 

2)驗證是否安裝成功 

打開Preferences –> Package Control,如果能看到此菜單,則表示安裝成功

2.Emmet

HTML/CSS代碼快速編寫插件 

1)打開控制台 

在Sublime中打開Preferences –> Package Control,也可直接按快捷鍵ctrl+shift+p,選擇或搜尋 Install Package 

2)安裝 Emmet 插件 

在輸入框中輸入 emmet,點選出現的插件,下方狀态欄會顯示安裝狀态,安裝完成會顯示說明文檔 

3)安裝PyV8插件 

正常情況下,當安裝完Emmet插件後會自動下載下傳并安裝PyV8插件,直至狀态欄不動為止 

4)驗證是否安裝成功 

建立一個.html檔案,在檔案中鍵入字元!(注意是英文符号),然後按“Tab“鍵,如果出現html基礎結構則表示安裝成功

3.PyV8

Emmet插件依賴于PyV8插件,如果自動安裝PyV8插件失敗,則需要手動下載下傳PyV8插件并安裝 

1)下載下傳PyV8插件 

打開浏覽器,輸入:https://github.com/emmetio/pyv8-binaries,點選下圖中的綠色按鈕,再點選“Download ZIP“ 

2)拷貝到Sublime中 

将下載下傳檔案解壓縮,再找到pyv8-osx-p3.zip檔案,同樣解壓縮,将其中的2個檔案拷貝到PyV8/osx-p3目錄下,如果該檔案夾中有其它内容,可以先全部删除再粘貼 

3)安裝 

再次打開Sublime後需等待安裝結束(檢視狀态欄,靜止不變),再次嘗試

4.HTML5

在Sublime中安裝 HTML5 插件

5.CSS3

在Sublime中安裝 CSS3 插件

6.JavaScript Completions

在Sublime中安裝 JavaScript Completions 插件

7.jQuery

在Sublime中安裝 jQuery 插件

8.JsFormat

在Sublime中安裝 JsFormat 插件

9.HTML-CSS-JS Prettify

HTML/CSS/JS代碼格式化插件 

1)在Sublime中安裝 HTML-CSS-JS Prettify 插件 

2)其依賴于Node.js,是以需要安裝Node.js 

到Node.js官網下載下傳對應的版本并安裝 

3)确認Node.js安裝路徑 

滑鼠右鍵HTML/CSS/JS Prettify –> Set node Path,指定Node.js的安裝路徑 

4)格式化代碼 

滑鼠右鍵HTML/CSS/JS Prettify –> Pretty Code

10.Pretty JSON

JSON代碼格式化插件 

1)在Sublime中安裝 Pretty JSON 插件 

2)自定義快捷鍵 

打開Preference –> Key Bindings-User,添加格式化代碼快捷鍵為ctrl+shift+f 

{ “keys”: [“ctrl+shift+f”], “command”: “pretty_json” }

11.Better Completion

JavaScript、jQuery、Bootstrap等js庫的自動補全插件,該插件的特點就是可以自定義配置需要自動補全的庫。 

1)在Sublime中安裝 Better Completion 插件 

2)配置需要自動補全的庫

12.SideBarEnhancements

側邊欄增強插件,可以指定預覽時使用的浏覽器并設定快捷鍵 

1)在Sublime中安裝 SideBarEnhancements 側邊欄增強插件 

2)指定使用的浏覽器 

打開Preference –> Package Settings –> Side Bar –> Settings User,在打開的檔案中添加如下内容 

“default_browser”: “chrome” //one of this list: firefox, aurora, chrome, canary, chromium, opera, safari 

3)為浏覽器綁定快捷鍵 

打開Preference –> Package Settings –> Side Bar –> key Bindings-User,在打開的檔案中添加如下内容 

{ “keys”: [“alt+f12”], “command”: “side_bar_open_in_browser” },  

至此,所有設定已經完成,可以在頁面中按相應的熱鍵,直接在指定的浏覽器中預覽

13.LESS

LESS文法高度顯示和代碼提示 

1)在Sublime中安裝 LESS 插件 

2)關閉并重新打開.less檔案即可

14.Less2Css

編譯Less,儲存.less檔案時自動編譯為.css檔案 

1)在Sublime中安裝 Less2Ccss 插件 

2)根據環境不同配置安裝也有所不同,分為windows環境和MacOS環境,具體可參考:https://fdream.net/blog/article/783.aspx 

2.1在windows環境下,依賴less.js-windows 

2.1.1)下載下傳less.js-windows-master.rar檔案,解壓到本地目錄。 

2.1.2)将目錄路徑添加到環境變量PATH中,如D:\open\less.js-windows: 

2.1.3)驗證是否成功 

打開DOS指令行,輸入lessc,如果有如下提示則表示設定成功 

2.2在MacOS環境下,依賴nodejs和lessc 

2.2.1)安裝npm:官網直接下載下傳node-v6.9.5.pkg并安裝,會自動安裝npm 

2.2.2)安裝lessc:在終端執行sudo npm install less -gd,安裝完成後在終端執行指令lessc驗證 

2.2.3)安裝less-plugin-clean-css:在終端執行sudo npm install less-plugin-clean-css -g 

2.2.4)驗證是否成功 

15.SublimeServer

讓Sublime成為靜态WEB伺服器,無需單獨啟動Tomcat或者Apache這樣的重型伺服器 

1)在Sublime中安裝 SublimeServer 插件 

2)安裝完成後點選菜單欄中的”工具”——”SublimeServer”——”Settings”,可以檢視并修改SublimeServer的伺服器端口、檔案擴充名等 

3)點選Start SublimeServer可以啟動伺服器 

4)在打開的.html檔案中右擊,選擇”View in SublimeServer”會自動打開浏覽器并通過Web伺服器進行通路 

注:SublimeServer要求你的代碼檔案夾,要添加到Sublime Text的項目裡面才能通路,步驟:點選菜單欄中的”項目”——”添加檔案夾到項目”。

16.Color Highlighter

展示顔色代碼的真正顔色。同時還提供一個顔色選擇器可以友善地更改顔色。 

1)在Sublime中安裝 Color Highlighter 插件 

2)修改顔色顯示方式,預設為下劃線顯示,修改為填充顯示 

打開Preference –> Package Settings –> Color Highlighter –> Settings User,在打開的檔案中添加如下内容 

“ha_style”: “filled”, 

3)此時會看到顔色代碼會直接顯示相應的顔色,同時可以右擊選擇”Choose color”打開顔色選擇器,自己選擇更改顔色

17.CSS Extended Completions

智能提示.css檔案中的類名,需要關聯添加CSS檔案 

1)在Sublime中安裝 CSS Extended Completions 插件 

2)将提示檔案添加到Cache緩存中 

在側邊欄中右擊檔案,選擇”CSS Extended Completions”——”Add CSS Files To Cache”等 

3)在.html檔案中引入.css樣式檔案,這時在html頁面中編寫樣式時會自動提示前面添加的css檔案中的樣式

18.AutoFileName

提示檔案路徑,快速輸入檔案名 

1)在Sublime中安裝 AutoFileName 插件 

2)在輸入檔案路徑時會自動提示,如路徑名、圖檔選取等

19.Doc​Blockr

生成優美注釋 

1)在Sublime中安裝 Doc​Blockr 插件 

2)輸入/*或/,然後按回車,會自動生成優美注釋,如果在函數上面寫/,還會包括參數、傳回值等

20.GitGutter

本地Git變化提示,可以在行首顯示目前行的Git狀态,是增加的、修改的還是删除的 

1)在Sublime中安裝 GitGutter 插件 

2)在目前Git狀态與本地倉庫中的狀态有改變時會顯示

21.AngularJS

AngularJS提示插件 

在Sublime中安裝 AngularJS 插件即可

22.MarkdownEditing

編輯markdown時高亮顯示 

1)在Sublime中安裝 MarkdownEditing 插件 

2)設定顯示樣式外觀等 

打開Preference –> Package Settings –> Markdown Editing –> Markdown GFM Settings-User,在打開的檔案中添加如下内容 

// “color_scheme”: “Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme”, 

“color_scheme”: “Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme”, 

“draw_centered”: false, //預設為true,居中對齊,設定為false,左對齊 

“wrap_width”: 120, //每行字元數上限 

“highlight_line”: true, //目前行高亮顯示 

注:更多配置可以參考Markdown GFM Settings-Default

23.Markdown Preview

在浏覽器中預覽生成的HTML檔案 

1)在Sublime中安裝 Markdown Preview 插件 

2)為浏覽器綁定快捷鍵 

打開Preference –> Key Bindings-User,在打開的檔案中添加如下内容 

{“keys”: [“alt+f11”], “command”: “markdown_preview”, “args”: { “target”: “browser”}} 

至此,所有設定已經完成,編輯md檔案後按相應的熱鍵,直接在指定的浏覽器中預覽

24.Terminal

在目前位置打開終端 

1)在Sublime中安裝 Terminal 插件 

2)使用方法 

在左側的邊欄中右擊檔案,選擇Open Terminal Here即可

25.SublimeText-Nodejs

在Sublime中直接運作調試(此插件的安裝方式比較特殊,無法直接通過Package Console安裝) 

1)git clone https://github.com/tanepiper/SublimeText-Nodejs.git ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/Nodejs 

2)配置 

當安裝好nodejs後,接着進入Perferences -> Browse Packages -> Nodejs 

打開Nodejs.sublime-build檔案,将osx中内容改為 “cmd”: [“killall node; /usr/local/bin/node $file”] 

打開Nodejs.sublime-settings檔案,将node_command内容改為/usr/local/bin/node,npm_command内容改為/usr/local/bin/npm 

3)運作node.js 

通過快捷鍵command + b直接運作,顯示調試結果(此插件的安裝方式比較特殊,無法直接通過Package )

26.ConvertToUTF8

解決Sublime不支援GBK、GB2312編碼的問題,支援打開GBK編碼的檔案 

在Sublime中安裝 ConvertToUTF8 插件

27.cssrem

自動将CSS的px值轉換為rem值(此插件的安裝方式比較特殊,無法直接通過Package Console安裝) 

1)git clone https://github.com/hyb628/cssrem.git 

2)進入packages目錄:Sublime Text -> Preferences -> Browse Packages 

3)将克隆下載下傳的cssrem-master目錄複制到上一步打開的Packges目錄裡 

4)修改預設配置 

打開cssrem-master目錄下的cssrem.sublime-settings檔案,進行修改 

“px_to_rem”: 40, //px轉rem的機關比例,預設為40,一般修改為100 

“max_rem_fraction_length”: 6, //px轉rem的小數部分的最大長度。預設為6。 

“available_file_types”: [“.css”, “.less”, “.sass”,”.html”] //啟用此插件的檔案類型。預設為:[“.css”, “.less”, “.sass”] 

5)重新開機Sublime Text

28. open in browser 在浏覽器中打開目前頁面

在 Key Bindings-User裡面添加
[{ "keys": ["ctrl+q"], "command": "open_in_browser" }]
           

29.sublime server 在伺服器端運作代碼

補充: 

下載下傳SVN伺服器代碼到本地 

1)從SVN伺服器下載下傳代碼到用戶端本地 

在終端中輸入指令:svn checkout svn://localhost/mycode/node –username=stu –password=stu /Users/wangbo/Desktop/node 

2)更新伺服器端的代碼到用戶端本地 

在終端中定位到用戶端代碼目錄後,然後輸入指令:svn update

Sublime Text 3注冊碼,輸入注冊碼: 

Ryan Clark 

Single User License 

EA7E-812479 

2158A7DE B690A7A3 8EC04710 006A5EEB 

34E77CA3 9C82C81F 0DB6371B 79704E6F 

93F36655 B031503A 03257CCC 01B20F60 

D304FA8D B1B4F0AF 8A76C7BA 0FA94D55 

56D46BCE 5237A341 CD837F30 4D60772D 

349B1179 A996F826 90CDB73C 24D41245 

FD032C30 AD5E7241 4EAA66ED 167D91FB 

55896B16 EA125C81 F550AF6B A6820916