Sublime Text 基本概念

簡(jiǎn)介

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

說(shuō)明

Sublime Text 介紹：Sublime Text 是一個(gè)輕量、簡(jiǎn)潔、高效、跨平臺(tái)的編輯器。
Sublime Text具有漂亮的用戶界面和強(qiáng)大的功能，例如代碼縮略圖，Python的插件，代碼段等。還可自定義鍵綁定，菜單和工具欄。
Sublime Text 的主要功能包括：拼寫(xiě)檢查，書(shū)簽，完整的 Python API ， Goto 功能，即時(shí)項(xiàng)目切換，多選擇，多窗口等等。
Sublime Text 是一個(gè)跨平臺(tái)的編輯器，同時(shí)支持Windows、Linux、Mac OS X等操作系統(tǒng)。
Sublime Text 的特色功能：
良好的擴(kuò)展功能，官方稱之為安裝包(Package)。
右邊沒(méi)有滾動(dòng)條，取而代之的是代碼縮略圖，這個(gè)功能非常贊
強(qiáng)大的快捷命令“可以實(shí)時(shí)搜索到相應(yīng)的命令、選項(xiàng)、snippet 和 syntex， 按下回車(chē)就可以直接執(zhí)行，減少了查找的麻煩。”
即時(shí)的文件切換。
隨心所欲的跳轉(zhuǎn)到任意文件的任意位置。
多重選擇(Multi-Selection)功能允許在頁(yè)面中同時(shí)存在多個(gè)光標(biāo)。支持 VIM 模式支持宏，簡(jiǎn)單地說(shuō)就是把操作錄制下來(lái)或者自己編寫(xiě)命令，然后播放剛才錄制的操作或者命令。更新非常勤快

優(yōu)點(diǎn)：

主流前端開(kāi)發(fā)編輯器體積較小，運(yùn)行速度快文本功能強(qiáng)大支持編譯功能且可在控制臺(tái)看到輸出內(nèi)嵌python解釋器支持插件開(kāi)發(fā)以達(dá)到可擴(kuò)展目的Package Control：ST支持的大量插件可通過(guò)其進(jìn)行管理

新建文件時(shí)快速生成Html

安裝如下插件：

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

開(kāi)始使用：

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

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

常用操作

禁用自動(dòng)完成

自動(dòng)完成可以用auto_complete設(shè)置禁用。要禁用它，添加在偏好設(shè)置?右窗格：

"auto_complete": false

如果禁用自動(dòng)完成，則可以手動(dòng)顯示完成彈出窗口，或者可以使用制表符插入最高排名的完成，而不顯示彈出窗口。

手動(dòng)顯示完成

如果它當(dāng)前沒(méi)有顯示，按Ctrl +空格鍵將顯示完成彈出窗口。 如果顯示，它將選擇下一個(gè)項(xiàng)目。

提交表

默認(rèn)情況下，在完成彈出選定的項(xiàng)目將被提交時(shí)，按下回車(chē)。這可以創(chuàng)建承諾完成之間的歧義，和插入一個(gè)換行符。通過(guò)設(shè)置auto_complete_commit_on_tab設(shè)置為true，進(jìn)入將插入一個(gè)換行符，tab將目前完成的。還有其他的好處，因?yàn)镾ublime Text知道沒(méi)有歧義，它會(huì)顯示一個(gè)更精確的完成列表，以及一個(gè)你想要更多的可能是排在首位。。建議在標(biāo)簽上啟用提交，但需要很短時(shí)間才能使用。

禁用Tab自動(dòng)補(bǔ)全

有時(shí)“Tab自動(dòng)補(bǔ)全”并不理想。 要關(guān)閉它，就將這行代碼添加到首選項(xiàng)?設(shè)置的右側(cè)窗格中：

"tab_completion": false

插入文字標(biāo)簽

要插入標(biāo)簽，而不是一個(gè)結(jié)束，按Shift + Tab。

Sublime Text 3 無(wú)干擾模式

無(wú)干擾模式將全屏顯示您的文件，只有文本顯示在顯示器的中心。所有UI Chrome都已隱藏，但可以訪問(wèn)。 無(wú)干擾模式可以通過(guò)查看(<u>v</u>)?進(jìn)入/退出無(wú)干擾模式項(xiàng)進(jìn)入。當(dāng)進(jìn)入無(wú)干擾模式所有UI Chrome（側(cè)邊欄，小地圖，狀態(tài)欄等）都將被隱藏。您可以通過(guò)“查看（<u>V</u>）”菜單選擇性地啟用UI的某些部分 - 下次您進(jìn)入無(wú)干擾模式時(shí)，系統(tǒng)會(huì)記住您的設(shè)置。自定義
當(dāng)在無(wú)干擾模式時(shí)，某些設(shè)置將被應(yīng)用。默認(rèn)設(shè)置（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
}

