sublime text3--js智能提示插件以及其他常用插件


在諸多工具中,Sublime Text無疑是一款利器,它界面優美、功能強悍、性能令人驚訝,需要注意的是,它並不是IDE,而是一個單純的文本編輯工具,但其代碼高亮顯示、語法提示、自動完成且反應快速,還有各種豐富插件的支持,使得文本編輯過程非常規范、快速高效。

下載安裝

直接去官網http://www.sublimetext.com/3下載官方版,盡量不要下載網上的中文版,會出現各種奇怪的問題。安裝時next,next之后,注意在安裝時勾選 Add to explorer context menu ,如圖,這樣在選中文件右鍵可以直接使用Sublime Text打開。

sublime是個收費軟件,但官網下載的sublime安裝后可以正常使用,無需購買,購買的好處在於你使用過程中不會彈出提示框讓你購買(其實彈出頻率很低,不影響正常使用)。

改變字體和背景顏色

 

設置字體大小並保持

設置背景顏色

常用插件

sublime是通過插件管理器Package Control地對插件瀏覽、安裝和卸載插件。

安裝Package Control

百度搜索Package Control打開官網

 

 

 

點擊下載文件

 

打開文件目錄

把下載文件放在Installed Packages目錄下並重啟編輯器    安裝成功

 

安裝插件

安裝插件時,先使用Ctrl+Shift+P(Tools→Command Palette...)打開控制面板,輸入PackageControl  回車  顯示如圖:

 

 

選擇Package Control:Install Package,回車。安裝成功后如圖所示,在輸入框中輸入插件名字選擇插件回車即可安裝插件。

 

Emmet

前端開發必備,Write less , show more,使用Tab鍵觸發。安裝Emmet后,可以輸入少量代碼后摁Tab鍵,系統自動補全代碼。

 

AutoFileName

 

快速列出你想引用的文件夾里面所有文件的名字,比如想引用test/img/1.png。只需要輸入/img,該插件就會自動提示/img下面的所有文件名,如圖

BracketHighlighter

 

高亮顯示[], (), {}, “”, ”, <tag></tag>符號,便於查看起始和結束標記。如圖:

ColorPicker

 

調色板,需要輸入顏色時,可直接選取顏色。使用快捷鍵ctrl+shift+c即可打開調色板。需要注意的是,這個快捷鍵可能會打不開調色板,原因是該快捷鍵被占用了,最直接的解決辦法是直接在Preferences→Key Bindings-User中配置:“{ "keys": ["ctrl+shift+c"], "command": "color_pick"},”

 

JsFormat

