sublimeText3之碼上有愛

時間 2019-11-06

標籤 sublimetext3 sublimetext 上有简体版

原文原文鏈接

前言

相信對於不少寫代碼的小夥伴來講,對於開發編輯器都不會陌生,什麼editplus,dw,webstorm,hubuilder,vscode,atom,esciplse,vim等蘿蔔青菜都各有所愛,每一個編輯器都有它的獨特之處,本質上並沒有優劣之分,只要代碼寫得好,寫得快,就能夠了,然而工欲善其事必先利其器,好的工具就是成功的一半,最近一直都在想着,怎麼樣提升本身的效率,若是老是復性的勞動一件事情,時間久了,以爲是毫無心義的,讓本身遠離刀耕火種的時代,提升效率,同時也是爲了減小手殘腰椎痛(說得好像不是搬磚的,但是我依舊是個搬磚的),那麼今天就我平時的使用跟你們分享一款本身喜歡編輯器sublinmeText3,對於它的使用和學習,我也一直在摸索中,初學者學習筆記使用心得,但願對正在路上的你有些用...javascript

安裝

在sublimeText官網或者百度輸入下載sublimeText3下載安裝包選擇性的安裝便可(根據本身的電腦位數(32/64)選擇性安裝),建議安裝英文版的php

面板使用

上方是菜單選項欄,與衆多的編輯的操做都差很少,中間是編輯區域,最右側是快速定位縮略圖,左側是代碼行號

快捷鍵

sublimeText自己具有強大的編輯能力,鍵盤俠遠比鼠標手要快得多,當機械的重複勞動久了就顯得毫無心義,多多使用快捷鍵是提升快速編碼的一重要手段，sublimeText分爲四種類別css

選擇類

Ctrl+D選中光標所佔的文本,繼續操做則會選中下一個相同的的文本
ctrl+G:輸入行號,可快速跳轉該行
ctrl+p:輸入冒號,在輸入行號，可快速跳轉到某一行
Alt+F3選中文本按下快捷鍵,便可一次性選擇所有相同的文本進行同時編輯:舉個例子:快速選中並更改全部相同的變量名和函數名等
Ctrl+L:選中整行,繼續操做則繼續選擇下一行,效果和shift+向下箭頭效果同樣
Ctrl+shift+L:先選中多行,在按下快捷鍵,會在每行行尾插入光標,便可同時編輯這行
Ctrl+Shift+M 選擇括號內的內容（繼續選擇父括號）。舉個栗子：快速選中刪除函數中的代碼，重寫函數體代碼或重寫括號內裏的內容
Ctrl+M 光標移動至括號內結束或開始的位置
Ctrl+Enter 在下一行插入新行。舉個栗子：即便光標不在行尾，也能快速向下插入一行
Ctrl+Shift+Enter 在上一行插入新行。舉個栗子：即便光標不在行首，也能快速向上插入一行
ctrl+shift+[:選中代碼,按下快捷鍵,摺疊代碼
ctrl+shift+]:選中代碼,按下快捷鍵,展開代碼
Ctrl+k+0:展開全部摺疊代碼
ctrl+←:向左單位性地移動光標,快速移動光標
ctrl+→:向右單位性移動光標,快速移動光標
shift+↑ 向上選中多行
shift+↓ 向下選中多行
Shift+← 向左選中文本
Shift+→ 向右選中文本
Ctrl+Shift+← 向左單位性地選中文本
Ctrl+Shift+→ 向右單位性地選中文本
Ctrl+Shift+↑ 將光標所在行和上一行代碼互換（將光標所在行插入到上一行以前）
Ctrl+Shift+↓ 將光標所在行和下一行代碼互換（將光標所在行插入到下一行以後）
Ctrl+Alt+↑ 或Ctrl+Alt+鼠標向上拖動向上添加多行光標，可同時編輯多行
Ctrl+Alt+↓或Ctrl+Alt+鼠標向下拖動向下添加多行光標，可同時編輯多行
多重選擇
- 多重選擇功能容許在頁面中同時存在多個光標,讓不少原本須要正則表達式,高級搜索和替換才能完成的的任務也變得遊刃有餘了激活多重選擇的方法有兩及種:
- 按住ctrl而後在頁面中但願中現光標的位置點擊
- 選擇數行文本,而後按下shift+ctrl+L
- 經過反覆按下ctrl+D便可將全文中與光標當前所在位置的詞相同的詞逐一加入選擇,而直接按下Alt+F3便可一次性選擇全部相同的詞
- 按下鼠標中鍵來進行垂直方向的縱列選擇,也能夠進入多重編輯狀態

編輯類

Ctrl+J:合併選中多行代碼爲一行:將多行格式的css屬性合併爲一行
ctrl+shift+D:複製光標所在的整行,插入到下一行
Tab 向右縮進。只對光標後（或者選中的）的代碼有效
Shift+Tab 向左縮進
Ctrl+[ 向左縮進。對整行有效
Ctrl+] 向右縮進。對整行有效
Ctrl+K+K 從光標處開始刪除代碼至行尾。按住Ctrl，按兩次K
Ctrl+Shift+K 刪除整行
Ctrl+/ 註釋單行
Ctrl+Shift+/ 註釋多行
Ctrl+K+U 轉換大寫
Ctrl+K+L 轉換小寫
Ctrl+Z 撤銷
Ctrl+Y 恢復撤銷
Ctrl+U 軟撤銷，感受和 Gtrl+Z 同樣
Ctrl+F2 設置書籤，F2切換書籤
Ctrl+T 左右字母互換

搜索類

Ctrl+F 打開底部搜索框，查找關鍵字
Ctrl+shift+F 在文件夾內查找，與普通編輯器不一樣的地方是sublime容許添加多個文件夾進行查找
Ctrl+P 打開搜索框。舉個栗子

輸入當前項目中的文件名，快速搜索文件
輸入@和關鍵字，查找文件中函數名
輸入：和數字，跳轉到文件中該行代碼
輸入#和關鍵字，查找變量名

Ctrl+G 打開搜索框，自動帶：，輸入數字跳轉到該行代碼。舉個栗子：在頁面代碼比較長的文件中快速定位
Ctrl+R 打開搜索框，自動帶@，輸入關鍵字，查找文件中的函數名。舉個栗子：在函數較多的頁面快速查找某個函數
Ctrl+: 打開搜索框，自動帶#，輸入關鍵字，查找文件中的變量名、屬性名等
Esc 退出光標多行選擇，退出搜索框，命令框
Ctrl+Shift+P 打開命令框。場景栗子：打開命名框，輸入關鍵字，調用sublime text或插件的功能，例如使用package安裝插件

顯示類

ctrl+Tab:按文件瀏覽過的順序,切換當前窗口的標籤頁
Ctrl+PageDown向左切換當前窗口的標籤頁
Ctrl+PageUp向右切換當前窗口的標籤頁
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屏
Ctrl+K+B 開啓/關閉側邊欄
F11 全屏模式
Shift+F11 免打擾模式
... 對於實際開發中,能夠看到有的大神,一個大的顯示屏是分好多屏的,在把不一樣的界面切來切去的,看到那老長的代碼,黑黑的界面,神祕兮兮的使用方法:Alt+shift+數字,qwer鍵盤上的數字

有時候你會發現,在sublimeText中用快捷鍵,不起做用或者你安裝了一些插件,一些該調出該有功能快捷鍵,使用了卻不起做用,這是爲什麼呢?這是由於可能安裝的插件過多,可能相互衝突了,或者與輸入法的快捷鍵衝突了,能夠到插件配置中進行定製,或者查看輸入法把衝突的快捷鍵去掉就能夠了..好比:以刪除整行爲例:ctrl+shift+k

至於每一個快捷鍵的使用,平時的學習刻意的練習,開發中多用,長此以往,就熟悉了的,不用刻意去記憶,那麼多快捷鍵,想要記住是不容易的,能夠一階段時間分開階段的熟練的使用html

插件篇

sublimeText之因此讓我喜歡的地方,一方面是它打開文件相比其餘編輯器而言,很是的快,並且主色調也很詼諧,最重要的是它強大的插件機制,是佔很大優點的,如下是我我的較爲喜歡的插件，經常使用的在前vue

在安裝各類插件以前,須要安裝Package control插件在線安裝java

菜單欄-->view-->Show Console(ctrl+)`node
將下面的配置配置代碼輸入到控制檯,在線安裝便可安裝文檔python

packagecontrol.io/installatio…,根據本身的sublimeText版本進行選擇安裝linux
安裝gif圖以下: git
1. 重啓Sublime Text 3
2. 若是在Perferences->package settings中看到package control這一項，則安裝成功

利用Package Control安裝插件

ctrl+shift+p或者菜單欄:Tools-->command palette調出命令面板, 輸入install 調出 Install Package 選項並回車，而後在列表中選中要安裝的插件,在輸入框中直接輸入插件名稱可進行搜插件,雙擊便可自動安裝,退出命令面板,在重複的按兩次ctrl+shift+p`可退回上次操做,或菜單欄上選擇命令面板

固然也能夠直接在github上搜,下載安裝包,直接放在package目錄下就能夠了的,示例以下所示

幾種特殊的意外狀況,沒法使用package Control或者插件安裝不上問題解決

狀況一:沒法調出Package Control或未安裝PackageControl 首次安裝或從新安裝的方式是同樣的，首先打開控制檯（Ctrl+~），不過Sublime Text的版本不一樣，執行的命令是不同的對於Sublime Text2輸入如下命令執行： import urllib2,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation') 對於Sublime Text 3須要輸入以下的命令： import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by) 如上動圖所示:選擇你須要的sublimeText版本選擇性安裝既然3都出來了,就不要用2了的執行完後，Package Control安裝成功,此時即可以調出PackageControl命令輸入面板（Ctrl+Shift+P），輸入install 除了使用上述命令安裝法，還可手動安裝，須要的可訪問官網查看[手動安裝package control]https://packagecontrol.io/installation#st3
狀況二:彈出Package Control:There are no packages available for installation

據網上查說是IPv6形成，若是咱們的Intent服務提供者（ISP）不支持IPv6就會引起上述錯誤，原文以下

This error is happened with IPv6 problem. If yourInternet Service Provider (ISP) does not support for IPv6 you got this error.

具體請參考：具體文檔資料若是IPV6有問題，curl就會打印相似這樣的錯誤： curl: (7) Failed to connect to xxxxx... 找到了問題緣由，下面着手解決它第一步：取得sublime.wbond.net的IPv4地址。在命令提示符中輸入如下命令： ping sublime.wbond.net

第二步:打開C:\Windows\system32\drivers\etc\hosts文件，增長以下對應關係:{IPv4 address}sublime.wbond.net

保存文件,而後再打開 Package Control（快捷鍵Ctrl+Shift+P）開始安裝便可

狀況三:package Contrl下插件始終安裝不上 Package Control：Unableto download Emmet.Please view the console for more details./Error while loading PyV8 binary:exit code 3…

相似這種插件沒法下載的問題，通常是因爲網速慢,或者目標域名被牆而沒法正常訪問致使的,這種狀況下，首先檢查本地網絡是否能夠訪問外網,檢測下載速度是否是特別慢，若是網速太慢，換個時間再安裝,還有一個辦法是:到github或第三方網站手動下載安裝包，而後解壓到安裝目錄下的/Packages目錄下就能夠了的另外許多插件都依賴於Python的，在插件安裝開始時會去下載Python相關資源，好比，Emmet安裝就會先下載你係統位數一致的Python版本，咱們在debug窗口能夠看到這些信息

其中有兩條,表示下載失敗，緣由通常是網速慢請求超時或被牆了,換個時間在下載安裝把

Emmet: Loading PyV8 binary from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip Emmet.pyv8loader: Unable to download package from https://raw.github.com/emmetio/pyv8-binaries/master/pyv8-win64.zip Wrong URL error

同時，pyv8下載失敗會彈出一個提示框：

這時候，咱們按照給出的zip包下載地址手動下載PyV8的安裝包（PyV8的項目地址爲https://github.com/emmetio/pyv8-binaries#readme，能夠根據系統種類選擇對應安裝包）,下載成功後打開菜單 Preferences– Browser Packages，而後解壓到子目錄PyV8內,好比個人對應目錄是F:\開發軟件工具\編輯器開發工具\sublime\Sublime Text 3\Data\Packages\PyV8\win64（若你的是32位系統，最終目錄則爲win32）,PyV8安裝好了之後，而後安裝須要的插件就能夠了

狀況四:不能獲取插件列表 Package Control：There are no packages available for installation

1. cmd下輸入ping sublime.wbond.net連接一下看下sublime.wbond.net這個域名的ip
2. 打開C:\Windows\system32\drivers\etc\hosts文件。 
在最後面加上例如 50.116.34.243 sublime.wbond.net這樣的對應關係，IP是上面測試的
3. 而後請關閉Submine Text並重啓，即不會再彈出更新提醒了
複製代碼

如何查找已安裝的插件,去除插件

一樣調出命令行面板ctrl+shift+p或者菜單欄Tools-->command Palette,拉動滾動條,能夠查看插件全部的命令快捷操做,列出插件(list Packages),移除插件(remove Package)等，以Alignment對齊代碼插件爲例:先移除後安裝,其餘插件雷同,在線移除插件過程須要等待一段時間,移除後,可在preferences-->Package settings中插件插件的有無,第二種去除插件的方法就是直接去packages中間的插件文件夾刪除掉就能夠了的,一旦去除插件,對應的快捷鍵操做就消失了的

