自用Sublime Text 插件主題配置大全

下載地址:Sublime Text

原則上收費(fèi)的,但可以試用螟碎,試用期是免費(fèi)的,在試用期間會(huì)提示你購(gòu)買.

package control

首先必須要介紹的就是這個(gè),它是用來(lái)進(jìn)行插件管理的钞速,插件的安裝、查看嫡秕、刪除都可以用package control渴语,非常的方便,安裝package control也很方便昆咽,調(diào)出 sublime text 的控制臺(tái)驾凶,在View -> Show Console,快捷鍵是ctrl + `掷酗,

然后在控制臺(tái)復(fù)制進(jìn)以下代碼:

Sublime Text 3:

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; 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)

Sublime Text 2:

import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')

然后等待就行调违,等到 sublime 能用了,能看到Sublime Text -> Preference -> Package Control就表示安裝成功了泻轰,一般情況下是不用重啟 sublime 的技肩,但是如果沒(méi)有看到,就重啟一下 sublime 就可以了浮声。

通過(guò)快捷鍵ctrl+ shift + p調(diào)用命令行虚婿,因?yàn)橹С帜:樵儯暂斎雙c:ip阿蝶,pc:list雳锋,pc:rm分別進(jìn)行插件安裝,插件瀏覽羡洁,插件刪除

插件

Alignment

自動(dòng)安裝(所有插件同理)

這個(gè)插件是用來(lái)規(guī)格化代碼的玷过,常用的是將等號(hào)對(duì)齊,打開命令板ctrl+ shift + p筑煮,輸入pc:ip辛蚊,然后輸入插件的名字,回車即可安裝

手動(dòng)安裝(所有插件同理)

如果某些時(shí)候因?yàn)榫W(wǎng)絡(luò)原因而導(dǎo)致插件安裝失敗真仲,可以手動(dòng)安裝

找到插件的 Github 倉(cāng)庫(kù)袋马,下載zip

將下載的zip文件解壓后放進(jìn)剛打開的Browse Package里,重啟 sublime 即可安裝成功

Material Theme


自用主題秸应,并且目前這個(gè)插件更新了很多版虑凛,bug 已經(jīng)非常少了,推薦給大家使用软啼。這個(gè)主題要配合A File Icon圖標(biāo)插件配合使用桑谍,因?yàn)樗奈募D標(biāo)是那個(gè)插件提供的,依然是在Package Control下載圖標(biāo)插件即可祸挪。

主題具體的配置可以自己在標(biāo)題鏈接的 Github 倉(cāng)庫(kù)里去看锣披,如果懶的去看的,可以直接復(fù)制我的配置,打開Sublime Text -> Preference -> Settings雹仿,在User界面復(fù)制進(jìn)如下代碼:

{

"always_show_minimap_viewport": true,

"bold_folder_labels": true,

"color_scheme": "Packages/Material Theme/schemes/Material-Theme.tmTheme",

"fade_fold_buttons": false,

"font_options":

[

"gray_antialias"? ? ],

"font_size": 15,

"ignored_packages":

[

"Vintage"? ? ],

"indent_guide_options":

[

"draw_normal",

"draw_active"? ? ],

"line_padding_bottom": 3,

"line_padding_top": 3,

"material_theme_accent_scrollbars": true,

"material_theme_arrow_folders": false,

"material_theme_big_fileicons": true,

"material_theme_bold_tab": true,

"material_theme_bright_scrollbars": true,

"material_theme_bullet_tree_indicator": true,

"material_theme_compact_panel": true,

"material_theme_compact_sidebar": true,

"material_theme_contrast_mode": true,

"material_theme_disable_folder_animation": false,

"material_theme_disable_tree_indicator": true,

"material_theme_panel_separator": true,

"material_theme_small_statusbar": true,

"material_theme_small_tab": true,

"material_theme_tabs_autowidth": false,

"material_theme_tabs_separator": false,

"material_theme_tree_headings": true,

"overlay_scroll_bars": "enabled",

"show_encoding": true,

"show_line_endings": true,

"theme": "Material-Theme.sublime-theme" }


再推薦個(gè)主題

Brogrammer


配置方法:

{

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

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

}

AutoFileName

這個(gè)插件是在雙引號(hào)內(nèi)默認(rèn)自動(dòng)導(dǎo)入當(dāng)前同文件夾下的其他文件名增热,如果想導(dǎo)入其他文件夾下的文件名,支持絕對(duì)路徑和相對(duì)路徑胧辽。這個(gè)插件在寫 Js 代碼峻仇,需要導(dǎo)入圖片時(shí),或者是需要在一些配置文件里填寫文件的路徑時(shí)票顾,全程可以自動(dòng)補(bǔ)全础浮,非常好用。安裝即可用奠骄。

ConvertToUTF8

這個(gè)插件可以有效地解決中文亂碼問(wèn)題,因?yàn)?sublime 的默認(rèn)編碼方式 UTF-8番刊,所以有些 GBK 編碼或者其他的編碼會(huì)出現(xiàn)亂碼問(wèn)題含鳞,這個(gè)插件可以進(jìn)行編碼轉(zhuǎn)換

Compare side-by-side

這是個(gè)進(jìn)行文件比對(duì)的軟件,但只是簡(jiǎn)簡(jiǎn)單單的進(jìn)行文件比對(duì)芹务,如果只需要文件比對(duì)功能的童鞋們可以用這個(gè)插件蝉绷,如果想要進(jìn)行更多功能的文件比對(duì)功能,例如與剪貼板里的文件進(jìn)行比對(duì)枣抱,可以使用SublimeFileDiffs熔吗,這個(gè)插件的提示方式和git diff的格式一樣,所以喜歡使用git的童鞋可以嘗試佳晶,但是我個(gè)人使用的是 Compare side-by-side 桅狠,因?yàn)槲矣X(jué)得夠用了。

DocBlockr

這個(gè)是代碼自動(dòng)注釋插件轿秧,也是我非常喜歡的插件之一中跌,因?yàn)閭€(gè)人寫函數(shù)時(shí)有進(jìn)行該函數(shù)文檔說(shuō)明的習(xí)慣,而這個(gè)插件可以自動(dòng)將函數(shù)類型菇篡、參數(shù)個(gè)數(shù)及類型漩符、函數(shù)返回值等直接生成好,正如安裝成功后插件文檔中寫的All you need is to complete descriptions驱还。使用方法很簡(jiǎn)單嗜暴,只要在函數(shù)上方輸入文檔注釋/**,然后回車即可生成议蟆。

Emmet

這是一個(gè)經(jīng)過(guò)廣大技術(shù)開發(fā)者檢驗(yàn)的軟件闷沥,確實(shí)堪稱為前端開發(fā)神器,效率倍增咪鲜。只需要輸入很簡(jiǎn)短的縮寫狐赡,它就能擴(kuò)展開來(lái),默認(rèn)擴(kuò)展快捷鍵是Tab或者ctrl + E。例如一開始輸入!符號(hào)颖侄,然后 Tab鸟雏,就能擴(kuò)展成一個(gè) HTML 編碼所需要的全部頭部和尾部。

附一個(gè) emmet 的使用文檔

很多人在安裝成功后發(fā)現(xiàn)Tab并沒(méi)有實(shí)現(xiàn)擴(kuò)展览祖,那是因?yàn)樾枰惆?sublime 的語(yǔ)法格式手動(dòng)調(diào)整為html格式孝鹊,在 sublime 的右下角有調(diào)整。

GitGutter

這個(gè)插件看名字就能知道是干什么用的展蒂,也是我自己非常喜歡的一款插件又活。它能在 gutter 中顯示你這次編輯的文件相比目前 git 暫存區(qū)中的文件的異同,相當(dāng)于實(shí)時(shí)的git diff锰悼,并且顯示的也很友好柳骄,如圖

將鼠標(biāo)放在修改的提示符不動(dòng),會(huì)自動(dòng)顯示修改前是什么樣的箕般,很方便耐薯。

SublimeCodeIntel

一個(gè)全功能的 Sublime Text 代碼智能自動(dòng)補(bǔ)全引擎,支持很多語(yǔ)言的補(bǔ)全丝里。這個(gè)插件比較大曲初,所以通過(guò)Package Control進(jìn)行安裝的時(shí)候會(huì)比較慢,我 50M 的水管都安了十幾分鐘杯聚,而且嘗試了很多次臼婆,如果自動(dòng)安裝失敗可以嘗試手動(dòng)安裝。

并且這個(gè)插件是需要自己手動(dòng)配置的幌绍,我目前用 php 比較多颁褂,就說(shuō)一下我是會(huì)怎么配置的

如果不知道你的 php 的路徑,在終端中執(zhí)行whereis php纷捞,復(fù)制顯示結(jié)果

打開Sublime Text -> Preference -> Package Settings -> SublimeCodeIntel-> Settings-Default

然后在設(shè)置的最后codeintel_language_settings里的 php 的路徑修改為你剛復(fù)制的現(xiàn)實(shí)的結(jié)果

如圖

wordcount

這個(gè)軟件就不多介紹了痢虹,名字告訴了一切,插件很小主儡,自動(dòng)安裝很快奖唯,安裝即可用,右下角顯示糜值,無(wú)需配置丰捷,插件按照空格統(tǒng)計(jì)英語(yǔ)單詞,無(wú)法統(tǒng)計(jì)漢字字?jǐn)?shù)寂汇。

JsFormat

即可在 JS 文件中通過(guò)鼠標(biāo)右鍵 ->JsFormat?或鍵盤快捷鍵?Ctrl+Alt+F?對(duì) JS 進(jìn)行格式化

使用效果如下圖

SideBarEnhancements

SideBarEnhancements 是一款很實(shí)用的右鍵菜單增強(qiáng)插件,安裝此插件后配置方法為,重啟 Sublime text 3 后,打開任意一個(gè) JS 文件病往,按 ctrl+shift+space,這時(shí)候第一次運(yùn)行會(huì)去下載對(duì)應(yīng)的類庫(kù),可以按 ctrl+`(也就是調(diào)出控制臺(tái))來(lái)看進(jìn)度

