1. 程式人生 > >前端開發工具技巧介紹-Sublime Text3篇

前端開發工具技巧介紹-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外掛:補齊註釋或註釋格式!!