sublime Text3 前端常用插件

xcc3641 發(fā)布于2019-08-02 16:02 / 3242人閱讀

摘要：前端常用插件文件切換提供了一個(gè)非常快速的方式來(lái)打開(kāi)新的文件。繼續(xù)，在包控制中安裝插件。使用快捷鍵功能檢測(cè)并一鍵去除代碼中多余的空格使用安裝插件并重啟，即可自動(dòng)提示多余空格。

sublime Text3 前端常用插件 - File Switching （文件切換）

--- Sublime Text提供了一個(gè)非常快速的方式來(lái)打開(kāi)新的文件。只要按下Ctrl+ P并開(kāi)始輸入你想要打開(kāi)的文件的名稱。一旦找到文件，只需按enter鍵，就可以開(kāi)始直接輸入到該文件了！

- Goto Symbols （跳轉(zhuǎn)標(biāo)記）

--- 當(dāng)你編輯一個(gè)大文件時(shí)，文件中有一堆方法，按`Ctrl + R將其全部列出來(lái)，使他們更容易找到。開(kāi)始嘗試的輸入你想要的，然后按Enter 就可以快速跳轉(zhuǎn)這個(gè)方法了。

- Package Control 包控制安裝

簡(jiǎn)單的控制臺(tái)安裝方法：

最簡(jiǎn)單的安裝方法是通過(guò) Sublime Text 控制臺(tái)。控制臺(tái)可以通過(guò) ctrl +` 快捷方式或 View > Show Console 菜單來(lái)開(kāi)啟/關(guān)閉。打開(kāi)后，將適用于你 Sublime Text 版本的 Python 代碼粘貼到控制臺(tái)中。

/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")

通過(guò)Package Control 包控制安裝插件
Package Control（包控制）是安裝下面列出的所有插件和主題的最佳方式。繼續(xù)，在包控制中安裝插件。通過(guò) Package Control（包控制）安裝插件和主題很簡(jiǎn)單：

使用方法：進(jìn)入命令面板（ctrl + shift+ p），然后鍵入 install。
然后鍵入 remove 刪除。

- localization

--- 漢化

- Emmet

Emmet絕對(duì)的節(jié)省時(shí)間。您可以輕松快速地編寫(xiě)HTML。

- BracketHighlighter

--- 該插件提供行數(shù)列高亮的各種配對(duì)的語(yǔ)法符號(hào)。（愚人碼頭注：就是將配對(duì)的括號(hào)等顯示在行數(shù)列上

- Colorpicker

--- 使用一個(gè)取色器改變顏色
使用方法: ctrl + shift + c

- DocBlockr

--- 一個(gè)真正簡(jiǎn)單的方式來(lái)輕松地創(chuàng)建許多語(yǔ)言包括JavaScript，PHP和CoffeeScript的文檔塊。只要在函數(shù)的上面輸入/**，按Tab就可以了。DocBlockr會(huì)觀察函數(shù)需要的變量名和類型，并創(chuàng)建文檔塊。

- SidebarEnhancements

--- 擴(kuò)展文件樹(shù)右鍵功能

- CSSComb

--- 用來(lái)給CSS屬性進(jìn)行排序的格式化

注：因?yàn)镃sscomb的快捷鍵是shift+ctrl+c，可能與其他快捷鍵沖突
你可以去Preferences-->插件設(shè)置-->CssComb-->key-Bindings-Defallut設(shè)置

- ColorHighlighter

--- 它可以展示你所選擇的顏色代碼（像“#FFFFFF”, “rgb(255,255,255)”, “white”）的真正顏色。同時(shí)它還包含一個(gè)顏色選擇器讓你可以方便地更改顏色。
--- 使用：快捷鍵Windows: ctrl+shift+w

- Trailing spaces

--- 功能：檢測(cè)并一鍵去除代碼中多余的空格
使用：安裝插件并重啟，即可自動(dòng)提示多余空格。一鍵刪除多余空格：CTRL+SHITF+T（需配置）
快捷鍵配置：在Preferences / Key Bindings – User加上代碼（數(shù)組內(nèi)）{ "keys": ["ctrl+shift+t"], "command": "delete_trailing_spaces" },

- auto-save

--- 功能：自動(dòng)保存文件
使用：默認(rèn)是不會(huì)自動(dòng)保存，按快捷鍵Ctrl+Shift+S開(kāi)啟。
快捷鍵配置方法：首選項(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"
}

- view in browser

--- 功能：通過(guò)默認(rèn)瀏覽器打開(kāi)文件
使用：快捷鍵配置方法：首選項(xiàng)-快捷鍵設(shè)置，在數(shù)組內(nèi)添加快捷鍵：{ "keys": ["f12"], "command": "open_in_browser" },

- autoprefixer

--- 功能：CSS添加私有前綴
簡(jiǎn)介：CSS還未標(biāo)準(zhǔn)化，所以要給各大瀏覽器一個(gè)前綴以解決兼容問(wèn)題
使用：快捷鍵配置方法：首選項(xiàng)-快捷鍵設(shè)置，在數(shù)組內(nèi)添加{ "keys": ["ctrl+shift+enter"], "command": "autoprefixer" },
快捷鍵：ctrl+shift+enter

- CSS Extended Completions

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

- JavaScript Completions

--- 功能：支持javascript原生語(yǔ)法提示

- jQuery

--- 功能：jQ函數(shù)提示
簡(jiǎn)介：快捷輸入jQ函數(shù)，是偷懶的好方法

- AutoFileName

--- 功能：快捷輸入文件名
簡(jiǎn)介：自動(dòng)完成文件名的輸入，如圖片選取
使用：輸入”/”即可看到相對(duì)于本項(xiàng)目文件夾的其他文件

- HTML-CSS-JS Prettify

--- 功能：快捷輸入文件名
簡(jiǎn)介: 編輯HTML, CSS, JS時(shí)，經(jīng)常會(huì)出現(xiàn)縮進(jìn)不對(duì)，代碼行不對(duì)其的情況。裝了這個(gè)插件之后，只要按下 Ctrl+Shift+h (Windows), Command+Shift+h (Mac), 你的文檔就會(huì)被整理干凈。
注: 需要配置node文件路徑 HTML-CSS-JS Prettify > plugin Options