前端開發工具技巧介紹-Sublime Text3篇
1.基礎須知
①在命令列裡利用subl命令使用Sublime Text(用前配置環境變數):
subl file:使用Sublime Text開啟一個名為file的新檔案。
subl . :使用Sublime Text當前資料夾。
②Package Control:
安裝:複製sublime text3的安裝碼,使用Ctrl + `開啟Sublime Text控制檯,再進行貼上安裝。
Package Control:可以管理外掛,使用Ctrl+Shift+P(命令列模式)查詢開啟。
安裝外掛時,只需要在命令列模式啟動Package Control,然後再搜尋外掛點選安裝即可。
③sublime的功能:
自動儲存檔案。
開啟檔案後,自動識別檔案型別(各種語言格式),並且語法高亮。
可以開啟圖片。
模糊匹配,使用最少的輸入:如ssh可代表set syntax HTML。
......
2.快捷鍵
①File:對檔案操作。
開啟新視窗:Ctrl+Shift+N。
關閉新視窗:Ctrl+Shift+W。
Save as:Ctrl+Shift+S。
開啟HTML模板:Ctrl+Alt+H。
開啟CSS模板:Ctrl+Alt+C。
開啟JS模板:Ctrl+Alt+J。
開啟Python模板:Ctrl+Shift+Alt+P。
②Edit:對檔案內容操作。
複製游標所在整行,插入到下一行:Ctrl+Shift+D(原本的下一行下移一行)。
刪除一行:Ctrl+Shift+K。
註釋單行:Ctrl+/(注意不是小鍵盤的/)。
註釋多行:Ctrl+Shift+/(注意不是小鍵盤的/)。
向左縮排:(Shift+Tab)/(Ctrl+[)。
從游標處開始一行行刪除:Ctrl+K+K。
轉換大寫:Ctrl+K+U。
轉換小寫:Ctrl+K+L。
合併選中的多行程式碼為一行:Ctrl+J。
設定書籤:Ctrl+F2。
單詞檢測拼寫:F6。
無格式貼上:Ctrl+V。
有格式貼上:Ctrl+V+Shift。
多點編輯:Ctrl + 游標點選想要同時編輯的地方。
即使游標不在行尾,也能快速移到下一行:Ctrl+Enter。
即使游標不在行首,也能快速移到上一行:Ctrl+Shift+Enter。
③Selection:
選中一行:ctrl+L。
選中單詞:ctrl+D。
選中文字按下快捷鍵,即可一次性選擇全部的相同文字進行同時編輯:Alt+F3。
選中程式碼,按下快捷鍵,摺疊程式碼:Ctrl+Shift+[。
選中程式碼,按下快捷鍵,展開程式碼:Ctrl+Shift+]。
展開所有摺疊程式碼:Ctrl+K+0。
向上選中一行:shift+↑。
向下選中一行:shift+↓。
向左選中一個文字:Shift+←。
向右選中一個文字:Shift+→。
向左單位性地選中文字:Ctrl+Shift+←。
向右單位性地選中文字:Ctrl+Shift+→。
將游標所在行和上一行程式碼互換:Ctrl+Shift+↑。
將游標所在行和下一行程式碼互喚:Ctrl+Shift+↓。
④Find:
查詢替換(即使用正則表示式)。
Ctrl+H:使用正則。
⑤View:本身介面配置。
Alt+Shift+1: 視窗分屏,恢復預設1屏(非小鍵盤的數字)。
Alt+Shift+2: 左右分屏-2列。
Alt+Shift+3: 左右分屏-3列。
Alt+Shift+4: 左右分屏-4列。
Alt+Shift+5: 等分4屏(田)。
Alt+Shift+8: 垂直分屏-2屏。
Alt+Shift+9: 垂直分屏-3屏。
F11: 全屏模式。
Shift+F11:免打擾模式。
Show 側邊欄:Ctrl+K+B。
⑥Goto:檔案內、檔案間的快速導航功能。
導航欄(快速開啟檔案/定位):Ctrl+P。
編輯一個檔案時:
:20為定位到20行。
@會顯示此CSS檔案的所有選擇器。
@選擇器:定位選擇器。
@會顯示此JS檔案的所有函式...以此類比。
#會定位到HTML標籤。
查詢檔案:
可以直接查詢檔案,並且支援模糊匹配(即容錯率)。
text/index.html:即text目錄下的某檔案。
並且滑鼠每移動到一個檔案,都會顯示出那個檔案的內容。
⑦Tool:
開啟編譯器命令列模式:Ctrl + Shift + P。
set syntax 語言/右下角滑鼠選擇:切換語法模式。
安裝新的外掛:pci(簡寫)。
管理配置檔案!(搜尋即可)。
3.小技巧
①多行遊標選中方式:
選中一個目標單詞,重複選中Ctrl+D,跳過當前選項Ctrl+K。
或選中一個目標單詞,按Alt+F3,選中所有相同單詞
(此快捷鍵將會選取與單詞序列相同的所有字母,並且每一個單詞後都有游標)。
或先Ctrl+A選中多行,再按下快捷鍵,會在每行行尾插入游標,即可同時編輯這些行:Ctrl+Shift+L。
或預設情況下,使用 “shift+ 滑鼠右鍵點選”可以產生多行遊標。
或Ctrl+Alt+↑:向上新增多行游標,可同時編輯多行。
或者使用正則表示式進行單詞匹配。
②退出多行編輯模式:Esc。
③自動生成結束標籤:Alt+.(HTML檔案中)。
④新建檔案:Crtl + N 。
⑤顯示minimap:
⑥快速添加註釋:
在方法/變數上方,可以藉助編譯器提示快速添加註釋。
⑦更換主題:
Preferences--Color Scheme--在彈出框中選擇自己喜歡的主題。
4.外掛
①Emmet外掛:
!和Ctrl+E:自動生成HTML5的模板。
和Ctrl+E自動生成:
②snippet:每種語言都有不同的snippet,可以幫助快速編寫程式碼。
以snippets模板程式設計:依舊在命令列模板中實現:
搜尋snippets,即可出現固定的關於檔案格式匹配的函式、if等模板。
利用tab鍵,給模板設定變數及其他內容。
也可以直接利用編譯器的自動補全功能實現。
③JS&nodjs snippets外掛:官網查詢。
gi:document.getElementById('id'); //再用tab鍵直接改id。
gc:document.getElementsByClassName('class');
gt:document.getElementsByTagName('tag');
...
④JQuery外掛:加速JQuery開發,Insert Callback可去掉匿名函式的多餘分號(Alt+C)。
⑤nettus fetch外掛:通過這個外掛能方便的更新前端開發所需的一些元件類庫。
用fetch快速下載JQuery :
開啟配置檔案,有
"files":
{ "jquery": "http://code.jquery.com/jquery.min.js"}
Ctrl+Alt+N 在public/js/jquery.js 建立檔案。
在檔案中,Ctrl+Shift+P fetch File JQuery下載 安裝。
⑥advanceNewfile外掛:快速建立檔案。
Ctrl+Shift+Alt+N:目錄/檔名.檔案格式的形式。
⑦SideBarEnhacemenS外掛(我的編譯器中):在編譯器中直接執行網頁。(專案工程裡)。
⑧DocBlockr外掛:補齊註釋或註釋格式!!