JsForma可以自動幫助你格式化JavaScript代碼,形成一種通用的格式,比如對壓縮、空格、換行的js代碼進行整理,使得js代碼結構清晰,易於觀看。在已壓縮的JS文件中,右鍵選擇jsFormat或者使用默認快捷鍵(Ctrl+Alt+F),如果該熱鍵被占用了,可以在Preferences→Key Bindings-User中配置: { "keys": ["ctrl+shift+alt+j"], "command": "js_format","context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]},

DocBlockr

 

安裝該插件后,可以快速生成各種注釋格式,當需要生成注釋符號時,輸入/*、/然后回車系統即幫你自動生成,如果/后面剛好是一個函數的定義,注釋格式會根據函數的參數生成。

Sidebar Enhancements

 

sub側欄右鍵文件提供的功能很少,但在實際開發中,文件通常會有各種處理請求,而該插件增強側欄文件右鍵功能,比如可以直接右鍵將文件移入回收站,在瀏覽器中瀏覽,將文件復制到剪切板等。詳情查看sidebar文檔

安裝該插件前,文件右鍵選項很少:

安裝插件后,文件右鍵選項大大增強:

我常用的兩個功能是設置文件使用瀏覽器打開的快捷鍵F12和重命名F2,需要自己往Key-Bindings-User里面添加
{ "keys": ["f12"], "command": "side_bar_open_in_browser","args":{"paths":[], "type":"testing", "browser":""}},
{ "keys": ["f2"], "command": "side_bar_rename"},

Alignment

 

對定義的變量進行智能對齊,一般是“=”號對齊,默認的快捷鍵是Ctrl+Alt+A,但這個熱鍵和QQ截屏的熱鍵沖突不能使用,需要自己重新設置,我通常設置成Ctr+Alt+Shift+A,以下粘貼到Key-Bindings-User里面:{ "keys": ["ctrl+alt+shift+a"], "command": "alignment" },

CSS Format

CSS Format可以將任意的 CSS、SASS、SCSS、LESS 代碼格式化為展開、緊湊、壓縮的形式,選中需要格式化的樣式代碼,右鍵選中CSS Format,選擇需要形成的格式即可。

 

Tag

Tag插件提供各種對Tag標簽的操作,具有功能:根據/自動關閉HTML標簽,標簽自動縮進(或選中ctrl+alt+f),刪除標簽和里面的內容,插入標簽(對光標字符“ctrl+shift+,”生成標簽),刪除標簽里的屬性,關閉標簽,檢查標簽等。有些功能是自動執行,有些功能需要手動執行,功能入口 菜單欄Edit→
Tag。

 

Trailing spaces

 

可以檢測和一鍵刪除代碼的空格,保存時自動刪除多余空格,讓你的代碼更加緊湊規范。功能入口:Edit→
Trailing Spaces→
Delete,也可以自己設置快捷鍵,我通常設置成ctrl+shift+alt+t,以下粘貼到Key-Bindings-User里面:{ "keys": ["ctrl+shift+alt+t"], "command": "delete_trailing_spaces" },

ConvertToUTF8

通過本插件,您可以編輯並保存目前編碼不被 Sublime Text 支持的文件,特別是中日韓用戶使用的 GB2312,GBK,BIG5,EUC-KR,EUC-JP 等。可以通過 File→
Set File Encoding to 菜單對文件編碼進行手工轉換。例如,您可以打開一個 UTF-8 編碼的文件,指定保存為 GBK,反之亦然。

 

HTML-CSS-JS Prettify

 

格式化HTML,CSS,Javascript和Json代碼格式。使用該插件,需要安裝nodejs,而且要在Packages-Setting→
HTML/CSS/JS Prettify→
set node path中設置你node的安裝路徑。使用過程:Tools→
Command Palette(或者Ctrl+Shift+P),輸入選擇htmlprettify即可完成整個文檔的格式化。也可以設置快捷鍵:Packages-Setting→HTML/CSS/JS Prettify→set keyboard shortcuts,因為我的ctrl+shift+h已經被占用,所以我改成ctrl+shift+alt+h。

Terminal

 

打開文件的終端,終端默認是CMD。ctrl+shift+t 打開文件所在文件夾,ctrl+shift+alt+t 打開文件所在項目的根目錄文件夾,可以自己重新配置快捷鍵。也可以右鍵open terminal here打開。

匯總一下前面介紹的插件:
Alignment
AutoFileName
BracketHighlighter
ColorPicker
CSS Format
DocBlockr
Emmet
JsFormat
Sidebar Enhancements
Tag
Trailing Spaces
ConvertToUTF8
HTML-CSS-JS Prettify
Terminal
以及因為這些插件而重新設置的快捷鍵:

 

[html]  view plain  copy
 
  1. { "keys": ["ctrl+alt+shift+a"], "command": "alignment" },  
  2. { "keys": ["ctrl+shift+alt+f"], "command": "show_panel", "args": {"panel": "find_in_files"} },  
  3. { "keys": ["ctrl+alt+u"], "command": "soft_undo" },  
  4. { "keys": ["ctrl+shift+alt+t"], "command": "delete_trailing_spaces" },  
  5. { "keys": ["f12"], "command": "side_bar_open_in_browser","args":{"paths":[], "type":"testing", "browser":""}},  
  6. { "keys": ["alt+f12"], "command": "side_bar_open_in_browser","args":{"paths":[], "type":"production", "browser":""}},  
  7. { "keys": ["ctrl+t"], "command": "side_bar_new_file2"},  
  8. { "keys": ["f2"], "command": "side_bar_rename"},  
  9. { "keys": ["ctrl+shift+c"], "command": "color_pick"},  
  10. { "keys": ["ctrl+shift+alt+j"], "command": "js_format","context": [{"key": "selector", "operator": "equal", "operand": "source.js,source.json"}]},  


還有很多插件需要根據你使用的庫和框架自己去添加,比如jQuery、angular、node.js、less等,只要Ctr+Shift+p輸入關鍵詞即可找到你想安裝的插件。

 

sublimeCodeIntel

js智能提示,超級好用

 

 

 

 

因為快捷鍵過多,下面僅羅列一下比較常用的快捷鍵:

1.操作
Ctrl + `: 打開Sublime Text控制台(Esc退出)
Ctrl+Shift+P:打開命令面板(Esc退出)
Ctrl + K, Ctrl + B: 組合鍵,顯示或隱藏側欄
Alt :光標調到菜單欄,↑↓←→ 移動光標

2.編輯
Ctr+Shift+D:復制粘貼光標所在行
Alt+.:關閉標簽
Ctrl+/:用//注釋當前行。
Ctrl+Shift+/:用/**/注釋。
Ctrl + Enter: 在當前行下面新增一行然后跳至該行
Ctrl + Shift + Enter: 在當前行上面增加一行並跳至該行
Ctrl + ←/→: 進行逐詞移動,
Ctrl + Shift + ←/→: 進行逐詞選擇
Ctrl + Shift + ↑/↓: 移動當前行(文件會被修改)
Ctrl+KK :從光標處刪除至行尾
Ctrl+K Backspace :從光標處刪除至行首
Ctrl+Z:撤銷
Ctrl+Y:恢復撤銷
Ctrl+J:合並行(已選擇需要合並的多行時)
Ctrl + [: 選中內容向左縮進
Ctrl + ]: 選中內容向右縮進

3.選擇
Alt+F3:選中關鍵詞后,選中所有相同的詞。可以配合Ctrl+D使用。
Ctrl + D Ctrl + K Ctrl + U:Ctrl + D選擇當前光標所在的詞並高亮該詞所有出現的位置,再次Ctrl + D,會選擇該詞出現的下一個位置。在多重選詞的過程中,Ctrl + K會將當前選中的詞進行跳過在多重選詞的過程中,Ctrl + U進行回退
Ctrl+L :選擇光標所在整行
Ctrl+X:刪除光標所在行
Ctrl + J: 把當前選中區域合並為一行
Ctrl+Shift+M:選中當前括號內容,重復可選着括號本身

4.查找
(如果有窗口彈出都是Esc退出彈出窗口)
Ctr+p:輸入@顯示容器(css或者js里面)
Ctrl + F: 調出搜索框
Ctrl + H: 調出替換框進行替換
Ctrl + Shift + H: 輸入替換內容后,替換當前關鍵字
Ctrl + Alt + Enter: 輸入替換內容后,替換所有匹配關鍵字。(NOTE: 注意此時如果鼠標焦點在編輯窗口中,則替換失敗,將鼠標焦點調到替換框中,Ctrl + Alt + Enter才會起作用)
Ctrl + Shift + F: 開啟多文件搜索&替換
Alt + C: 切換大小寫敏感(Case-sensitive)模式
Alt + W: 切換整字匹配(Whole matching)模式
Alt + R: 切換正則匹配模式的開啟/關閉

5.跳轉
Ctrl + P:列出當前打開的文件(或者是當前文件夾的文件),輸入文件名然后 Enter 跳轉至該文件,輸入@symbol跳轉到symbol符號所在的位置,輸入#keyword跳轉到keyword所在的位置,輸入:n跳轉到文件的第n行
Ctrl + R:列出當前文件中的符號(例如類名和函數名,但無法深入到變量名),輸入符號名稱 Enter 即可以跳轉到該處。
會列出Markdown文件的大綱
F12: 快速跳轉到當前光標所在符號的定義處(Jump to Definition)。比如當前光標所在為一個函數調用,F12會跳轉至該函數的定義處。
Ctrl + G: 輸入行號以跳轉到指定行
Ctrl+M:跳轉到括號另一半。

6.窗口和Tab頁
Ctrl + N: 在當前窗口創建一個新標簽
Ctrl + Shift + N: 創建一個新窗口(該快捷鍵 和搜狗輸入法快捷鍵沖突)
Ctrl + W: 關閉標簽頁,如果沒有標簽頁了,則關閉該窗口
Ctrl+Shift+W:關閉所有打開文件
Ctrl + Shift + T: 恢復剛剛關閉的標簽。
Ctrl +Tag:移動標簽。

7.屏幕
F11: 切換普通全屏
Shift + F11: 切換無干擾全屏
Alt + Shift + 2: 進行左右分屏
Alt + Shift + 8進行上下分屏
Alt + Shift + 5進行上下左右分屏(即分為四屏)
Ctrl + 數字鍵: 跳轉到指定屏
Ctrl + Shift + 數字鍵: 將當前屏移動到指定屏

 

 轉自:https://blog.csdn.net/u013861109/article/details/53106074

侵刪


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM