sublimeText3编辑器使用大全
前言
相信對于很多寫代碼的小伙伴來說,對于開發編輯器都不會陌生,什么editplus,dw,webstorm,hubuilder,vscode,atom,esciplse,vim等蘿卜青菜都各有所愛,每個編輯器都有它的獨特之處,本質上并無優劣之分,只要代碼寫得好,寫得快,就可以了,然而工欲善其事必先利其器,好的工具就是成功的一半,最近一直都在想著,怎么樣提高自己的效率,如果總是復性的勞動一件事情,時間久了,覺得是毫無意義的,讓自己遠離刀耕火種的時代,提高效率,同時也是為了減少手殘腰椎痛(說得好像不是搬磚的,可是我依舊是個搬磚的),那么今天就我平時的使用跟大家分享一款自己喜歡編輯器sublinmeText3,對于它的使用和學習,我也一直在摸索中,初學者學習筆記使用心得,希望對正在路上的你有些用...
安裝
在sublimeText官網或者百度輸入下載sublimeText3下載安裝包選擇性的安裝即可(根據自己的電腦位數(32/64)選擇性安裝),建議安裝英文版的
面板使用
上方是菜單選項欄,與眾多的編輯的操作都差不多,中間是編輯區域,最右側是快速定位縮略圖,左側是代碼行號
快捷鍵
sublimeText本身具備強大的編輯能力,鍵盤俠遠比鼠標手要快得多,當機械的重復勞動久了就顯得毫無意義,多多使用快捷鍵是提高快速編碼的一重要手段，sublimeText分為四種類別
選擇類
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，按兩次KCtrl+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
至于每個快捷鍵的使用,平時的學習刻意的練習,開發中多用,久而久之,就熟悉了的,不用刻意去記憶,那么多快捷鍵,想要記住是不容易的,可以一階段時間分開階段的熟練的使用
插件篇
sublimeText之所以讓我喜歡的地方,一方面是它打開文件相比其他編輯器而言,非常的快,而且主色調也很詼諧,最重要的是它強大的插件機制,是占很大優勢的,以下是我個人較為喜歡的插件，常用的在前
在安裝各種插件之前,需要安裝Package control插件在線安裝
- 菜單欄-->
view-->Show Console(ctrl+)` - 將下面的配置配置代碼輸入到控制臺,在線安裝即可安裝文檔packagecontrol.io/installatio…,根據自己的sublimeText版本進行選擇安裝
- 安裝gif圖如下:
package control安裝 - 重啟Sublime Text 3
- 如果在
Perferences->package settings中看到package control這一項，則安裝成功
利用Package Control安裝插件
ctrl+shift+p或者菜單欄:Tools-->command palette調出命令面板, 輸入install 調出 Install Package 選項并回車，然后在列表中選中要安裝的插件,在輸入框中直接輸入插件名稱可進行搜插件,雙擊即可自動安裝,退出命令面板,在重復的按兩次ctrl+shift+p`可退回上次操作,或菜單欄上選擇命令面板
當然也可以直接在github上搜,下載安裝包,直接放在package目錄下就可以了的,示例如下所示
如何查找已安裝的插件,去除插件
同樣調出命令行面板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中以對象字面量的方式配置一下就可以了的
總結
關于sublimeText的內容就先介紹到這,主要介紹sublimeText本身的一些常用的快捷鍵使用和插件的使用,它只是眾多開發編輯中的一個工具而已,眾多的快捷鍵配合插件的使用,真的很強大,我覺得一定程度上是可以解放體力勞動的,之前,我忽略快捷鍵和插件的使用,總覺得那些快捷鍵記起來是負擔,插件也沒有什么,寫代碼的速度一直提不上去,但是現在,我覺得能偷懶就要偷懶,刻意的讓自己去多用,重復性的勞動是長久以往,是毫無意義的,對于sublimeText這一神器,新的東西還有自己待續發掘...菜鳥一直行走在路上
以下是本篇提點概要
- sublimeText3的安裝
- sublimeText3快捷鍵(選擇類,編輯類,搜索類,顯示類)
- sublimeText插件篇
- 利用Package Control安裝插件
- 如何查找已安裝的插件,去除插件(兩種方法,在線安裝(推薦),github等其他渠道搜,package下拷貝)
Alignment(代碼對齊):快捷鍵:ctrl+Alt+A,也可以自己自定義HTML-CSS-JS Prettify:代碼格式化(鼠標右鍵選該項即可)Emmet插件(最為強大)emmetAPIemmetAPI點擊即可查看SublimeTmpl快速生成文件模板cssRem安裝,與px轉化remsass,less安裝(上文中以sass為例,less同理)SublimeOnSaveBuild保存自動編譯AutoprefixerColorpicker取色器插件JsFormatjs序列化DocBlockrSublime平臺上開發一款自動補全代碼插件Tagify,Tag標簽匹配,HTML/XML標簽縮進、補全和校驗BracketHighlighter類似于代碼匹配，可以匹配括號autofilename自動關聯圖片,css,js等資源路徑插件MarkdownEditing(markdown編輯插件),markdown Preview(markdown預覽插件,也即是在瀏覽器預覽)Javascript-API-Completions支持Javascript、JQuerytranslate-CN中英互譯插件WakaTime記錄你Code時間
微信公眾號:itclancoder
itclancoder QQ交流群:643468880，歡迎各位大佬多交流,共同進步
作者：itclanCoder
鏈接：https://juejin.im/post/5a005392518825295f5d53c8
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
總結
以上是生活随笔為你收集整理的sublimeText3编辑器使用大全的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 双端队列 HDOJ 3530 Subse
- 下一篇： 国四国五怎么识别图标