1. Alignment(代碼對齊）

一個很是簡單和易於使用的插件,使你的代碼組織和美觀。當你重溫代碼時候很是有用.

使用方法：選中要調整的行，而後按 Ctrl+ Alt + A (如果插件的快捷鍵與電腦中某些軟件的快捷鍵衝突,那麼能夠自定義快捷鍵),固然對齊格式化代碼,最好的插件還有別的,好比HTML-CSS-JS Prettify

2. HTML-CSS-JS Prettify

使用說明：快速格式化html css js 快捷鍵：ctrl+shift+h也能夠鼠標右鍵操做, 安裝插件後，直接使用時沒有效果的,會提示nodejs not fount,安裝好該插件後並不能夠直接使用,須要添加nodejs的安裝位置於插件中

查看本地安裝的NodeJS配置環境路徑（window+R->cmd->在dos命令下，輸入where node並回車）或者git 壞境裏,或者是直接找到node安裝文件位置

在編輯器的任意一個html/js/css文件中，右擊，出現以下圖所示，選擇Set Plugin Options,HTMLPretty.sublime-settings，將node_path中的window路徑更改成node的安裝位置的路徑便可,以下圖所示

要注意的是路徑斜線
設置完後就能夠直接右鍵使用了

3. Emmet

Emmet絕對的節省時間,可減小重複的體力勞動,您能夠輕鬆快速地編寫HTML,CSS,使用方法: ctrl + alt + enter ,而且開始輸入Emmet風格的,只要清晰結構,鏈式的寫法+tab鍵就能夠

<div class="container">
        <ul class="img">
            <li><img src="images/1.jpg" alt="" width="700" height="400"></li>
            <li><img src="images/2.jpg" alt="" width="700" height="400"></li>
            <li><img src="images/3.jpg" alt="" width="700" height="400"></li>
            <li><img src="images/4.jpg" alt="" width="700" height="400"></li>
            <li><img src="images/5.jpg" alt="" width="700" height="400"></li>
        </ul>
        <ul class="nav">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li class="bg"></li>
        </ul>
</div>
複製代碼

利用emmet快速生成html結構好比：如上結構div.container>ul.img>li*5>img[src="images/$.jpg"][width="700"][height="400"]^^ul.nav>li{$}*5，這裏的大於號至關於css中的子選擇器,進入下一級,能夠計算,聯想css中的選擇器使用,就以爲不神奇了,只要清晰佈局結構,就能夠快速寫html,而css的編寫,只要知道元素屬性,無需寫全,按一下tab鍵就會自動補全了,好比:常見的meta標籤:meta:vp,meta:utf,link:css,link:favicon,cc:ie6,cc:ie,cc:noie``,-transition,-box-shadow....更多內容可參考手冊,是由規律可尋找的.

快速的編寫css

至於更多的豐富的emmet的使用可參考官網的APIemmetAPI，不得不說真的很強大,大大的解放了勞動力

4. 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
複製代碼

配置本身個有的模板信息:

preferemces-->package settings-->sublimeTmpl-->setting default按照格式進行配置添加本身想要的信息
preferemces-->Browser packages-->SublimeTmpl-->templates-->xxx.tmpl

5.cssRem安裝

自動將px轉化爲rem的插件,作移動端網站,rem佈局時,該插件就很方便了

安裝好後,設置基準值:"px_to_rem": 數值,我這裏設置是100也就是100px=1rem，具體得設置值根據你的適配而定

6. sass,less安裝

文件保存scss格式,按ctrl+B,可直接將scss編譯成css(在sublime中目錄中支持中文路經,可是在koala中存儲的scss目錄文件不能帶有中文,不然編譯時就會出錯,不過目錄名都命名爲英文),不過這裏有意思的是:與koala對比,若css中使用@rem:xxrem;在sublime中卻編譯不過,而在koala中,是能夠編譯經過的

7. SublimeOnSaveBuild保存自動編譯

保存自動編譯 SublimeOnSaveBuild(若是沒有安裝這個插件,每次都要手動的從新編譯一次,ctrl+B),經過sass,less編譯的css通常都是壓縮的,在一行顯示,若想要換行顯示,右鍵執行run csscomb,讓css自動排序

8. Autoprefixer

CSS3 私有前綴自動補全插件，顯然也是頗有用的

設置快捷鍵，選擇菜單Preferences > Key Bindings – User ,按照規則,將下面代碼添加到裏面去

{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }
複製代碼

9. Colorpicker取色器插件

使用一個取色器改變顏色使用方法: ctrl + shift + c

10. JsFormat

js序列化,仍是很好用的

11.DocBlockr

DocBlocker 是在Sublime平臺上開發一款自動補全代碼插件，支持JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Apex, Groovy, Objective C, C, C++ and Rust.等衆多語言

12. Tagify,Tag

標籤匹配,HTML/XML標籤縮進、補全和校驗

13.BracketHighlighter

相似於代碼匹配，能夠匹配括號，引號等符號內的範圍(示例代碼中最左側的花括號),這個以爲也很重要,當缺一個匹配時,左側一邊會有一個問號提示，很是人性化

14. autofilename

自動關聯圖片,css,js等資源路徑插件

15. MarkdownEditing(markdown編輯插件),markdown Preview(markdown預覽插件,也便是在瀏覽器預覽)

快捷使用方式:ctrl+B他會將markdown文件轉換爲html格式,直接打開就能夠了,每次寫完一次,若想看到新的效果,須要每次ctrl+B編譯一次,刷新瀏覽器能夠看到最新的效果(安裝了自動保存編譯的插件代替ctrl+B),可是不知道爲何無效
默認的markdown的皮膚真的不辣眼睛,不會在愛了的,其實markdown的是能夠調整的,能夠根據你本身的喜愛,風格選一款適合本身的,在sublimeText中寫markdown,在也不用什麼Typora,markdown Edit桌面端應用軟件了

固然sublimeText相比較atom而言,美中不足的就是在編輯器中實時預覽,可是markdown文檔經過ctrl+B能夠轉換爲html格式文件,在瀏覽器中打開,會發現它的色調也不是很好看,那麼怎麼更改呢?既然是html文件,直接更改樣式屬性就行了,以下gif所示

16. Javascript-API-Completions:支持Javascript、JQuery

Bootstrap框架、HTML5標籤屬性提示性的插件，是少數支持sublime text 3的後綴提示的插件,HTML5標籤提示sublime text3自帶，不過JQuery提示仍是頗有用處的，也可設置要提示的語言

17. translate-CN中英互譯插件

不管是css中的class,Id,js中命名是件很糾結的事情,有了這個插件能夠隨時的在編輯器中進行中英互譯,沒必要退出軟去瀏覽器找百度,Google翻譯,或者是打開電腦安裝的翻譯應用軟件,真的很好用,有時不會那麼快,關閉那些佔高寬帶的應用,速度會好些的,注意以上的全部插件安裝和如今的翻譯,是在有網絡的條件下才能夠進行的,也就是說能看得了島國動做大片，刷得了韓國歐巴才能夠愉快的玩耍,固然已經裝好的插件,至於有網沒有網無所謂了的,可是凡要訪問獲取外網數據的,另當別論,只有在有網的條件才能夠

選中所要翻譯的詞彙-->鼠標右鍵--Translate-CN--current text(當前文本)/input text(調出輸入框面板可手動輸入查找翻譯)

18. WakaTime 記錄你Code時間

WakaTime能夠作到精確地統計到你花在某個項目上的時間;WakaTime針對不一樣的IDE,擁有不一樣的插件,在Sublime上安裝着插件,就能統計到我使用Sublime進行的全部項目的行爲.能夠高效管理和知曉本身code時間,而且,統計完善, 記得有一次看到羣裏的一夥伴曬出來,瞬間感受B格高了,最近也一直在用,本身用用還挺能夠,能夠知道一天當中哪些代碼塊寫得量,有助於調整本身的進度,約束本身

具體使用:先安裝該插件後:preferences --->packages settings-->wakaTime-->wakaTime dashboard

沒有帳號的,註冊一個帳號登錄便可,在這個過程當中,會獲得一個api_key,將後面的一串字符串輸入到安裝該插件時提示的控制檯輸入便可,也能夠本身配置在wakaTime的settings user中以對象字面量的方式配置一下就能夠了的

19. All Autocomplete

檢查所有打開文件，類似自動補全插件

20. SublimeCodeIntel

代碼提示工具,打開Sublime建立個文件試一下，若是還不行就按下 ctrl+shift+space 開啓提示功能

21. csscomb

給CSS屬性進行排序的格式化插件。若是你想保持的代碼乾淨整潔，而且但願按必定的順序排列

22. canIUse

若是您想檢查瀏覽器是否支持你包括在你的代碼中的CSS和HTML元素，那麼這是你須要的插件。全部您須要作的就是選擇有疑問的元素，插件將爲你作其他的事情

23. Trimmer

當你編寫代碼時，因爲錯誤或別的某些緣由，會產生一些沒必要要的空格。須要注意的是多餘的空格有時也會形成錯誤。這個插件會自動刪除這些沒必要要的空格

24. ConvertToUTF8

轉碼成utf-8，解決亂碼問題

25. SideBarFolders

打開的文件夾都太多了，來用這個來管理文件夾

26. SublimeREPL

這多是對程序員頗有用的插件。SublimeREPL 容許你在 Sublime Text 中運行各類語言(NodeJS,Python,Ruby,Scala 和 Haskell 等等)

27. Vue Syntax Highlight

Vue(*.vue)高亮插件

28. Prefixr

寫 CSS可自動添加 -webkit 等私有詞綴，Ctrl+Alt+X觸發

29. 控制檯呼出插件Terminal

用node，Grunt等等要調出控制檯的，裝上就能用，Tips:快捷鍵 ctrl+shift+T呼出當前文件路徑的控制檯

30. SideBarEnhancements

側邊欄加強插件,注意該插件只支持 Sublime Text 3，不支持舊版本的 Sublime Text 2

31. windows下一鍵瀏覽文件

Preferences->Key Bindings - User打開用戶快捷鍵設置，copy下面的設置

[
    //firefox
    {
        "keys": ["f1"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Mozilla Firefox\\firefox.exe",
            "extensions": ".*"
        }
    },
    //chorme
    {
        "keys": ["f2"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Users\\manfr\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",
            "extensions": ".*"
        }
    },
    //IE
    {
        "keys": ["f3"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",
            "extensions": ".*"
        }
    },
    //safari
    {
        "keys": ["f4"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Safari\\Safari.exe",
            "extensions": ".*"
        }
    }
]
複製代碼

keys是按鍵，application是瀏覽器應用程序路徑，注意反斜槓的要轉義。extensions是匹配全部的文件後綴格式,SublimeText3中f1-f12中只有f11被默認爲全屏命令，其餘的沒設置。也就是說，任意個瀏覽器一字排開按過去測試

linux下的一鍵瀏覽文件

設置一鍵瀏覽文件的時候了，瀏覽器安裝的目錄跟Windows有點區別，看下面

[
    //firefox
    {
        "keys": ["f1"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "/usr/lib/firefox/firefox",
            "extensions": ".*"
        }
    },
    //chorme
    {
        "keys": ["f2"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "/opt/google/chrome/google-chrome",
            "extensions": ".*"
        }
    }
]
複製代碼

火狐是centos,redhat等自帶的，目錄如上。而後Chrome是我本身裝的，基本上也應該是這個目錄。裝好以後找個文件按F1和F2檢測下就好

32. 解決總是彈出自動更新彈框

找到Preferences -> Settings-User（設置用戶）
在最後一個花括號結尾（「｝」）前添加一句："update_check":false
而後請關閉Submine Text並重啓，即不會再彈出更新提醒了

33. 添加右鍵菜單

添加右鍵菜單有時候要開個文件要開個SublimeText3，又要拉文件，麻煩。這裏介紹將Sublime添加到右鍵菜單

1. 打開註冊表，開始→運行→regedit
2. 在 HKEY_CLASSSES_ROOT→ * → Shell 下面新建項命名爲SublimeText
3. 右鍵SublimeText項，新建字符串值，命名爲Icon，值爲 「sublime_text.exe所在路徑,0」，例如：C:\Program Files\Sublime Text 3\sublime_text.exe,0
4. 右鍵SublimeText項，新建項，命名爲command，默認值爲 「sublime_text.exe所在路徑 %1」，例如：C:\Program Files\Sublime Text 3\sublime_text.exe %1
複製代碼

按照步驟更改完成後,隨便右擊個文本文件試試，就能夠看到Sublime打開的選項了

33 Less2Css

34 side Bar

35 SublimeOnSaveBuild

36 SyntaxHighlightTools

37 Vue Formatter

38 Autoprefixer

39 SFTP

總結

關於sublimeText的內容就先介紹到這,主要介紹sublimeText自己的一些經常使用的快捷鍵使用和插件的使用,它只是衆多開發編輯中的一個工具而已,衆多的快捷鍵配合插件的使用,真的很強大,我以爲必定程度上是能夠解放體力勞動的,以前,我忽略快捷鍵和插件的使用,總以爲那些快捷鍵記起來是負擔,插件也沒有什麼,寫代碼的速度一直提不上去,可是如今,我以爲能偷懶就要偷懶,刻意的讓本身去多用,重複性的勞動是長久以往,是毫無心義的,對於sublimeText這一神器,新的東西還有本身待續發掘...菜鳥一直行走在路上

如下是本篇提點概要

sublimeText3的安裝
sublimeText3快捷鍵(選擇類,編輯類,搜索類,顯示類)
sublimeText插件篇
- 利用Package Control安裝插件
- 如何查找已安裝的插件,去除插件(兩種方法,在線安裝(推薦),github等其餘渠道搜,package下拷貝)
- Alignment(代碼對齊):快捷鍵:ctrl+Alt+A,也能夠本身自定義
- HTML-CSS-JS Prettify:代碼格式化(鼠標右鍵選該項便可)
- Emmet插件(最爲強大)emmetAPIemmetAPI點擊便可查看
- SublimeTmpl 快速生成文件模板
- cssRem安裝,與px轉化rem
- sass,less安裝(上文中以sass爲例,less同理)
- SublimeOnSaveBuild保存自動編譯
- Autoprefixer
- Colorpicker取色器插件
- JsFormatjs序列化
- DocBlockrSublime平臺上開發一款自動補全代碼插件
- Tagify, Tag 標籤匹配,HTML/XML標籤縮進、補全和校驗
- BracketHighlighter相似於代碼匹配，能夠匹配括號
- autofilename自動關聯圖片,css,js等資源路徑插件
- MarkdownEditing(markdown編輯插件),markdown Preview(markdown預覽插件,也便是在瀏覽器預覽)
- Javascript-API-Completions支持Javascript、JQuery
- translate-CN中英互譯插件
- WakaTime 記錄你Code時間