Sublime_text編輯器插件安裝

阿新 • • 發佈：2019-02-26

error jsdoc 代碼新建 python 文件 adg alignment nco 快捷

Sublime_text 3下載與安裝詳細教程

參考：

https://blog.csdn.net/weixin_40682842/article/details/78727266

http://www.cnblogs.com/wind128/p/4409422.html

1、下載安裝

http://www.sublimetext.com/3

進入官網找到對應版本下載，其中 portable version 版本下載解壓後可以直接打開不需要安裝

2、Sublime_Text配置

雙擊桌面“Sublime Text 3”快捷圖標，打開程序，就可以見到“Sublime Tex的廬山真面目了。

技術分享圖片

打開側邊欄：View -> Side Bar -> Show Side Bar (Ctrl+B,Ctrl+K)

打開上邊欄：快捷鍵Ctrl + Shift + P進入管理器，輸入View，選擇Toogle Tabs

字體設置：preferences -> Font

顏色設置：preferences -> Color scheme

主題設置：preferences -> Theme

3、插件安裝

學習Sublime Text擴展插件的安裝前，讓我們來先了解一下它的插件官方網站：https://packagecontrol.io/。

技術分享圖片

當我們在搜索框中輸入插件的關鍵字，相關的插件就會在下面實時顯示出來，我們就可以選擇自己想要的插件進行了解。

技術分享圖片

3-1、安裝Package Control

Package Control為插件管理包，所以我們首先要安裝它。有了它，我們就可以很方便的瀏覽、安裝和卸載Sublime Text中的插件。

打開Package Control的網頁https://packagecontrol.io/，點擊右側的“Install Now”按鈕。

技術分享圖片

進入https://packagecontrol.io/installation#st3頁面，選擇“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)

註意：如果顯示聯網失敗打不開https://packagecontrol.io/ 網站，可以使用手機開熱點

雙擊桌面“Sublime Text 3”打開程序，快捷鍵 Ctrl + ~ 打開Sublime Text控制臺，將之前復制的代碼粘貼到控制臺裏，按下“Eenter”鍵。

等待其安裝完成後關閉程序，重新啟動“Sublime Text 3”，點開菜單“Preferences”可見“Package Control”項，說明插件管理包已安裝成功。

技術分享圖片

3-2 安裝其他插件方法：

3-2-1 ConvertToUTF8 插件安裝

a)功能說明：ConvertToUTF8 能將除UTF8編碼之外的其他編碼文件在 Sublime Text 中轉換成UTF8編碼，在打開文件的時候一開始會顯示亂碼，然後一剎那就自動顯示出正常的字體，當然，在保存文件之後原文件的編碼格式不會改變。

b)安裝方法一：快捷鍵 Ctrl+Shift+p ，打開 “Command Palette” 懸浮對話框，在頂部輸入 “install”, 然後下選點擊 “Package Control:Install Package”。

技術分享圖片

在出現的懸浮對話框中輸入 “convert”, 然後點選下面的 “ConvertToUTF8” 插件，就會自動開始安裝，請耐心等待。

技術分享圖片

當插件安裝成功後，Sublime Text 3 編輯器底端的狀態欄會有安裝成功的提示。

技術分享圖片

插件安裝方法二：

你還可以下載完整的插件包後解壓，放入 C:\Users\userName\AppData\Roaming\Sublime Text 3\Packages 目錄下，以達到安裝插件的目的。

如何找到 Packages 目錄？一個快捷的方法是：雙擊打開你的 “Sublime Text 3”，點菜單 “Preferences--->Browse Packages...”。

技術分享圖片

它會直接打開插件包存放的目錄 “Packages”。然後你就可以把下載後解壓好的插件包復制到這個 Packages 目錄下。

當然，如果你熟悉 git，你還可以用 git 從插件的 GitHub 庫直接克隆插件包到 Packages 目錄下。

技術分享圖片

3-2-2 BracketHighlighter 插件

功能說明：高亮顯示匹配的括號、引號和標簽。

技術分享圖片

安裝方法：

1、Ctrl+Shift+P面板，安裝插件BracketHighlighter

2、按preferences–>package settings–>Bracket highlighter–>把Bracket settings-Default內容復制到Bracket settings-User後，Ctrl+F 查詢到“bracket_styles”，把{}中屏蔽的//都去掉，在這裏解釋一下，color表示的設置選中部分的顏色，把該值改為以brackethighlighter開頭，style則全部改成hightlight，註意，"icon":“”後面的逗號一定加上！

