Sublime Text 基本概念

簡介

Sublime Text是一款跨平臺代碼編輯器（Code Editor），從最初的Sublime Text 1.0寇漫，到現(xiàn)在的Sublime Text 3.0，Sublime Text從一個不知名的編輯器演變到現(xiàn)在幾乎是各平臺首選的GUI編輯器乙墙。

說明

Sublime Text 介紹：Sublime Text 是一個輕量际看、簡潔、高效盖高、跨平臺的編輯器慎陵。
Sublime Text具有漂亮的用戶界面和強大的功能眼虱，例如代碼縮略圖，Python的插件席纽，代碼段等捏悬。還可自定義鍵綁定，菜單和工具欄润梯。
Sublime Text 的主要功能包括：拼寫檢查过牙，書簽，完整的 Python API 纺铭， Goto 功能寇钉，即時項目切換，多選擇彤蔽，多窗口等等摧莽。
Sublime Text 是一個跨平臺的編輯器，同時支持Windows顿痪、Linux镊辕、Mac OS X等操作系統(tǒng)。
Sublime Text 的特色功能：
良好的擴展功能蚁袭，官方稱之為安裝包(Package)征懈。
右邊沒有滾動條，取而代之的是代碼縮略圖揩悄，這個功能非常贊
強大的快捷命令“可以實時搜索到相應的命令卖哎、選項、snippet 和 syntex删性， 按下回車就可以直接執(zhí)行亏娜，減少了查找的麻煩〉磐Γ”
即時的文件切換维贺。
隨心所欲的跳轉到任意文件的任意位置。
多重選擇(Multi-Selection)功能允許在頁面中同時存在多個光標巴帮。支持 VIM 模式支持宏溯泣，簡單地說就是把操作錄制下來或者自己編寫命令，然后播放剛才錄制的操作或者命令榕茧。更新非常勤快

優(yōu)點：

主流前端開發(fā)編輯器體積較小垃沦，運行速度快文本功能強大支持編譯功能且可在控制臺看到輸出內嵌python解釋器支持插件開發(fā)以達到可擴展目的Package Control：ST支持的大量插件可通過其進行管理

新建文件時快速生成Html

安裝如下插件：

• FileHeader：自動創(chuàng)建文件開頭模板，并且會根據(jù)最后的保存時間修改更新時間用押。官網鏈接肢簿。
• CSS Format：css格式化。
• Emmet：它能夠讓你在編輯器中書寫CSS和HTML的縮寫并且動態(tài)地拓展它，是一個能大幅度提高前端開發(fā)效率的一個工具译仗。這個軟件的安裝過程比較久抬虽。官網教程官觅。

開始使用：

新建文件纵菌，輸入html:5，按[Ctrl + E] 或者 Tab 鍵休涤，

參考鏈接：Sublime Text 新建文件快速生成Html【頭部信息】和【代碼補全】咱圆、【漢化】

常用操作

禁用自動完成

自動完成可以用auto_complete設置禁用。要禁用它功氨，添加在偏好設置?右窗格：

"auto_complete": false

如果禁用自動完成序苏，則可以手動顯示完成彈出窗口，或者可以使用制表符插入最高排名的完成捷凄，而不顯示彈出窗口忱详。

手動顯示完成

如果它當前沒有顯示，按Ctrl +空格鍵將顯示完成彈出窗口跺涤。 如果顯示匈睁，它將選擇下一個項目。

提交表

默認情況下桶错，在完成彈出選定的項目將被提交時航唆，按下回車。這可以創(chuàng)建承諾完成之間的歧義院刁，和插入一個換行符糯钙。通過設置auto_complete_commit_on_tab設置為true，進入將插入一個換行符退腥，tab將目前完成的任岸。還有其他的好處，因為Sublime Text知道沒有歧義狡刘，它會顯示一個更精確的完成列表享潜，以及一個你想要更多的可能是排在首位。颓帝。建議在標簽上啟用提交米碰，但需要很短時間才能使用。

禁用Tab自動補全

有時“Tab自動補全”并不理想购城。 要關閉它吕座，就將這行代碼添加到首選項?設置的右側窗格中：

"tab_completion": false

插入文字標簽

要插入標簽，而不是一個結束瘪板，按Shift + Tab吴趴。

Sublime Text 3 無干擾模式

無干擾模式將全屏顯示您的文件，只有文本顯示在顯示器的中心侮攀。所有UI Chrome都已隱藏锣枝，但可以訪問厢拭。 無干擾模式可以通過查看(<u>v</u>)?進入/退出無干擾模式項進入。當進入無干擾模式所有UI Chrome（側邊欄撇叁，小地圖供鸠，狀態(tài)欄等）都將被隱藏。您可以通過“查看（<u>V</u>）”菜單選擇性地啟用UI的某些部分 - 下次您進入無干擾模式時陨闹，系統(tǒng)會記住您的設置楞捂。自定義
當在無干擾模式時，某些設置將被應用趋厉。默認設置（located in Packages/Default/Distraction Free.sublime-settings）是：

