Sublime Text 插件介紹合集

轉(zhuǎn)戰(zhàn)vscode 20170829


Sublime Text ?插件介紹合集

1 Emmet

功能：編碼快捷鍵，前端必備

簡介：Emmet作為zen coding的升級版，對于前端來說，可是必備插件，如果你對它還不太熟悉，可以在其官網(wǎng)上看下具體的演示視頻。

使用教程：http://docs.emmet.io/cheat-sheet/

http://www.w3cplus.com/tools/emmet-cheat-sheet.html

2 html-css-jsprettify

功能：對Html，css，js文件進(jìn)行格式化

簡介：代替了JsFormat和CSSFormat

使用：快捷鍵Windows: ctrl+shift+i

快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數(shù)組內(nèi)）

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

3 CSSComb

功能：用來給CSS屬性進(jìn)行排序的格式化（處女座必備）

簡介：按一定的順序排列

使用：選中要排序的CSS代碼，右鍵菜單選擇Run CSScomb。

使用：到https://github.com/csscomb/sublime-csscomb下載插件包，放到sublime text文件夾的\Data\Packages\User目錄里

快捷鍵：ctrl+shift+c

4 ColorHighlighter

功能：方便調(diào)色

簡介：它可以展示你所選擇的顏色代碼（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正顏色。同時(shí)它還包含一個(gè)顏色選擇器讓你可以方便地更改顏色。

使用：快捷鍵Windows: ctrl+shift+w

快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數(shù)組內(nèi)）

{ "keys": ["ctrl+shift+w"],"command": "color_picker","context": [{"key": "color_highlighter.color_picker"}]},

5 Trailing spaces

功能：檢測并一鍵去除代碼中多余的空格

簡介：還在糾結(jié)代碼中有多余的空格而顯得代碼不規(guī)范？或是有處女座情節(jié)？次插件幫你實(shí)現(xiàn)發(fā)現(xiàn)多余空格、一鍵刪除空格、保存時(shí)自動(dòng)刪除多余空格，讓你的代碼規(guī)范清爽起來

使用：安裝插件并重啟，即可自動(dòng)提示多余空格。一鍵刪除多余空格：CTRL+SHITF+T（需配置），更多配置請點(diǎn)擊標(biāo)題。

快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數(shù)組內(nèi)）{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },

6 auto-save

功能：自動(dòng)保存文件

簡介：為保存提供了方便

使用：默認(rèn)是不會(huì)自動(dòng)保存，按快捷鍵Ctrl+Shift+S開啟。

快捷鍵配置方法：首選項(xiàng)-快捷鍵設(shè)置，在數(shù)組內(nèi)添加{ "keys": ["ctrl+shift+s"], "command": "auto_save" },如需自動(dòng)啟用，首選項(xiàng)-插件-auto-save---settings-usre粘帖一下配置

{

"auto_save_on_modified": true,

"auto_save_delay_in_seconds": 10,

"auto_save_all_files": true,

"auto_save_current_file": "",

"auto_save_backup": false,

"auto_save_backup_suffix": "autosave"

}

7 view in browser

功能：通過默認(rèn)瀏覽器打開文件

簡介：方便打開瀏覽器檢查編譯效果

使用：快捷鍵配置方法：首選項(xiàng)-快捷鍵設(shè)置，在數(shù)組內(nèi)添加快捷鍵：F12{ "keys": ["f12"], "command": "open_in_browser" },

8 AutoPrefixer

功能：CSS添加私有前綴

簡介：CSS還未標(biāo)準(zhǔn)化，所以要給各大瀏覽器一個(gè)前綴以解決兼容問題

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

使用：在輸入CSS3屬性后（冒號前）按Tab鍵

配置：Preferences>package setting>AutoPrefixer>Setting-User

{

"browsers": ["last 7 versions"],

"cascade": true,

"remove": true

}

或者

{

"browsers": ["last 2 versions","last 2 Chrome versions",">5%","Firefox >= 20","ie 6-8","iOS 7"]

}

快捷鍵綁定：Preferences>Key Bindings-User：