技術分享圖片

3-2-3 LESS 插件

功能說明：LESS語法高亮顯示。

安裝方法：Ctrl+Shift+P面板，安裝插件

技術分享圖片

3-2-4 sublime-less2css 插件

功能說明：將less文件編譯成css文件。

安裝方法：Ctrl+Shift+P面板，安裝插件BracketHighlighter

插件地址：https://github.com/facelessuser/BracketHighlighter/tree/BH2ST3

輔助工具：安裝後從 https://github.com/duncansmart/less.js-windows 下載 less.js-windows，然後配置 less.js-windows 的環境變量。

3-2-5 Emmet 插件

功能說明：Emmet的前身是大名鼎鼎的Zen codin。前端開發必備，HTML、CSS代碼快速編寫神器。

安裝方法：Ctrl+Shift+P面板，安裝插件

使用方法：默認快捷鍵 Tab/Ctrl+E

插件地址：https://github.com/sergeche/emmet-sublime

輔助工具：PyV8 下載地址： https://github.com/emmetio/pyv8-binaries

註意：Emmet 插件需要 PyV8 插件的支持，所以在安裝 Emmet 時，會自動安裝 PyV8 插件，如果安裝後 Emmet 不能正常保用，很有可能是因為 PyV8 沒有安裝完全，Sublime Text 2 和 3 容易出現這個問題。你可以刪除它，然後手動下載，采用方法二安裝 PyV8 插件。

技術分享圖片

使用方法示例：書寫代碼 ul#nav>li.item$*8>a{Item $}

技術分享圖片

然後把光標定在這行代碼的最後面，按 Tab 鍵，就會自動生成：

</ul>

技術分享圖片

更多更詳細的使用方法，請查閱 Emmet 官網：http://docs.emmet.io/

3-2-6 JsFormat 插件

功能說明：JavaScript代碼格式化。

使用方法：在打開的JavaScript文件裏點右鍵，選擇JsFormat。

插件地址：https://github.com/jdc0589/jsformat

技術分享圖片

3-2-7 ColorHighlighter 插件

功能說明：顯示所選顏色值的顏色，並集成了ColorPicker

插件地址：https://github.com/Monnoroch/ColorHighlighter

技術分享圖片

在16進制的顏色值上點右鍵，選擇“Choose color”,會彈性顏色拾色器，在需要的色塊上單擊。

技術分享圖片

看看效果，顏色值和顯示顏色都相應做了改變。

技術分享圖片

3-2-8 Compact Expand CSS Command 插件

功能說明：使CSS屬性展開及收縮，格式化CSS代碼。

使用方法：按 Ctrl+Alt+[ 收縮CSS代碼為一行顯示，按 Ctrl+Alt+] 展開CSS代碼為多行顯示。

插件地址：https://gist.github.com/vitaLee/2863474 或者：https://github.com/TooBug/CompactExpandCss

快捷鍵 Ctrl+Alt+[ 收縮CSS代碼為效果：技術分享圖片

快捷鍵 Ctrl+Alt+] 展開CSS代碼為多行顯示效果：

技術分享圖片

3-2-9 SublimeTmpl 插件

功能說明：快速生成文件模板。

使用方法：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 文件

插件地址：https://github.com/kairyou/SublimeTmpl

下圖為按快捷鍵 Ctrl+Alt+h 新建的一個 html 文件。

技術分享圖片

相應的模板為tmpl格式的文件，它們保存在C:\Users\ usersName\AppData\Roaming\Sublime Text 3\Packages\SublimeTmpl\templates下。

技術分享圖片

當然你可以根據自己的喜好來更改模板格式。例如把“html.tmpl”改為早期的html標準格式後保存。

技術分享圖片

現在按快捷鍵 Ctrl+Alt+H，新建一個 html 文件，其格式就和更改後模板格式完全一樣了。如下圖：

技術分享圖片

新增語言：你還可以增加模板文件夾中沒有的文件模板，並做相應的設置來使用這一功能。具體可以參考它的中文文檔：http://www.fantxi.com/blog/archives/sublime-template-engine-sublimetmpl/

3-2-10 Alignment 插件

功能說明：使代碼格式的自動對齊。

安裝方法：Ctrl+Shift+P面板，安裝插件

使用方法：快捷鍵Ctrl+Alt+A，可能與QQ截圖沖突，二者中的一個要重置快捷鍵。