您可以通過(guò)編輯Packages / User / Distraction Free.sublime設(shè)置來(lái)自定義這些設(shè)置，通過(guò)首選項(xiàng)?設(shè)置 - 無(wú)干擾模式菜單項(xiàng)可以訪問(wèn)。這是值得注意的wrap_width設(shè)置，上面。 值為80導(dǎo)致包裝發(fā)生在80個(gè)字符。 您可能希望將它設(shè)置為一個(gè)較高的值，或者換到窗口寬度，將其設(shè)置為0。

啟用經(jīng)典模式

經(jīng)典模式是默認(rèn)禁用的，通過(guò)ignored_packages設(shè)置。 如果從忽略包列表中刪除“Vintage”，您可以使用vi鍵進(jìn)行編輯：選擇首選項(xiàng)?設(shè)置菜單項(xiàng)
編輯ignored_packages設(shè)置，將其更改為：

"ignored_packages": ["Vintage"]

to:

"ignored_packages": []

現(xiàn)在保存文件。未啟用經(jīng)典模式 - 您會(huì)在狀態(tài)欄中看到“INSERT MODE”默認(rèn)在默認(rèn)情況下開(kāi)始插入模式。這可以通過(guò)將以下設(shè)置添加到您的用戶設(shè)置來(lái)更改：

"vintage_start_in_command_mode": true

項(xiàng)目格式

.sublime-project文件是JSON，并支持三個(gè)頂級(jí)部分：文件夾，包括文件夾，設(shè)置，文件設(shè)置覆蓋和build_systems，用于特定于項(xiàng)目的構(gòu)建系統(tǒng)。 一個(gè)例子：

{ 
    "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代碼自動(dòng)提示（不好用）

安裝完成后，通過(guò)路徑Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打開(kāi)配置文件。

將

"codeintel_selected_catalogs": ["jQuery"]

改為：

"codeintel_selected_catalogs": ["JavaScript"]

保存后重啟軟件。

參考鏈接：#

javascript complet：JavaScript代碼自動(dòng)提示

• 官網(wǎng)鏈接

• GitHub鏈接

在google上搜關(guān)鍵字"sublime javascript complete"找到的。另外還搜到一個(gè)SublimeAllAutocomp lete

JsFormat：JS代碼格式化

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

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

Sublime Server

我們?nèi)绻益I在瀏覽器中打開(kāi)html網(wǎng)頁(yè)，其實(shí)是以文件路徑的方式打開(kāi)的，導(dǎo)致很多api無(wú)法操作。最好的辦法是：將html在服務(wù)器上打開(kāi)。

我們?nèi)绻惭b Sublime Server，就可以讓網(wǎng)頁(yè)在本地的服務(wù)器上打開(kāi)。

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

（1）選擇菜單欄"Tools --> SublimeServer --> Start SublimeServer"啟動(dòng)服務(wù)器。

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

如果想關(guān)閉服務(wù)器，直接把Sublime Text 整個(gè)軟件關(guān)掉就好。其他的關(guān)閉方式容易導(dǎo)致軟件卡死。

All Autocomplete

Sublime Text 默認(rèn)的 Autocomplete 功能只考慮當(dāng)前的文件，而 AllAutocomplete 插件會(huì)搜索所有打開(kāi)的文件來(lái)尋找匹配的提示詞。

3 Alignment

代碼對(duì)齊

AutoFileName

快速幫助你在文件中寫(xiě)路徑整體來(lái)說(shuō)還不錯(cuò)

Autoprefixer

這個(gè)插件主要應(yīng)用css的瀏覽器兼容書(shū)寫(xiě)，自動(dòng)分析你的css文件，解析出新的css文件，可以配置你要兼容的瀏覽器，不過(guò)這個(gè)插件要在之前安裝nodejs

BracketHighlighter

配置文件的高亮設(shè)置，讓你的代碼有不同的顏色區(qū)分該插件提供配對(duì)標(biāo)簽，或大括號(hào)或字符引號(hào)的配對(duì)高亮顯示，算是對(duì)系統(tǒng)高亮的加強(qiáng)吧。

BufferScroll

你可以輕松書(shū)寫(xiě)一個(gè)文件多個(gè)位置了

ChineseLocalization

各國(guó)語(yǔ)言包，小日本的都有哦

CSS Comments

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

CSS Format

css序列化插件，支持默認(rèn)多種序列方案，還可以自己配置自己喜歡的

CSS3

css3語(yǔ)言提示插件，本來(lái)不想寫(xiě)的，也不是什么特別的，但是可能會(huì)有人用到

CTags

實(shí)在方法跳轉(zhuǎn)，跳轉(zhuǎn)到你方法
之后在win7下或者linux下安裝ctags軟件
打開(kāi)ctags插件包的use-setting配置"command": "d:/IDE/ctags58/ctags.exe"這個(gè)路徑是下載ctags的安裝路徑