[

{ "keys": ["ctrl+alt+shift+p"], "command": "autoprefixer" }

]

9 CSS Extended Completions：

功能：關(guān)聯(lián)CSS文件，智能提示css文件中的類名，非常好用

10 JavaScript Completions

功能：支持javascript原生語法提示，媽媽再也不用擔(dān)心我輸入document.getElementById(id)

11 jQuery

功能：jQ函數(shù)提示

簡介：快捷輸入jQ函數(shù)，是偷懶的好方法

12 AutoFileName

功能：快捷輸入文件名

簡介：自動(dòng)完成文件名的輸入，如圖片選取

使用：輸入”/”即可看到相對于本項(xiàng)目文件夾的其他文件

13 SublimeLinter

? 功能：代碼檢查

簡介：支持JavaScript、CSS、HTML、Java、PHP、Python、Ruby等十多種開發(fā)語言

使用：需要配置相應(yīng)語言的環(huán)境，要檢查JavaScript代碼需要安裝node.js，檢查PHP代碼需要安裝PHP并配置環(huán)境等。

14 SideBarEnhancements

功能：擴(kuò)充邊欄菜單的功能

簡介：包括在當(dāng)前工程文件夾中新建文件，移動(dòng)文件或文件夾，產(chǎn)生文件或文件夾的副本，在新窗口或?yàn)g覽器中打開，刷新等。

15 Bracket Highlighter

功能：代碼匹配

簡介：可匹配[], (), {}, “”, ”, ，高亮標(biāo)記，便于查看起始和結(jié)束標(biāo)記

16 Monokai Extended

功能：主題

簡介：如果你喜歡Soda Dark和Monokai，我建議你使用Monokai Extended

使用：首選項(xiàng)->配色方案-> User -> Monokai Extended

17 Align Arguments

代碼對齊

18 Alignment

代碼對齊

19 All Autocomeplete

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

20 ColorPicker

全屏取色器

通常，如果你想使用一個(gè)顏色選擇器則可能打開Photoshop或GIMP。而在Sublime Text中，你可以使用內(nèi)置的顏色選擇器。安裝完成后，只要按下Ctrl / Cmd + Shift + C快捷鍵。

21 Git

在工作中，版本控制軟件最常用的軟件之一，而最流行的VCS是Git。你是否厭倦了保存文本文件，并切換回終端運(yùn)行一些Git命令。如果你能從文本編輯器本身執(zhí)行Git命令，豈不是很好？

快捷鍵Ctrl+Shift+P，輸入Git命令，在下拉框中選擇即可。

特別的，輸入git diff，還可以比較文件差異。

22 GitGutter

Sublime Text有了Git插件之后，GitGutter更好的幫助開發(fā)者查看文件之前的改動(dòng)和差異，提升開發(fā)效率.

23 SublimeREPL

這可能是對程序員最有用的插件。SublimeREPL允許你在Sublime Texxt中運(yùn)行各種語言（NodeJS，Python，Ruby，Scala和Haskell等等）。

23 DocBlockr

如果你遵循的編碼的風(fēng)格很嚴(yán)格，這款插件能夠使你的任務(wù)更容易。DocBlokr幫助你創(chuàng)造你的代碼注釋，通過解析功能，參數(shù)，變量，并且自動(dòng)添加基本項(xiàng)目。

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

24 OmniMarkupPreviwer

實(shí)時(shí)在瀏覽器中預(yù)，而MarkdownPreview是需要手動(dòng)生成的和F5的。覽如果雙屏的話，應(yīng)該具有不錯(cuò)的體驗(yàn)。快捷鍵如下：

Ctrl+Alt+O: Preview Markup in Browser.

Ctrl+Alt+X: Export Markup as HTML.

Ctrl+Alt+C: Copy Markup as HTML.

25 SublimeCodeIntel

一個(gè)全功能的Sublime Text代碼自動(dòng)完成引擎，本人做過對比，但是如果和webstorm的自動(dòng)尋找還是稍遜一籌，不過對于大部分人來說夠用了，能很方便跳到你想要的方法

