我的 Sublime Text 必備插件

作者：mqliutie
原文地址：http://segmentfault.com/a/1190000002748032

常用插件 ：

  1. SideBarEnhancements
  2. HTML-CSS-JS Prettify
  3. BracketHighlighter
  4. SublimeCodeIntel
  5. Emmet
  6. CTags
  7. Markdown Editing 和 Markdown Preview

SideBarEnhancements

Sublime Text有一個缺點，當(dāng)你想使用瀏覽器瀏覽你的html頁面的時候，你需要在你的文件上點擊鼠標(biāo)右鍵，選擇Open In Browser才可以瀏覽器瀏覽，而這是用默認(rèn)瀏覽器瀏覽，如果想用第二個瀏覽器都沒辦法。所以，可以通過SideBarEnhancements這個插件來更方便的瀏覽。

第一步：安裝

通過Package Control->Install Package搜索sidebarenhancements安裝。

第二步：配置 ( 一 )

右鍵某html，js，css等文件，找到Open With然后點擊Edit Applications將里面內(nèi)容設(shè)置為：

[
    {"id": "side-bar-files-open-with",
        "children":
        [

            {
                "caption": "Firefox",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Firefox.app", 
                            //火狐瀏覽器的路徑 Windows中，后綴為.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false 
            },

            {
                "caption": "Chrome",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Chrome.app",
                            //Chrome瀏覽器的路徑 Windows中，后綴為.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false
            },
            
            //如果想再添加瀏覽器，復(fù)制下面這個對象，改相應(yīng)的路徑就可以了.
            {
                "caption": "Safari",
                "id": "side-bar-files-open-with-chrome",

                "command": "side_bar_files_open_with",
                "args": {
                            "paths": [],
                            "application": "/Applications/Safari.app",
                            //Safari瀏覽器的路徑 Windows中，后綴為.exe
                            "extensions":".*", 
                            "args":[]
                        },
                "open_automatically" : false 
            }
        
            
        ]
    }
]

第三步：配置 ( 二 )

打開Preferences里面的 Key Bindings - User把內(nèi)容修改為：

//keys 對應(yīng)的值就是按鍵，比如按F2就會用Firefox打開這個頁面
[
    { "keys": ["f2"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Firefox.app", 
                //對應(yīng)上面的Firefox路徑
                "extensions":".*" 
            } 
    },

    { "keys": ["f1"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Safari.app",
                //對應(yīng)上面的Safari路徑
                "extensions":".*" 
            } 
    },
    
    //如果有新添加的瀏覽器，只需要把下面這個對象復(fù)制一份，路徑與新添加的對應(yīng)就可以了.
    { "keys": ["f4"], "command": "side_bar_files_open_with",
            "args": {
                "paths": [],
                "application": "/Applications/Chrome.app",
                //對應(yīng)上面的Chrome路徑
                "extensions":".*" 
            } 
    }
]

現(xiàn)在，F1就是 Safari，F2是Firefox，F4是 Chrome.

HTML-CSS-JS Prettify

第一步：安裝

通過Package Control->Install Package搜索HTML-CSS-JS Prettify安裝。

第二步：使用

  • 選中格式化代碼，然后在按Cmd+Shift+H (如果是Windows系統(tǒng)按 Ctrl+Shift+H，這兩個快捷鍵是默認(rèn)的)。
  • 但是，這時候如果報錯sh: node: command not found，說明node沒有安裝，那么就需要安裝node。 安裝好后，Linux和Mac不需要做什么更改，而Windows用戶則需要配置一下node_path.
    • 首先，在菜單欄里點擊Preferences點擊第一個Browse Packages，然后進(jìn)入HTML-CSS-JS Prettify文件夾，找到HTMLPrettify.sublime-settings文件，用Sublime Text打開進(jìn)行更改windows對應(yīng)的值，就是安裝的node的路徑。

第三步： 配置 ( 快捷鍵 )

如果對快捷鍵不滿意，可以自己設(shè)置 . 打開Preferences里面的Key Bindings - User，添加內(nèi)容：{ "keys": ["alt+q"], "command": "htmlprettify" }，當(dāng)然快捷鍵你可以自己更改。