{
    "line_numbers": false,
    "gutter": false,
    "draw_centered": true,
    "wrap_width": 80,
    "word_wrap": true,
    "scroll_past_end": true
}

您可以通過編輯Packages / User / Distraction Free.sublime設置來自定義這些設置寨闹，通過首選項?設置 - 無干擾模式菜單項可以訪問。這是值得注意的wrap_width設置君账，上面繁堡。 值為80導致包裝發(fā)生在80個字符。 您可能希望將它設置為一個較高的值乡数，或者換到窗口寬度椭蹄，將其設置為0。

啟用經典模式

經典模式是默認禁用的瞳脓，通過ignored_packages設置塑娇。 如果從忽略包列表中刪除“Vintage”，您可以使用vi鍵進行編輯：選擇首選項?設置菜單項
編輯ignored_packages設置劫侧，將其更改為：

"ignored_packages": ["Vintage"]

to:

"ignored_packages": []

現(xiàn)在保存文件埋酬。未啟用經典模式 - 您會在狀態(tài)欄中看到“INSERT MODE”默認在默認情況下開始插入模式。這可以通過將以下設置添加到您的用戶設置來更改：

"vintage_start_in_command_mode": true

項目格式

.sublime-project文件是JSON烧栋，并支持三個頂級部分：文件夾写妥，包括文件夾，設置审姓，文件設置覆蓋和build_systems珍特，用于特定于項目的構建系統(tǒng)。 一個例子：

{ 
    "folders": 
    [ 
        { 
            "path": "src", 
            "folder_exclude_patterns": ["backup"], 
            "follow_symlinks": true 
         }, 
        { 
            "path": "docs", 
            "name": "Documentation", 
            "file_exclude_patterns": ["*.css"] 
         }
     ], 
   "settings": { "tab_size": 8 }, 
    "build_systems": 
    [ 
        { "name": "List", "shell_cmd": "ls -l" } 
    ]
}

常用插件

SublimeCodeIntel：JavaScript代碼自動提示（不好用）

安裝完成后魔吐，通過路徑Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打開配置文件扎筒。

將

"codeintel_selected_catalogs": ["jQuery"]

改為：

"codeintel_selected_catalogs": ["JavaScript"]

保存后重啟軟件。

參考鏈接：#

javascript complet：JavaScript代碼自動提示

• 官網鏈接

• GitHub鏈接

在google上搜關鍵字"sublime javascript complete"找到的酬姆。另外還搜到一個SublimeAllAutocomp lete

JsFormat：JS代碼格式化

快捷鍵是：選中JS代碼嗜桌，然后按ctrl+alt+f。

或者辞色，先用快捷鍵打開命令面板 “ctrl + shift + p”, 再輸入 “Format: Javascript” 就可以使用格式化命令

Sublime Server

我們如果右鍵在瀏覽器中打開html網頁骨宠，其實是以文件路徑的方式打開的，導致很多api無法操作。最好的辦法是：將html在服務器上打開层亿。

我們如果安裝 Sublime Server桦卒，就可以讓網頁在本地的服務器上打開。

安裝成功之后匿又，使用步驟如下：

（1）選擇菜單欄"Tools --> SublimeServer --> Start SublimeServer"啟動服務器方灾。

（2）在html文檔里，右鍵選擇 "View in SublimeServer"琳省。

如果想關閉服務器迎吵，直接把Sublime Text 整個軟件關掉就好躲撰。其他的關閉方式容易導致軟件卡死针贬。

All Autocomplete

Sublime Text 默認的 Autocomplete 功能只考慮當前的文件，而 AllAutocomplete 插件會搜索所有打開的文件來尋找匹配的提示詞拢蛋。

3 Alignment

代碼對齊

AutoFileName

快速幫助你在文件中寫路徑整體來說還不錯

Autoprefixer

這個插件主要應用css的瀏覽器兼容書寫桦他，自動分析你的css文件，解析出新的css文件谆棱，可以配置你要兼容的瀏覽器快压，不過這個插件要在之前安裝nodejs

BracketHighlighter

配置文件的高亮設置，讓你的代碼有不同的顏色區(qū)分該插件提供配對標簽垃瞧，或大括號或字符引號的配對高亮顯示蔫劣，算是對系統(tǒng)高亮的加強吧。

BufferScroll

你可以輕松書寫一個文件多個位置了

ChineseLocalization

各國語言包个从，小日本的都有哦

CSS Comments

該有的都有脉幢，不該有的也有了

CSS Format

css序列化插件，支持默認多種序列方案嗦锐，還可以自己配置自己喜歡的

CSS3

css3語言提示插件嫌松，本來不想寫的，也不是什么特別的奕污，但是可能會有人用到

CTags