支持的語言挺多的（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.）

點(diǎn)擊Preferences->Browse Packages->SublimeCodeIntel

添加一個(gè).codeintel文件夾（Windows創(chuàng)建.codeintel文件夾需要輸入.codeintel.）

在文件夾里面添加一個(gè)config文件:

{

"PHP": {

"php": '/usr/bin/php',

"phpExtraPaths": [],

"phpConfigFile": 'php.ini'

},

"JavaScript": {

"javascriptExtraPaths": []

},

"Perl": {

"perl": "/usr/bin/perl",

"perlExtraPaths": []

},

"Ruby": {

"ruby": "/usr/bin/ruby",

"rubyExtraPaths": []

},

"Python": {

"python": '/usr/bin/python',

"pythonExtraPaths": []

},

"Python3": {

"python": '/usr/bin/python3',

"pythonExtraPaths": []

}

}

26 CSS Comments

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

27 HTML-CSS-JS Prettify

全能序列化

29 JavaScript Completions

js最基本的api快查片段

30 JsFormat

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

31 Keymaps

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

32 LiveStyle

LiveStyle是Chrome中提高開發(fā)效率的一款CSS編輯器插件。利用LiveStyle和Sublime Text3編輯器結(jié)合可實(shí)現(xiàn)可視化開發(fā)，一次配置，簡單易用！

你本地css文件可以和瀏覽器的css文件映射，同步到本地，但是必須在chrome上運(yùn)行，chrome必須安裝相應(yīng)的插件

33 SideBarEnhancements

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

34 SublimeLinter

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

35 SublimeLinter-jshint

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

36 SublimeTmpl

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

37 Tag

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

38 Sublime APICloud

讓HTML5前端開發(fā)者使用Sublime快速開發(fā)原生蘋果與安卓APP。Sublime APICloud Plugins是為HTML5前端開發(fā)者提供的一套開源的Sublime Text擴(kuò)展插件，包括：應(yīng)用管理、應(yīng)用框架、頁面模板、代碼提示、代碼管理、Widget打包、真機(jī)同步、日志輸出、管理自定義AppLoader等功能，其他的功能插件也在不斷增加，這些插件已被Package Control成功收錄，開發(fā)者可以直接在Sublime Text3中下載安裝；所有插件都已開源，開發(fā)者也可以在此基礎(chǔ)上按需求擴(kuò)展自己的插件。

39 Bootstrap 3 Aotocomplete

Bootstrap 3代碼片段

配置：Preferences->Settings-User:

"auto_complete_triggers": [{"selector": "text.html", "characters": "<"},{"selector": "text.html", "characters": "bs3"}]

使用：代碼片段觸發(fā)字符為bs3

40 Browser Refresh

保存文件自動(dòng)刷新瀏覽器。

配置：Preferences > Package Settings > Browser Refresh > Key Bindings – Users

{

"keys": ["ctrl+s"], "command": "browser_refresh", "args": {

"auto_save": true,

"delay": 0.0,

"activate": true,

"browsers" : ["chrome"]

}

}

41 SVN

快捷鍵Ctrl+Shift+P，輸入Git命令，在下拉框中選擇即可

或者在相應(yīng)文件上右鍵，選擇SVN命令

或者在側(cè)邊欄的文件、文件夾上右鍵，選擇SVN命令

42 IconFont

字體圖標(biāo)補(bǔ)全。

為許多流行的圖標(biāo)字體提供了snippet（代碼片段）,比如FontAwesome, PaymentFont,Typicons和Github Octicons。

它的工作原理類似于常規(guī)的HTML代碼段,每個(gè)圖標(biāo)的縮寫將擴(kuò)展成完整的class和HTML代碼。

43 MarkDown Editing

Markdonw最好的插件了：語法高亮，縮略詞，自動(dòng)補(bǔ)全，配色方案。

44 MarkDown Preview

以用瀏覽器瀏覽Sublime Text中編寫的markdown文件。

配置瀏覽器路徑：* Preferences->Package Settings->Markdown Preview->Setting User*

{

"browser" : "C:\\Users\\gymmer\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe"

}

設(shè)置快捷鍵：Preferences->Key Binding User

{

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

}

使用：在Markdown文件頁面按下快捷鍵

45 Inc Dec Value

調(diào)整數(shù)字、日期、十六進(jìn)制顏色。

將光標(biāo)放在數(shù)字的右邊,然后按Alt +↑增加或Alt +↓減少。也可以使用鼠標(biāo)滾輪。

允許你同時(shí)增加或減少數(shù)字,即使他們在不同的行。

46 Less2css

自動(dòng)編譯less文件為CSS文件

需依賴Node.js環(huán)境

npm install -g less

npm install -g less-plugin-clean-css

npm install -g less-plugin-autoprefix

配置：可參考https://github.com/timdouglas/sublime-less2css

47 jQuery

jQuery的API代碼片段。

48 JavaScript Completions

JS最基本的API快查片段。

49 Nodejs

node代碼提示。

50 Minify

HTML、CSS、JS壓縮

需依賴Node.js環(huán)境

npm install -g clean-css uglifycss js-beautify html-minifier uglify-js minjson svgo

使用：在相應(yīng)文件上右鍵，選擇Minify。會(huì)自動(dòng)生成一個(gè)同名的.min文件

51 ChineseLocalization

Sublime中文漢化包。

52 ConvertToUTF8

GBK編碼兼容。文件轉(zhuǎn)碼成utf-8.

可以編輯并保存目前編碼不被Sublime Text支持的文件。

使用：安裝插件后自動(dòng)轉(zhuǎn)換為utf-8格式。

IMESupport

輸入中文時(shí)，候選詞跟隨鼠標(biāo).

53 GBK Encoding Support

中文識別

Sublime Text可識別UTF-8格式的中文，不識別GBK和ANSI，因此打開很多含中文的文檔都會(huì)出現(xiàn)亂碼。

通過安裝插件GBK Support,來識別GBK和ANSI。

54 安裝主題Brogrammer

下載壓縮包，解壓縮

重命名為Theme - Brogrammer

打開Sublime包目錄：Preferences -> Browse Packages

將Theme - Brogrammer復(fù)制到包目錄下

配置：Preferences -> Settings - User

{

"theme": "Brogrammer.sublime-theme",

"color_scheme": "Packages/Theme - Brogrammer/brogrammer.tmTheme"

}

55 Sidebar Enhancements.

用瀏覽器快速打開頁面

需先安裝Sidebar Enhancements.

-設(shè)置快捷鍵：Preferences->Key Bindings - User

//chorme

{

"keys": ["f1"],

"command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\Users\\gymmer\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe",

"extensions": ".*"

}

},

//IE

{

"keys": ["f2"],

"command": "side_bar_files_open_with",

"args": {

"paths": [],

"application": "C:\\Program Files\\Internet Explorer\\iexplore.exe",

"extensions": ".*"

}

}

其中：

keys是按鍵。

application是瀏覽器應(yīng)用程序路徑，注意反斜杠的要轉(zhuǎn)義。

extensions是匹配所有的文件后綴格式。

直接按下快捷鍵即可

56 Can I Use

可以直接調(diào)整到caniuse看到當(dāng)前屬性的瀏覽器支持情況。快捷鍵

57 CSS Extended Completions：

關(guān)聯(lián)CSS文件，智能提示css文件中的類名，非常好用。

58 Emmet Css Snippets

是可以自動(dòng)提示CSS、LESS和SASS語法的sublime text插件。

它的特點(diǎn)有：

可以自動(dòng)提示CSS、LESS和SASS語法。

有兩個(gè)版本：has-Prefix或no-Prefix。

智能自動(dòng)完成。

可以提示偽元素。

可以提示擴(kuò)展屬性

語法參考http://peiwen.lu/Emmet-Css-Snippets-for-Sublime-Text-2/

59 DeleteBlankLines

功能：刪除多余空行

相關(guān)快捷鍵如下:

Ctrl+Alt+Backspace -->刪除所有空行