第四步： 配置 ( 代碼整理樣式 )

如果對代碼對其效果不滿意，可以選擇Preferences里的Package Settings找到HTML/CSS/JS Prettify里的Set Prettify Preferences. 里面是一些規(guī)則的設(shè)置。這個文件就是github(詳細(xì)設(shè)置可到github中看)中提到的.jsbeautifyrc文件。

BracketHighlighter

這個插件功能是匹配括號，在行號前面可以看到匹配括號的位置。

第一步：安裝

通過Package Control->Install Package搜索BracketHighlighter安裝。

第二步：配置

將preferences-->package settings-->Bracket highlighter-->Bracket settings-Default內(nèi)容復(fù)制到Bracket settings-User中，因為default里面的內(nèi)容是不可更改的，即使能更改，一旦插件更新，更改就會消失，所以盡量在User中設(shè)置。按Command+F(或者ctrl+F)搜索color，找到下所示：

"default": {
            "icon": "dot", //行號前面的匹配圖標(biāo)
            "color": "brackethighlighter.default",
            "style": "solid"http://樣式，可以使solid, outline, underline, hightlight和none.(solid和highlight是一樣的)
        },

        "unmatched": {
            "icon": "question",
            "style": "outline"
        },
        "curly": { //花括號
            "icon": "curly_bracket"
            // "color": "brackethighlighter.curly",
            //"style" : "underline"
            //這里面可以單獨設(shè)置自己的樣式，下面的一樣
        },
        "round": { //圓括號
            "icon": "round_bracket"
        },
        "square": { 方括號
            "icon": "square_bracket"
        },
        ....//下面還有一些其他符號

color是設(shè)置顏色，英文介紹沒看懂怎么替換顏色。

SublimeCodeIntel

它的功能是代碼提示，支持這些語言：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.

它還有一個功能，就是跳轉(zhuǎn)到函數(shù)定義的地方。

怪事 ：

這個插件真的是非常怪，第一次安裝的時候，如果不進(jìn)行第二步的配置就沒有代碼提示，于是進(jìn)行第二步配置，但是配置后函數(shù)跳轉(zhuǎn)功能沒有。緊接著我remove package然后重新安裝，還是不能跳轉(zhuǎn)。我將"Setting User"中的所有內(nèi)容刪除，函數(shù)跳轉(zhuǎn)功能有了。然后緊接著我又將Default的內(nèi)容全部復(fù)制到User中，函數(shù)跳轉(zhuǎn)功能還有，代碼提示功能也有。緊接著我又按照第二步修改過后，函數(shù)跳轉(zhuǎn)功能還有，代碼提示功能也有。弄不懂了- -+，反正現(xiàn)在能用就行。

可能是我人品差吧，，，同學(xué)安裝后什么也沒做，什么功能都有。而我折騰半天。

第一步： 安裝

通過Package Control->Install Package搜索SublimeCodeIntel安裝。(安裝過程中非常慢，慢慢等著吧，我掛了VPN快了不少。)

第二步： 配置

選擇Preferences->Package Settings->SublimeCodeIntel->Setting Default，將其內(nèi)容全部復(fù)制到Setting User中。按Command+F(或者ctrl+F)搜索codeintel_selected_catalogs，將其內(nèi)容改為如下：

"codeintel_selected_catalogs": [
  "HTML5", "HTML", "JavaScript"
],

第三步：使用

1.按d會提示div tag選擇這個div tag就會出現(xiàn)：

<div></div>

2.但輸入div.class或者div#id，按下Tab會出現(xiàn)下面效果：

<div class="class"></div>
<div id="id"></div>

這個功能2其實Emmet也有，但是Emmet沒有功能1的代碼提示。

Emmet

Emmet(前身為大名鼎鼎的Zen Coding)是一個能大幅度提高前端開發(fā)效率的一個工具：

第一步：安裝

通過Package Control->Install Package搜索Emmet安裝。

第二步：使用

快速設(shè)置class屬性和id屬性，在SublimeCodeIntel插件功能2就可以了，但是下面的功能SublimeCodeIntel卻沒有。

輸入ul>li*5，按下Tab，會有如下結(jié)果：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