實在方法跳轉萎羔，跳轉到你方法
之后在win7下或者linux下安裝ctags軟件
打開ctags插件包的use-setting配置"command": "d:/IDE/ctags58/ctags.exe"這個路徑是下載ctags的安裝路徑

這個插件能跨文件跳轉，跳轉到指定函數(shù)聲明的地方(ctrl+alt+左鍵)碳默。 使用package control 搜索ctags 進行安裝（安裝ctags插件就可以了贾陷， 還有一個 CTags for PHP 插件沒什么用）,注意安裝好插件后要需要安裝ctags命令。 將ctags.exe文件放在一個環(huán)境變量能訪問到的地方嘱根。打開cmd髓废， 輸入ctags，如果有這個命令儿子，證明成功了瓦哎。ubuntu下安裝運行命令：sudo apt-get install exuberant-ctags 。然后在sublime項目文件夾右鍵， 會出 現(xiàn)Ctag:Rebuild Tags 的菜單蒋譬。點擊它割岛，然后會生成.tags的文件 然后在你代碼中， 光標放在某個函數(shù)上犯助， 點擊 就可以跳轉到函數(shù)聲明的地方癣漆。

DocBlockr

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

Emmet

Emmet的前身是大名鼎鼎的Zen coding剂买，如果你從事Web前端開發(fā)的話惠爽，對該插件一定不會陌生。它使用仿CSS選擇器的語法來生成代碼瞬哼，大大提高了HTML/CSS代碼編寫的速度

HTML-CSS-JS Prettify

全能序列化JavaScript

Completions

js最基本的api快查片段

JsFormat

js序列化婚肆，能排在下載插件前25位，好的話就不用說了

Keymaps

快速查找所有插件的快捷鍵

LiveStyle

LiveStyle是Chrome中提高開發(fā)效率的一款CSS編輯器插件坐慰。利用LiveStyle和Sublime Text3編輯器結合可實現(xiàn)可視化開發(fā)较性，一次配置，簡單易用结胀！赞咙，并且最近支持less,scss　　你本地css文件可以和瀏覽器的css文件映射，同步到本地糟港，但是必須在chrome上運行攀操，chrome必須安裝相應的插件

PackageResourceViewer

通過這個特殊的插件，會給你查看和編輯SublimeText附帶的不同的包帶來很多方便秸抚。您也可以提取任何給定的包速和。這一行動將其復制到用戶文件夾，以便您可以安全地對其進行編輯耸别〗“牛　　
很多人苦惱不能修改左側導航面板字體大小，用這個可以輕松辦到　　安裝PackageResourceViewer 快捷鍵 ?(command)+?(shift)+P 打開 Command Palette 輸入 Package Control:Install 回車秀姐，等待加載package列表 搜索并安裝 PackageResourceViewer 包　　最后慈迈，使用PackageResourceViewer打開Theme文件進行編輯 快捷鍵 ?(command)+?(shift)+P 打開 Command Palette 輸入 PackageResourceViewer: Open Resource 回車，打開包列表 選擇 Theme - Default省有，再選擇 Default.sublimt-theme 搜索 　　sidebar_label痒留，在 "class": "sidebar_label" 后邊加一行："font.size": 18，將字體大小設置為18蠢沿，保存伸头。 好啦，大功告成舷蟀！　　如果覺得行間距太小恤磷，可以往上找下面哼，有個class:"sidebartree"，調一下里邊的rowpadding配置即可扫步。

Pretty JSONJSON

一個輕量級的資料交換語言魔策，目前許多網站AJAX request的回應結果都是JSON格式

SublimeCodeIntel

一個全功能的 Sublime Text 代碼自動完成引擎 ，本人做過對比河胎，但是如果和webstorm的自動尋找還是稍遜一籌闯袒，不過對于大部分人來說夠用了，能很方便跳到你想要的方法　　支持的語言挺多的（JavaScript, Mason, XBL, XUL, RHTML, SCSS, Python, HTML, Ruby, Python3, XML, Sass, XSLT, Django, HTML5, Perl, CSS, Twig, Less, Smarty, Node.js, Tcl, TemplateToolkit, PHP.）

SublimeLinter

代碼校驗插件游岳，支持多種語言政敢，這個是主插件，如果想檢測特定的文件需要單獨下載

SublimeLinter-jshint

這個就是單獨的插件胚迫，上面的一個分支

SublimeTmpl

創(chuàng)建常用文件初始模板喷户，必須html,css,js模板

Tag

HTML/XML標簽縮進、補全和校驗

Themr

sublime可以下載很多風格樣式晌区，用這個插件可以管理所有的風格

SideBarEnhancements

增強右鍵菜單文件操作功能

代碼快速生成

（1）>符號的技巧：

輸入ul>li*9摩骨，然后按tab鍵，生成的代碼如下朗若；（符號>是包含的關系）

        <div>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
            <li>a</li>
        </div>
    </div>

sublime text 快捷鍵