插件地址：https://github.com/kevinsperrine/sublime_alignment

技術分享圖片

3-2-11 AutoFileName 插件

功能說明：自動補全文件(目錄)名。

插件地址：https://github.com/BoundInCode/AutoFileName

技術分享圖片

安裝好後就可以來測試如何使用AutoFileName，先以<link>css檔案來示範，當輸入href=””的同時，Sublime Text就會將現在編輯檔案的路徑為中心，判斷該路徑內的所有檔案。

a)以這個檔案為範本它會去抓取跟abc.html在同一層的檔案列表。

技術分享圖片

像我們這次要link的是在css資料夾內的auto.css，所以我們直接銜接打上css/，就會跑出css資料夾內的檔案，整個用法以此類推

技術分享圖片

b)像是<img src=””>的部分也是一樣的方式，沒什麽困難了，弄懂一下路徑就好了。

技術分享圖片

c)再來看看是css檔中要用url，也是用同樣方式，只不過因為要連到上一層的images資料夾內的arrow.png，所以就前面打..(上層)，依序去選擇路徑即可。

技術分享圖片

3-2-12 DocBlockr 插件

功能說明：快速生成JavaScript (including ES6), PHP, ActionScript, Haxe, CoffeeScript, TypeScript, Java, Groovy, Objective C, C, C++ and Rust語言函數註釋。

使用方法：在函數上面輸入/** ,然後按 Tab 就會自動生成註釋。

插件地址：https://github.com/spadgos/sublime-jsdocs

技術分享圖片

在函數上面輸入/** ,然後按Tab 就會自動生成註釋。

技術分享圖片

3-2-13 SublimeCodeIntel 插件

功能說明：智能提示。

插件地址：https://github.com/SublimeCodeIntel/SublimeCodeIntel

3-2-14 HTML-CSS-JS Prettify 插件

功能說明：HTML、CSS、JS格式化。

插件地址：https://github.com/victorporof/Sublime-HTMLPrettify

安裝方法：安裝這個套件前必須先安裝node.js,指定 node.exe 的執行檔所在位置。進而安裝HTML-CSS-JS Prettify。

使用方法一：View -> Show console 或者使用快捷鍵(Ctrl + `)，在命令列的地方輸入:view.run_command("htmlprettify")，然後按下Enter。

技術分享圖片

使用方法二：默認快捷鍵：Ctrl+Shift+H。

你也可以自行設置快捷鍵，菜單 “Preferences---> Key Bindings – User” 裏新增：

{ 
    "keys": ["ctrl+shift+o"], 
    "command": "htmlprettify" 
}

完成後保存，以上代碼設定執行此插件的快捷鍵是：Ctrl+Shfit+O，自己設定的話就要測試一下，不要跟其他快捷鍵沖突。

格式化前：

技術分享圖片

格式化後：

技術分享圖片

3-2-15 SideBarEnhancements 插件

功能說明：側欄菜單擴充功能。

插件地址：https://github.com/titoBouzout/SideBarEnhancements/tree/st3

技術分享圖片

3-2-16 View In Browser 插件

功能說明：Sublime Text保存後網頁自動同步更新。

插件地址：https://github.com/adampresley/sublime-view-in-browser

使用方法：在打開的文檔任一處點右鍵，選擇“View In Browser”，就會用默認的瀏覽器自動打開該文件。

技術分享圖片

如果你電腦裝有多個瀏覽器，你想換其它的作為此操作的默認瀏覽器，你可以按以下方法設置：

技術分享圖片

打開“View In Browser.sublime-settings”，寫入以下代碼：

{
    "browser": "chrome64"
}

技術分享圖片

這樣你就把它默認設置為“Chrome”瀏覽器了，當然你還可以改成“Firefox”、“Safari”等等，前提是你的電腦事先已安裝好了這些瀏覽器。

3-2-17 LiveReload 插件

功能說明：調試網頁實時自動更新。

使用說明：快捷鍵 Ctr+Alt+V

插件地址：https://github.com/dz0ny/LiveReload-sublimetext2

技術分享圖片

同時Chrome瀏覽器也要安裝LiveReload 的擴展插件。

技術分享圖片

3-2-18 TortoiseSVN 插件(win下需要安裝有TortoiseSVN客戶端支持)

功能說明：版本控制工具。

插件地址：https://github.com/dexbol/sublime-TortoiseSVN

3-2-19 Theme-Soda 插件

功能說明：最受歡迎的 Sublime Text 主題之一。

插件地址：https://github.com/buymeasoda/soda-theme

安裝完成後，點菜單 Preferences--->Settings - User，根據需要的主題效果，添加如下代碼。

Soda 亮色主題請添加：

{
    "soda_classic_tabs": true,
    "theme": "Soda Light 3.sublime-theme",
}

技術分享圖片

Soda 暗色主題請添加：

{
    "soda_classic_tabs": true,
    "theme": "Soda Dark 3.sublime-theme",
}

技術分享圖片

要達到圖中的效果，你還需要下載與之搭配的 color scheme。下載地址：http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip，如果你喜歡 Soda Dark 和 Monokai，我建議你使用 Monokai Extended。這個 color scheme 是 Monokai Soda 的增強，再配合 Markdown Extended ，將大大改善 Markdown 的語法高亮。

技術分享圖片

如果加代碼 "soda_classic_tabs":true，文件標簽頁形狀會如下顯示：

技術分享圖片

如果不添加此行代碼，文件標簽頁形狀會如下顯示：

技術分享圖片

3-2-20 Theme-Flatland 插件

功能說明：最受歡迎的 Sublime Text 主題之一。

插件地址：https://github.com/thinkpixellab/flatland

技術分享圖片

3-2-21 Theme-Nexus 插件

功能說明：最受歡迎的 Sublime Text 主題之一。

插件地址：https://github.com/EleazarCrusader/nexus-theme

技術分享圖片

4、插件列表

快捷鍵 Ctrl+Shift+P，在對話框中輸入“list”，選擇“Package Control:List Packages”。

技術分享圖片

會列出所有已安裝的插件。這樣可以很方便地了解自己已經安裝了哪些插件。

技術分享圖片

5、移除插件

有時候我們需要移除自己不想要的插件，具體操作如下：快捷鍵 Ctrl+Shift+P，在對話框中輸入“remove”，選擇“Package Control: Remove Packages”。

技術分享圖片

然後在出現的插件列表中點選你要移除的插件。

技術分享圖片

6、Sublime Text 的窗口操作

1、分屏

Sublime Text有多種分屏形式，讓我來具體地看一看。菜單 “View-àLayout”就可以選擇你的分屏樣式。

技術分享圖片

對應的快捷鍵與分屏情況如下：

Alt+Shift+1 Single 獨屏

Alt+Shift+2 Columns:2 縱向二欄分屏

Alt+Shift+3 Columns:3 縱向三欄分屏

Alt+Shift+4 Columns:4 縱向四欄分屏

Alt+Shift+8 Rows:2 橫向二欄分屏

Alt+Shift+9 Rows:3 橫向三欄分屏

Alt+Shift+5 Grid 四格式分屏

技術分享圖片

2、創建新窗

快捷鍵Ctrl+Shift+N 創建一個新窗口。

技術分享圖片

Sublime_text編輯器插件安裝

error jsdoc 代碼新建 python 文件 adg alignment nco 快捷 Sublime_text 3下載與安裝詳細教程參考： https://blog.csdn.net/weixin_40682842/article/details/7872

Sublime_text編輯器插件安裝

Sublime_text 3下載與安裝詳細教程

1、下載安裝

2、Sublime_Text配置

3、插件安裝

3-1、安裝Package Control

3-2 安裝其他插件方法：

3-2-1 ConvertToUTF8 插件安裝

插件安裝方法二：

3-2-2 BracketHighlighter 插件

3-2-3 LESS 插件

3-2-4 sublime-less2css 插件

3-2-5 Emmet 插件

3-2-6 JsFormat 插件

3-2-7 ColorHighlighter 插件

3-2-8 Compact Expand CSS Command 插件

3-2-9 SublimeTmpl 插件

3-2-10 Alignment 插件

3-2-11 AutoFileName 插件

3-2-12 DocBlockr 插件

3-2-13 SublimeCodeIntel 插件

3-2-14 HTML-CSS-JS Prettify 插件

3-2-15 SideBarEnhancements 插件

3-2-16 View In Browser 插件

3-2-17 LiveReload 插件

3-2-18 TortoiseSVN 插件(win下需要安裝有TortoiseSVN客戶端支持)

3-2-19 Theme-Soda 插件

3-2-20 Theme-Flatland 插件

3-2-21 Theme-Nexus 插件

4、插件列表

5、移除插件

6、Sublime Text 的窗口操作

1、分屏

2、創建新窗

相關推薦