TrailingSpaces

有時(shí)候,在代碼結(jié)尾打多了幾個(gè)空格或 Tab,并沒(méi)有任何顯示效果,TrailingSpaces 這款插件能高亮顯示多余的空格和 Tab

Tag

這是 HTML/XML 標(biāo)簽縮進(jìn)骄瓣、補(bǔ)全停巷、排版和校驗(yàn)工具

安裝該插件后,可以如上圖方式使用 Tag 插件對(duì) HTML/XML 進(jìn)行自動(dòng)排版等操作

Terminal

在編程過(guò)程中,我們經(jīng)常需要使用到命令行窗口,Terminal 插件可以允許在 Sublime Text 3 中打開 cmd 命令窗口,安裝好該插件后,即可使用快捷鍵?Ctrl+Shift+T?呼出命令行窗口

SublimeCodeIntel

這是一款代碼提示插件畔勤,支持多種編程語(yǔ)言,該插件安裝時(shí)間可能相對(duì)較長(zhǎng),更特別的是蕾各,安裝該插件后需要根據(jù)您使用的編程語(yǔ)言進(jìn)行配置,本部分將以配置 JavaScript 語(yǔ)言的代碼提示功能為例,安裝該插件后,點(diǎn)擊Preferences->Browse Packages...?菜單