更多使用方法可以 百度，Google 搜索這個插件怎么用，也可以去官方文檔查看。

第三步：配置

Emmet還有一個功能，選取相同詞，可以一次更改多個詞，在mac中默認(rèn)快捷鍵是Canmand+D(我記得是，要不然我也不會改鍵)。

我習(xí)慣Cammand+D(Ctrl+d)是刪除當(dāng)前行，所以在Preferences->Key Bindings - User添加下面這兩行：

{ "keys": ["command+shift+d"], "command":"find_under_expand" },
    { "keys": ["command+d"], "command":"run_macro_file", "args": {"file":"Packages/Default/Delete Line.sublime-macro"} } 
    // 修改過后，command+shift+d就是選取相同的詞，command+d刪除當(dāng)前行

CTags

這個插件的功能就是跳轉(zhuǎn)到函數(shù)定義的地方去。SublimeCodeIntel也有這個功能，因為當(dāng)時安裝 SublimeCodeIntel是跳轉(zhuǎn)有問題，所以找到了它(感覺它不如SublimeCodeIntel)。

第一步：安裝插件

通過Package Control->Install Package搜索CTags安裝。

第二步：安裝ctags

要想ctags插件可以使用，先要在相應(yīng)的項目目錄生成.tags文件，而生成這個文件，就需要在系統(tǒng)中安裝ctags.

  • Windows安裝：
    下載ctags.exe. 通過Preference -> Package Settings -> Ctags -> Settings Default中的內(nèi)容拷貝到Setting User中，將 "command": "" 中的"" 填入Ctags.exe的路徑位置。
  • Linux安裝：
    終端中依次輸入下列語句：
sudo apt-get install exuberant-ctags
sudo yum install ctags
//依賴yum管理工具，需要先安裝.注意安裝事項
  • Mac安裝 :
    如果有有MacPorts就用第一個命令，如果有Homebrew就用第二個命令。
port install ctags //需要安裝MacPorts
brew install ctags //需要安裝Homebrew

如果兩個都沒有，我推薦使用Homebrew，因為命令安裝，不麻煩，終端輸入下列命令：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
// 安裝時碰到一句話Press ENTER to continue or any other key to abort，按Enter鍵繼續(xù)(我記得我碰到的是Return，所以以為是刪除鍵).輸入密碼安裝完畢.
brew install ctags //ctags安裝完畢

第三步：配置

將下列代碼復(fù)制到Preferences->Package Settings->CTags->Setting User中保存：

{
    "command": "/usr/local/bin/ctags", 
    "autocomplete": true            
}

第四步：使用

終端進(jìn)入項目根目錄，運行：

ctags -R -f .tags

在Sublime Text中的項目根目錄點擊鼠標(biāo)右鍵會出現(xiàn)CTags : Rebuild Tags，點擊后就會出現(xiàn).tags文件和.tags_sorted_by_file文件。

現(xiàn)在找到一個調(diào)用函數(shù)的地方，選中函數(shù)名，鼠標(biāo)右鍵選擇Navigate to Defination，就會直接跳到函數(shù)聲明的地方。

問題 :
Ctags問題

Markdown Editing 和 Markdown Preview

當(dāng)在 Sublime Text 中編寫 markdown 文件時，直接按瀏覽器瀏覽全是亂碼，而且還沒有將 markdown 文件解析成相應(yīng)的 HTML. 這兩個插件的功能就是可以用瀏覽器瀏覽 Sublime Text 中編寫的 markdown文件。

第一步：安裝插件

通過Package Control->Install Package搜索Markdown Editing和Markdown Preview安裝。

第二步：配置

打開Preferences->Package Settings->Markdown Preview->Setting User將下面這句話粘貼進(jìn)去：

{
    "browser" : "/Applications/Chrome.app"
    // "瀏覽markdown的瀏覽器的路徑"
}

打開Preferences->Key Binding User，添加下面一句話：

{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },

keys的值是以上面瀏覽器預(yù)覽markdown文件。

第三步：使用

新建一個index.md，編寫markdown格式的內(nèi)容寫完以后按F6(我自己設(shè)置的時F6)就會看到Chrome中顯示的時解析后的樣子。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容