Ctrl+Alt+Shift+Backspace -->刪除多余空行

刪除所有空行:刪除所有空行

刪除多余空行:將兩個(gè)及兩個(gè)以上的連續(xù)空行替換成一個(gè)空行

注意:如果行中帶有tab或空格字符則不會(huì)被刪除,只刪除只含有\(zhòng)n或\r的空行

60 FileDiffs

這個(gè)插件允許你看到SublimeText中兩個(gè)不同文件的差異。你可以比較的對象可以是從剪貼板中復(fù)制的數(shù)據(jù)，或工程中的文件，當(dāng)前打開的文件等。

分別是：在目錄下找文件對比//在剪切板中對比//在前一個(gè)對比；

目前我只用到第二個(gè)，Cilpboard對比，方法：先把先前的代碼右鍵-復(fù)制，然后在需要對比的代碼右鍵-Clipboard（建議在sublime開雙窗口：ctrl+alt+2，因?yàn)楹孟窬庉嫷拇a不保存），色塊說明（自己探索，不保證正確）：紅色是原代碼有，而粘貼板代碼沒有的，綠色發(fā)過來，@@表示里面一大段都一樣。這個(gè)真心不好用，不知道其他網(wǎng)友有什么推薦

61 HTML-snippets

hTML代碼片段

62 HTML-CSS-JS Prettify

這是一款集成了格式化（美化）html、css、js三種文件類型的插件。插件依賴于nodejs，因此需要事先安裝nodejs，然后才可以正常運(yùn)行

插件安裝完成后，快捷鍵ctrl+shift+H完成當(dāng)前文件的美化操作。插件對html、css文件的美化不是非常滿意，但還可以，后面將說明如何修改css美化腳本，此為后話。

詳解http://frontenddev.org/article/sublime-does-text-three-plug-ins-html-and-css-js-prettify.html

63 idiomatic css comments snippets

有不同的注釋塊的幾個(gè)快捷方式。

64 Sublime-snippet 簡介

在Sublime中，可以通過Sublime-snippet來快速補(bǔ)全代碼。

65 JSdebugger

調(diào)試是一個(gè)用于記錄調(diào)試消息的小庫。因?yàn)樗皇且粋€(gè)包裹c(diǎn)onsole.log，在節(jié)點(diǎn)和瀏覽器的工作原理。它允許您在不改變源的情況下過濾日志輸出，并輸出時(shí)間差異，使您可以輕松地知道日志信息之間的時(shí)間間隔。







http://blog.jobbole.com/79929/

http://www.itdecent.cn/p/aa30cc25c91b

http://www.tuicool.com/articles/im2y6f

http://www.oschina.net/translate/20-powerful-sublimetext-plugins

http://caibaojian.com/grunt.html

GRUNT:任務(wù)運(yùn)行管理器

http://blog.csdn.net/sunny_girls/article/category/2920281

插件詳解

https://github.com/JacksonTian/fks

前端技能總匯

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

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

  • Sublime Text：一款具有代碼高亮、語法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插...
    xiaotao123閱讀 9,605評論 0贊 27
  • Sublime Text：一款具有代碼高亮、語法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插...
    追風(fēng)逸少丶閱讀 11,478評論 1贊 34
  • Sublime Text：一款具有代碼高亮、語法提示、自動(dòng)完成且反應(yīng)快速的編輯器軟件，不僅具有華麗的界面，還支持插...
    晚晴幽草閱讀 715,004評論 149贊 1,114
  • 下載地址:Sublime Text 原則上收費(fèi)的，但可以試用，試用期是免費(fèi)的，在試用期間會(huì)提示你購買. packa...
    萬物皆可搬閱讀 9,800評論 2贊 9
  • 1 林場出了血案，在這偏僻至極的山村里簡直是驚濤駭浪。 幾里外的鄰村村名都聞?dòng)嵹s到了事發(fā)現(xiàn)場?，F(xiàn)場已經(jīng)被封鎖，鎮(zhèn)里...
    六一說閱讀 628評論 4贊 2

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