進(jìn)入 SublimeCodeIntel 文件夾

再進(jìn)入.codeintel 文件夾

將其中文件名為 config 的文件拖動(dòng)到 Sublime Text 3 中,你會(huì)看到大概如下圖的代碼

將以下代碼復(fù)制后粘貼到 Config 文件中

//注意上下文需要添加的逗號(hào)

"JavaScript":{

"javascriptExtraPaths":[]

}

復(fù)制粘貼后的效果如下圖

保存后關(guān)閉 config 文件,在編寫 JavaScript 時(shí)即可獲得代碼提示庆揪,如下圖示

CssComb

CssComb 是為 CSS 屬性進(jìn)行排序和格式化插件 [官網(wǎng)],使用 Package Control 安裝 CssComb 插件后式曲,你可能發(fā)現(xiàn)它并不能運(yùn)行,它依賴于 Node.js [官網(wǎng)],若您的計(jì)算機(jī)已安裝過(guò) NodeJS 環(huán)境,可跳過(guò)此步驟,若您的計(jì)算機(jī)中尚未安裝過(guò) Node.js 環(huán)境,應(yīng)該到 Node.js 官網(wǎng)中 [下載] 并安裝相應(yīng)版本的 Node.js

安裝 NodeJS 后缸榛,即可使用 CssComb 插件

使用方法:菜單?Tools->Run CSScomb?或在 CSS 文件中按快捷鍵?Ctrl+Shift+C

使用前吝羞,CSS 可能雜亂無(wú)章

使用后,CSS 屬性按照作用類別出現(xiàn)

還可以選中一部分 CSS 代碼進(jìn)行排序

使用前内颗,選中需要排序的 CSS 代碼

使用后钧排,選中部分代碼已排好序

美中不足的是,CssComb 似乎不支持 IE hark

Autoprefixer

這是一款 CSS3 私有前綴自動(dòng)補(bǔ)全插件,該插件使用 CanIUse 資料庫(kù)均澳,能精準(zhǔn)判斷哪些屬性需要什么前綴,與 CssComb 插件一樣卖氨,該插件也需要系統(tǒng)已安裝 Node.js 環(huán)境

使用方法:在輸入 CSS3 屬性后(冒號(hào)前)按??Tab?鍵,如下圖示

LiveReload

自動(dòng)刷新瀏覽器,真神器啊!!無(wú)需保存后按F5,Ctrl+S保存后,自動(dòng)刷新瀏覽器!

開始之前我們需要準(zhǔn)備下面這兩個(gè)插件

1负懦、在 Sublime 安裝LiveReload插件。

2柏腻、在 Chrome 瀏覽器安裝LiveReload插件.(火狐的自己去插件中心搜索.)

安裝好以后可以在地址欄旁邊看到如下按鈕纸厉。

接著右鍵單擊選擇管理擴(kuò)展程序,把允許訪問(wèn)網(wǎng)址文件這一選項(xiàng)勾選上五嫂。

在 Sublime 中配置 LiveReload

在 Sublime 中配置 LiveReload

方法 1:過(guò)用戶自定義配置來(lái)開啟颗品。

Preferences > Package Settings > LiveReload > Settings User

