此文非原創,出處見文章結尾。javascript
優雅使用Sublime Text,插件則是不可缺乏的存在;而插件的備份就顯得很是的重要(譬如:各平臺同步;更換系統/電腦,迅速使用已安裝的插件)。這事兒也很簡單,只需將Packages(Preferences > Browsephp
Packages)中內容拷貝一份,同步雲端便可;至於存儲何處,雲盤,Github,皆無不可;譬如先前有存一份於 sublime_packages,每有所需只要 Down 下來,替換掉原 Packages 下內容就好。css
----- BEGIN LICENSE ----- sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F202E 7B91AB2D 0D2A40ED 352B269B 76E84F0B CD69BFC7 59F2DFEF E267328F 215652A3 E88F9D8F 4C38E3BA 5B2DAAE4 969624E7 DC9CD4D5 717FB40C 1B9738CF 20B3C4F1 E917B5B3 87C38D9C ACCE7DD8 5F7EF854 86B9743C FADC04AA FB0DA5C0 F913BE58 42FEA319 F954EFDD AE881E0B ------ END LICENSE ------
安裝Sublime text 3插件很方便,能夠直接下載安裝包解壓縮到Packages目錄(菜單->preferences->packages)。html
按Ctrl+`調出console(注:安裝有QQ輸入法的這個快捷鍵會有衝突的,輸入法屬性設置-輸入法管理-取消熱鍵切換至QQ拼音)粘貼如下代碼到底部命令行並回車:前端
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 Text 3。若是在Perferences->package settings中看到package control這一項,則安裝成功。按下Ctrl+Shift+P調出命令面板輸入install 調出 Install Package 選項並回車,而後在列表中選中要安裝的插件。vue
PS:國內使用SublimeText3,常常可能遇到沒法安裝可用插件問題,可remove掉Package Control從新安裝下;如遇到連Package Control也沒法安裝,則能夠在別處拷貝一份關於Package Control的文件-(Package Control.sublime-package)存放於Installed Packages
目錄之下便可。java
無插件,不神器!根據本身的須要定製屬於本身的強大插件集;做爲在移動端舊遊以後,又Web端新遊的本身,牆裂推薦如下這麼幾款插件:node
MarkDown Editing
SublimeText不只僅是可以查看和編輯 Markdown 文件,但它會視它們爲格式很糟糕的純文本。這個插件經過適當的顏色高亮和其它功能來更好地完成這些任務。關於如何在SublimeText下高效些東西可參見文章:sublime text 2(3)下的Markdown寫做 抑或是前段時間寫下的追尋高效工做的一路折騰㈡python
SideBarFolders
打開的文件夾都太多了? 來用這個來管理文件夾,世界原來也能夠這麼美好。
git
ColorPicker
一般,若是你想使用一個顏色選擇器則可能打開 Photoshop 或 GIMP。而在 Sublime Text 中,你可使用內置的顏色選擇器。安裝完成後,只要按下Ctrl / Cmd + Shift + C 快捷鍵。
SublimeREPL
這多是對程序員頗有用的插件。SublimeREPL 容許你在 Sublime Text 中運行各類語言(NodeJS , Python,Ruby, Scala 和 Haskell 等等)。
Ctags插件
有童鞋抱怨Sublime Text不能支持函數的跳轉(好比像Eclipse那樣,按住Control點擊該方法或者對象,便可跳轉到定義的地方; Alt+←便可回到原處)。其實Sublime Text也能夠藉助插件實現之(固然,有些狀況下:Can not find defination)畢竟這個也是藉助正則來匹配完成的。所以這個也就要求代碼很規範。這個插件相對來說會有些麻煩,具體的能夠參見:Sublime Text ctags 的配置.
SublimeLinter插件
SublimeLinter 是前端編碼利器——Sublime Text 的一款插件,用於高亮提示用戶編寫的代碼中存在的不規範和錯誤的寫法,支持 JavaScript、CSS、HTML、Java、PHP、Python、Ruby 等十多種開發語言。這篇文章介紹如何在 Windows 中配置 SublimeLinter 進行 JS & CSS 校驗。
好比寫例如像lua這樣的弱語言腳本代碼,有這個能夠規避掉不少不應有的低級錯誤吧?固然這也須要你SublimeLinter安裝完畢以後再安裝一個SublimeLinter-lua
便可。具體的使用能夠參見:藉助 SublimeLinter 編寫高質量的 JavaScript & CSS 代碼
SideBarEnhancements插件
SideBarEnhancements是一款很實用的右鍵菜單加強插件;在安裝該插件前,在Sublime Text左側FOLDERS欄中點擊右鍵,只有寥寥幾個簡單的功能;安裝了就至關於給其豐了大胸通常。
更強大的是,該插件還能讓咱們自定義快捷鍵呼出某個瀏覽器以預覽頁面!這樣就不用到項目目錄下尋找和拖動到特定瀏覽器中預覽了。
安裝此插件後,點擊菜單欄的preferences->package setting->side bar->Key Building-User,鍵入如下代碼:
[ { "keys": ["ctrl+shift+c"], "command": "copy_path" }, //chrome { "keys": ["f2"], "command": "side_bar_files_open_with", "args": { "paths": [], "application": "C:\\Users\\jeffj\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe", "extensions":".*" } } ]
這裏設置按Ctrl+Shift+C複製文件路徑,按F2便可在Chrome瀏覽器預覽效果(若是須要的話,也能夠根據本身的須要爲Firefox,Safari,IE,Opera等加上),固然你也能夠本身定義喜歡的快捷鍵,最後注意代碼中的瀏覽器路徑要以本身電腦裏的文件路徑爲準。
HTML-CSS-JS Prettify
一款集成了格式化(美化)html、css、js三種文件類型的插件,即使html,js寫在PHP文件以內。插件依賴於nodejs,所以須要事先安裝nodejs,而後才能夠正常運行。插件安裝完成後,快捷鍵ctrl+shift+H完成當前文件的美化操做。插件對html、css文件的美化不是很是滿意,但還能夠,後面將說明如何修改css美化腳本。本人用起來超級爽的,鑑於篇幅,就不贅述,能夠參見這篇介紹。
CSScomb CSS屬性排序:
有時候看看本身寫的CSS文件,會不會以爲屬性很亂查找不易維護難?CSScomb能夠按照必定的CSS屬性排序規則,將雜亂無章的CSS屬性進行從新排序。選中要排序的CSS代碼,按Ctrl+Shift+C,便可對CSS屬性從新排序了,代碼今後簡潔有序易維護,若是不款選代碼則插件將排序文件中全部的CSS屬性。固然,能夠本身自定義CSS屬性排序規則,打開插件目錄裏的CSScomb.sublime-settings文件,更改裏面的CSS屬性順序就好了。由於這個插件使用PHP寫的,要使他工做須要在環境變量中添加PHP的路徑,具體請看github上的說明。
SublimeTmpl 快速生成文件模板
一直都很奇怪爲何sublime text 3沒有新建文件模板的功能,像html頭部的DTD聲明每次都要複製粘貼。用SublimeTmpl這款插件終於能夠解脫了,SublimeTmpl能新建html、css、javascript、php、python、ruby六種類型的文件模板,全部的文件模板都在插件目錄的templates文件夾裏,能夠自定義編輯文件模板。
SublimeTmpl默認的快捷鍵:
ctrl+alt+h html ctrl+alt+j javascript ctrl+alt+c css ctrl+alt+p php ctrl+alt+r ruby ctrl+alt+shift+p python
若是想要新建其餘類型的文件模板的話,先自定義文件模板方在templates文件夾裏,再分別打開Default (Windows).sublime-keymap、Default.sublime-commands、Main.sublime-menu、SublimeTmpl.sublime-settings這四個文件照着裏面的格式自定義想要新建的類型,這裏就詳細介紹了,請各位本身折騰哈~
Javascript-API-Completions:
支持Javascript、JQuery、Twitter Bootstrap框架、HTML5標籤屬性提示的插件,是少數支持sublime text 3的後綴提示的插件,HTML5標籤提示sublime text3自帶,不過JQuery提示仍是頗有用處的,也可設置要提示的語言。
SFTP:快速編輯遠程服務器文件
在Win下用Xftp
和 WinScp
,被這種須要切換點擊or F5刷新的手動操做蛋疼到無語;故此一碰見這SFTP
,頓覺這世界都美好了許多。固然Sublime下面也有些其餘同步插件,好比FtpSnyc
,可是配置起來的錯誤提示一點都不人性化,就絕不留情的捨棄了。Sublime下有SFTP
,只要Ctrl+S
便可同步本地到服務器,妥妥的爽歪歪有麼有?如何配置,請參見在 Sublime Text中使用 SFTP 插件快速編輯遠程服務器文件;如欲使用FtpSync
可參見Sublime使用及FtpSync遠程同步;大道至簡,因簡而悅;開心壘碼,值得折騰。
WakaTime -- 記錄你的Code時間;
WakaTime能夠作到精確地統計到你花在某個項目上的時間;WakaTime針對不一樣的IDE,擁有不一樣的插件,在Sublime上安裝着插件,就能統計到我使用Sublime進行的全部項目的行爲。能夠高效管理和知曉本身code時間;而且,統計完善, 適合發朋友圈裝逼(若是你喜歡的話)~
Waka的基本設計和rescuetime相似。每一個人註冊完將獲取一個key,裝一個客戶端,把key輸進去(登錄是同一個道理),而後它就把本地的全部行爲帶個key扔給服務器來統計,一段時間以後給你個報表。不過Waka作的真的很精準,精確到每個文件用了多少秒,每一種語言用了多少時間。
DocBlockr: 代碼塊註釋
能夠快速的對函數進行註釋。保持代碼規範。支持多種語言,有 JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.
/*
:回車建立一個代碼塊註釋/**
:回車在自動查找函數中的形參等等。它會生成 JSDoc 格式的註釋。若是你從沒有使用過相似的工具,DocBlockr 會讓你以爲之前沒有它是如何寫代碼的。幫助你創造你的代碼註釋,經過解析功能,參數,變量,而且自動添加基本項目;若是你願意其更爲便捷,不妨再結合AutoHotKey
,高效註釋,由此開啓。
sublime-text-git: Git 版本控制
可視化的操做:幫助你與你的Git repo協議進行交互。它支持不少命令像init,push, pull, branch, stash,等等。使用它固然提早須要安裝 Git,並作好響應的配置;對於這個插件,不妨看下這篇文章 Using Git Inside of Sublime Text to Improve Workflow,相信她的伴隨不會讓你失望的。
advancedNewFile: 快速建立文件
當咱們在 Sublime Text 編輯器裏咱們能夠經過快捷鍵command+n
(win: ctrl+n
),來新建一個文件,而後command+s
(Win:ctrl+s
)進行彈出保存框,填寫文件名進行保存。仍是老問題,麻煩!!咱們接下來就經過安裝advancedNewFile插件來提高咱們在Sublime Text編輯器下的建立文件速度。
關乎其使用,安裝完成以後,運用快捷鍵command+alt+n
(win: ctrl+alt+n
)
,Sublime Text底部會彈出輸入框;咱們只需在這個輸入框裏輸入咱們須要新建的文件名回車便可(咱們甚至能夠帶路徑,譬如:src/components/perfect.vue;這就會在當前項目目錄下,創建該文件;須要注意的是這路徑前面不可加 '/', 這會使得創建的路徑成爲用戶目錄,而非改項目目錄)。默認狀況下文件會存儲在當前目錄,若是當前沒有目錄,會存儲在用戶的家目錄。
剩下些許其餘的能夠按需安裝的插件,好比:
Vue
框架開發,是一個很酷爽的存在,那麼此插件也就頗有必要擁有;同時Jade
, SASS
等插件也是頗有擁有的必要,誰用誰知道(說到用vue, 這vue-cli
就蠻有使用的必要了( Webpack, Eslint, Test等都配置完善,十分貼心); 而寫Js代碼,於稍大項目 Eslint 就頗有使用必要,而 sublime 在針對使用 Eslint 的 *.vue
文件,目測尚未很好格式化插件,坐等誕生😳)。首先要會使用SublimeText內置的快捷鍵:
好比 Commond Shift P
打開命令面板:例如打開Package Control安裝各類插件;能夠能夠輸入Set(Snytax)來改變使用的語言環境,瞬間切換等等。
設置快捷鍵。在SublimeText裏,打開Preferences -> Key Bindings - User,我設置的快捷鍵:
[
{ "keys": ["ctrl+f9"], "command": "build" }, { "keys": ["f10"], "command": "build", "args": {"variant": "Run"} }, { "keys": ["ctrl+shift+x"], "command": "toggle_comment", "args": { "block": true } }, ]
具體可參見這邊文章Sublime Text3 快捷鍵彙總及設置快捷鍵配置環境變量
定製屬於本身的專屬快捷鍵:
好比就拿定製Sublime Text(2/3)編譯lua 的快捷鍵來講:
curl -s https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py | sudo python - install rudix 或者:curl -O https://raw.githubusercontent.com/rudix-mac/rpm/2014.10/rudix.py sudo python rudix.py install rud
{
"cmd": ["/usr/local/bin/lua", "$file"], "file_regex": "^(...*?):([0-9]*):?([0-9]*)", "selector": "source.lua" }
保存爲Lua.sublime-build,而後Tools-Build System上就能選擇lua來編譯腳本了)
PS:網上找到的大多數都是 "cmd": ["lua", "$file"]可能我是用rudix自動來安裝lua的,須要改一下路徑。
新建一個xx.lua文件,隨便寫個語句,選擇lua爲build system,按一下command+b
,就能跑出來了。 以下圖所示:
1. 設置
2. 編輯
3. 選擇
4. 查找
5. 跳轉
6. 窗口和Tab頁
7. 分屏
8. 格式化
9. 括號
NOTE:
1. Ctrl + Shift + F: 開啓多文件搜索&替換,此快捷鍵和搜狗輸入法的簡繁切換快捷鍵有衝突,因此當你調不出搜索框時,注意一下當前是否切換到了搜狗輸入法,若是是的話,切換到英文輸入法,而後再Ctrl + Shift + F調出。
2. Ctrl + Shift + F: 開啓多文件搜索&替換, 默認在當前打開的文件和文件夾進行搜索/替換,
咱們能夠指定在當前打開的文件進行搜索/替換
11. 有時咱們須要對一片區域的全部行進行同時編輯,Ctrl+Shift+L
能夠將當前選中區域打散,而後進行同時編輯:
12. 有打散天然就有合併,Ctrl + J
(mac下Command+J)能夠把當前選中區域合併爲一行:
13. 在Ctrl + P
(Command+P)匹配到文件後,咱們能夠進行後續輸入以跳轉到更精確的位置:
@symbol
跳轉到symbol符號所在的位置#keyword
跳轉到keyword所在的位置:12
跳轉到文件的第12行。14. Sublime Text的查找有不一樣的模式:Alt + C
切換大小寫敏感(Case-sensitive)模式,Alt + W切換整字匹配(Whole matching)模式,除此以外Sublime Text還支持在選中範圍內搜索(Search in selection),這個功能沒有對應的快捷鍵,但能夠經過如下配置項自動開啓。
"auto_find_in_selection": true
這樣以後在選中文本的狀態下範圍內搜索就會自動開啓,配合這個功能,局部重命名(Local Renaming)變的很是方便:
(13)Windows下Ctrl + ←/→
進行逐詞移動,相應的,Ctrl + Shift + ←/→
進行逐詞選擇。
Command+←/→
是從一端移動到另外一端;相應的,
Command + Shift + ←/→
是從一端選擇到另外一端。
(14) Windows下Ctrl + ↑/↓
移動當前顯示區域,Ctrl + Shift + ↑/↓
移動當前行。
Command + ↑/↓
是從當前行移動到頭/尾;相應的,
Command + Shift + ↑/↓
是從當前行選擇到頭/尾;
(15)使用Ctrl + N
在當前窗口建立一個新標籤,Ctrl + W
關閉當前標籤,Ctrl + Shift + T
恢復剛剛關閉的標籤。
(16)編輯代碼時咱們常常會開多個窗口,因此分屏很重要。Windows下:Alt + Shift + 2
進行左右分屏,Alt + Shift + 8
進行上下分屏,Alt + Shift + 5
進行上下左右分屏(即分爲四屏)。
(17)Sublime Text基本的手動格式化操做包括:Ctrl + [
向左縮進(等同於將一塊選中Shift+Tab),Ctrl + ]向右縮進(等同於將一塊選中後Tab鍵),註解: Ctr+[ 和 Ctr+[ 針對一塊連續內容使用,無需選中;此外Ctrl + Shift + V能夠以當前縮進粘貼代碼(很是實用)。
(18) (好吧,嘗試了下Windows下的這個,目測不行,看來須得安裝下Clipboard-history插件~(粘貼板歷史記錄)才行啊)(Mac下Command+Shift+V),粘貼之時能夠調出以前粘貼過的內容(以一個輕量彈框顯示以供選擇),哇哦,才發現這個功能,感受棒棒噠😄😄。Ctrl+Shift+V
(19) Sublime text 刪除插件步驟:「Ctrl+Shift+P」—「Remove Package」—「找到須要刪除的插件,並點擊便可刪除」;
(20) 做爲強大而小巧,性感且快捷的SublimeText,怎麼可以容許不時彈個框提醒你購買或者別的,而且頂部有未註冊這樣破壞美感的存在呢?OK,輸入Sublime text 3最新版破解方法中提供的註冊碼,就妥妥的哦了。
SublimeText 她不只僅是做爲性感無比,強大可大編輯器的存在;要知道在現在這麼靠臉吃飯的時代,她的美者這方面怎麼可能不臻至完美呢?Mac和Windows都默認十多種不一樣風格的主題,想必會有您喜歡😍的。即使沒有也不要緊,咱們能夠本身定製本身喜歡的風格主題。在線製做專屬Sublime Text主題。這個網址能夠輕鬆按照本身的意願製做喜歡的主題。完畢以後將生成的xx.sublime.theme文件,點開Preferences -> Browsr Packages這個,放在這個直屬目錄之下,便可在Theme處選擇這個主題了,親測沒有問題。
後記:做爲如此便捷的她(Sublime Text3),值得分享確定不止這些,在Coding and Writing路上,要繼續去發現和發揚她的美,未完待續...
固然你可使用其它諸如jsc之類的環境來運行js, 本文使用的是nodejs. 首先確保你的電腦已經安裝好nodejs, 並已將其添加到環境變量中 (通常安裝時自動添加或者詢問是否添加)
在sublime text中依次打開Tools -> Build System -> New Build System... 粘貼如下代碼後保存(如Node.sublime-build), 而後把Build System設成Automatic
{ "cmd": ["node", "--use-strict", "--harmony", "$file"], "selector": "source.js"}
在以上的build文件中(Node.sublime-build), node是執行命令, --harmony和--use-strict是執行參數, file"], "selector": "source.js"}
在sublime test中新建一個test.js文件, 而後輸入你的測試代碼, 好比:
for (let i = 0; i < 3; i++) { console.log('i:', i); }
使用快捷鍵 ctrl + b
, 將獲得如下執行結果:
i: 0i: 1i: 2[Finished in 0.1s]
舒適註解:
不只主題能夠更換,圖標也能夠。在Dribbble上有大量從新設計的Sublime Text精美圖標。更換方法:
.icn
s格式的最好。若是沒有,用iConvert轉換之。open /Applications/Sublime\ Text.app/Contents/Resources/
Sublime Text 3.icns
或Sublime Text 2.icns
文件。若是你常用SublimeText從事英文創做,那麼啓用拼寫檢查就很是有用處了。選擇Preferences > Settings – User
菜單,添加如下代碼:
"spell_check": true,
參考文章出處:
Sublime Text 全程指引 by Lucida
Sublime Text 3能用支持的插件推薦
Wakatime 測試工做時間
Sublime Text3插件:加強篇
20個強大的SublimeText插件
做者:晚晴幽草連接:https://www.jianshu.com/p/3cb5c6f2421c來源:簡書簡書著做權歸做者全部,任何形式的轉載都請聯繫做者得到受權並註明出處。