這個(gè)插件能跨文件跳轉(zhuǎn)，跳轉(zhuǎn)到指定函數(shù)聲明的地方(ctrl+alt+左鍵)。 使用package control 搜索ctags 進(jìn)行安裝（安裝ctags插件就可以了， 還有一個(gè) CTags for PHP 插件沒(méi)什么用）,注意安裝好插件后要需要安裝ctags命令。 將ctags.exe文件放在一個(gè)環(huán)境變量能訪問(wèn)到的地方。打開(kāi)cmd， 輸入ctags，如果有這個(gè)命令，證明成功了。ubuntu下安裝運(yùn)行命令：sudo apt-get install exuberant-ctags 。然后在sublime項(xiàng)目文件夾右鍵， 會(huì)出 現(xiàn)Ctag:Rebuild Tags 的菜單。點(diǎn)擊它，然后會(huì)生成.tags的文件 然后在你代碼中， 光標(biāo)放在某個(gè)函數(shù)上， 點(diǎn)擊 就可以跳轉(zhuǎn)到函數(shù)聲明的地方。

DocBlockr

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

Emmet

Emmet的前身是大名鼎鼎的Zen coding，如果你從事Web前端開(kāi)發(fā)的話，對(duì)該插件一定不會(huì)陌生。它使用仿CSS選擇器的語(yǔ)法來(lái)生成代碼，大大提高了HTML/CSS代碼編寫(xiě)的速度

HTML-CSS-JS Prettify

全能序列化JavaScript

Completions

js最基本的api快查片段

JsFormat

js序列化，能排在下載插件前25位，好的話就不用說(shuō)了

Keymaps

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

LiveStyle

LiveStyle是Chrome中提高開(kāi)發(fā)效率的一款CSS編輯器插件。利用LiveStyle和Sublime Text3編輯器結(jié)合可實(shí)現(xiàn)可視化開(kāi)發(fā)，一次配置，簡(jiǎn)單易用！，并且最近支持less,scss　　你本地css文件可以和瀏覽器的css文件映射，同步到本地，但是必須在chrome上運(yùn)行，chrome必須安裝相應(yīng)的插件

PackageResourceViewer

通過(guò)這個(gè)特殊的插件，會(huì)給你查看和編輯SublimeText附帶的不同的包帶來(lái)很多方便。您也可以提取任何給定的包。這一行動(dòng)將其復(fù)制到用戶文件夾，以便您可以安全地對(duì)其進(jìn)行編輯?！　?br> 很多人苦惱不能修改左側(cè)導(dǎo)航面板字體大小，用這個(gè)可以輕松辦到　　安裝PackageResourceViewer 快捷鍵 ?(command)+?(shift)+P 打開(kāi) Command Palette 輸入 Package Control:Install 回車(chē)，等待加載package列表 搜索并安裝 PackageResourceViewer 包　　最后，使用PackageResourceViewer打開(kāi)Theme文件進(jìn)行編輯 快捷鍵 ?(command)+?(shift)+P 打開(kāi) Command Palette 輸入 PackageResourceViewer: Open Resource 回車(chē)，打開(kāi)包列表 選擇 Theme - Default，再選擇 Default.sublimt-theme 搜索 　　sidebar_label，在 "class": "sidebar_label" 后邊加一行："font.size": 18，將字體大小設(shè)置為18，保存。 好啦，大功告成！　　如果覺(jué)得行間距太小，可以往上找下，有個(gè)class:"sidebartree"，調(diào)一下里邊的rowpadding配置即可。

Pretty JSONJSON

一個(gè)輕量級(jí)的資料交換語(yǔ)言，目前許多網(wǎng)站AJAX request的回應(yīng)結(jié)果都是JSON格式

SublimeCodeIntel

一個(gè)全功能的 Sublime Text 代碼自動(dòng)完成引擎 ，本人做過(guò)對(duì)比，但是如果和webstorm的自動(dòng)尋找還是稍遜一籌，不過(guò)對(duì)于大部分人來(lái)說(shuō)夠用了，能很方便跳到你想要的方法　　支持的語(yǔ)言挺多的（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

代碼校驗(yàn)插件，支持多種語(yǔ)言，這個(gè)是主插件，如果想檢測(cè)特定的文件需要單獨(dú)下載

SublimeLinter-jshint

這個(gè)就是單獨(dú)的插件，上面的一個(gè)分支

SublimeTmpl

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

Tag

HTML/XML標(biāo)簽縮進(jìn)、補(bǔ)全和校驗(yàn)

Themr

sublime可以下載很多風(fēng)格樣式，用這個(gè)插件可以管理所有的風(fēng)格

SideBarEnhancements

增強(qiáng)右鍵菜單文件操作功能

代碼快速生成

（1）>符號(hào)的技巧：

輸入ul>li*9，然后按tab鍵，生成的代碼如下；（符號(hào)>是包含的關(guān)系）

        <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 快捷鍵