{"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]}

方法 2:通過(guò)控制臺(tái)命令來(lái)開啟。

1. Ctrl+Shift+P

2. LiveReload: Enable/disableplugins

HTMLBeautify

一個(gè) HTML/Css/JavaScript 代碼格式化 / 美化插件沃缘,基于 NodeJS(nodejs.org) / JSBeautifier (jsbeautifier.org) 開發(fā)躯枢。

安裝

方式 1

下載并安裝 NodeJS(nodejs.org), windows 下需要重啟

打開 Sublime Text 2 的 Packages 目錄, "Preferences" -> "Browse Packages"

在 Packages 目錄本代碼倉(cāng)庫(kù)槐臀,Git Clone https://github.com/rehorn/sublime-htmlbeautify

打開一個(gè)經(jīng)過(guò)壓縮的 .html/.htm/.js/.css 文件锄蹂,用快捷鍵 ctrl+alt+q 執(zhí)行格式化

方式 2

下載并安裝 NodeJS(nodejs.org), windows 下需要重啟

安裝 Packages Control 后,將本代碼倉(cāng)庫(kù)添加到源

ctrl+alt+p 之后水慨,輸入 add repository得糜,輸入 https://github.com/rehorn/sublime-htmlbeautify

執(zhí)行 Packages Control 后,就能搜索到 sublime-uglifyjs 晰洒,安裝即可

打開一個(gè)經(jīng)過(guò)壓縮的 .html/.htm/.js/.css 文件朝抖,用快捷鍵 ctrl+alt+q 執(zhí)行格式化

使用

打開一個(gè)經(jīng)過(guò)壓縮的 .html/.htm/.js/.css 文件,用快捷鍵 ctrl+alt+q 執(zhí)行格式化

自定義

打開 Sublime Text 2 的 Packages 目錄谍珊, "Preferences" -> "Browse Packages"

進(jìn)入 sublime-htmlbeautify

修改 Default (Windows).sublime-keymap 文件治宣,可以 Windows 自定義快捷鍵,其他平臺(tái)可按照格式新建一個(gè)

其他

本插件系 https://github.com/victorporof/Sublime-HTMLPrettify 的一個(gè)分支版本,修復(fù)了 windows 下無(wú)法正常運(yùn)行和編碼等問(wèn)題侮邀。

AllAutocomplete

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

SublimeREPL

這可能是對(duì)程序員最有用的插件豌拙。SublimeREPL 允許你在 Sublime Texxt 中運(yùn)行各種語(yǔ)言(NodeJS 陕悬, Python,Ruby按傅, Scala 和 Haskell 等等)捉超。

ColorPicker

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


最后推薦兩個(gè)Web開發(fā)工具

Hbuilder

強(qiáng)大的HTML5 IDE 支持Win和OS X

Atom

Github出品,開源跨平臺(tái)OS X,Win或Linux上使用它,Sublime上的插件主題幾乎都有.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末绝骚,一起剝皮案震驚了整個(gè)濱河市耐版,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌压汪,老刑警劉巖粪牲,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異止剖,居然都是意外死亡腺阳,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門穿香,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)亭引,“玉大人,你說(shuō)我怎么就攤上這事皮获”候荆” “怎么了?”我有些...
    開封第一講書人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵魔市,是天一觀的道長(zhǎng)主届。 經(jīng)常有香客問(wèn)我,道長(zhǎng)待德,這世上最難降的妖魔是什么君丁? 我笑而不...
    開封第一講書人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮将宪,結(jié)果婚禮上绘闷,老公的妹妹穿的比我還像新娘橡庞。我一直安慰自己,他們只是感情好印蔗,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開白布扒最。 她就那樣靜靜地躺著,像睡著了一般华嘹。 火紅的嫁衣襯著肌膚如雪吧趣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,624評(píng)論 1 305
  • 那天耙厚,我揣著相機(jī)與錄音强挫,去河邊找鬼。 笑死薛躬,一個(gè)胖子當(dāng)著我的面吹牛俯渤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播型宝,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼八匠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了趴酣?” 一聲冷哼從身側(cè)響起梨树,我...
    開封第一講書人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎岖寞,沒(méi)想到半個(gè)月后劝萤,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡慎璧,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了跨释。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片胸私。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鳖谈,靈堂內(nèi)的尸體忽然破棺而出岁疼,到底是詐尸還是另有隱情,我是刑警寧澤缆娃,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布捷绒,位于F島的核電站,受9級(jí)特大地震影響贯要,放射性物質(zhì)發(fā)生泄漏暖侨。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一崇渗、第九天 我趴在偏房一處隱蔽的房頂上張望字逗。 院中可真熱鬧京郑,春花似錦、人聲如沸葫掉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)俭厚。三九已至户魏,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間挪挤,已是汗流浹背叼丑。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留电禀,地道東北人幢码。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像尖飞,于是被迫代替她去往敵國(guó)和親症副。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容