Sublime text 常用插件

記錄一些自己在使用sublime時(shí)常用的一些插件 cssrem 、SublimeServer 、 FileHeader 、OmniMarkupPreviewer 、sublime-jsdocs 、AutoFileName、SublimeText-Nodejs 、Sublime-Better-Completion 、SublimeAllAutocomplete 、JsFormat 、jQuery

安裝插件

需要先Package install安裝

按Ctrl+`調(diào)出console 復(fù)制代碼運(yùn)行

importurllib.request,os;pf='Package Control.sublime-package';ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler()));open(os.path.join(ipp,pf),'wb').write(urllib.request.urlopen('http://sublime.wbond.net/'+pf.replace(' ','%20')).read())

cssrem

一個(gè)CSS的px值轉(zhuǎn)rem值的Sublime Text 3自動(dòng)完成插件。下載地址 https://github.com/flashlizi/cssrem

插件效果如下：

效果演示圖

安裝

• 下載本項(xiàng)目，比如：git clone https://github.com/flashlizi/cssrem

• 進(jìn)入packages目錄：Sublime Text -> Preferences -> Browse Packages...

• 復(fù)制下載的cssrem目錄到剛才的packges目錄里。

• 重啟Sublime Text。

配置參數(shù)

參數(shù)配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem

• px_to_rem - px轉(zhuǎn)rem的單位比例，默認(rèn)為40。

• max_rem_fraction_length - px轉(zhuǎn)rem的小數(shù)部分的最大長(zhǎng)度。默認(rèn)為6。

• available_file_types - 啟用此插件的文件類(lèi)型。默認(rèn)為：[".css", ".less", ".sass"]。

SublimeServer

靜態(tài)WEB服務(wù)器：SublimeServer GitHub地址

FileHeader

快速新建文件、并生產(chǎn)頭部注釋 GitHub地址
打開(kāi)Preferences –Package Settings-File Header-settings user，輸入

{
    "Default": {
       "author":"ecitlm",
       "last_modified_by":"ecitlm",
    }
}

效果演示圖

OmniMarkupPreviewer

為 Sublime Text 的一款強(qiáng)大插件，支持將標(biāo)記語(yǔ)言(Markdown僅是其中一種)渲染為 HTML 并在瀏覽器上實(shí)時(shí)預(yù)覽，同時(shí)支持導(dǎo)出 HTML 源碼文件 GitHub地址

sublime-jsdocs

這個(gè)插件可以很好的生成js ,php 等語(yǔ)言函數(shù)注釋,只需要在函數(shù)上面輸入/** ,然后按tab 就會(huì)自動(dòng)生成注釋 GitHub地址

AutoFileName

自動(dòng)提示路徑插件 GitHub地址

SublimeText-Nodejs

基于sublime text3的node.js開(kāi)發(fā)環(huán)境搭建 GitHub地址

Sublime-Better-Completion

支持Javascript、JQuery、Twitter Bootstrap框架、HTML5標(biāo)簽屬性提示的插件 GitHub地址

AllAutocomplete

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

效果演示圖

JsFormat

js格式化插件 GitHub地址

使用方法：

1、快捷鍵：ctrl+alt+f

2、先用快捷鍵打開(kāi)命令面板 “ctrl + shift + p”, 再輸入 “Format: Javascript” 就可以使用格式化命令

jQuery

jQuery 提示插件

ConvertToUTF8

sublime text本身是不支持中文編碼的，所以需要通過(guò)安裝插件來(lái)解決，ConvertToUTF8插件可以實(shí)現(xiàn)。

SublimeTmpl

能夠很好的新建文件時(shí)使用模版的內(nèi)容了, 目前添加了html/js/css/php/python/ruby的模版.

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

BracketHighlighter

BracketHighlighter 插件能為Sublime Text提供括號(hào)，引號(hào)這類(lèi)高亮功能 GitHub地址

1. 在Sublime Text中用package control安裝 BracketHighlighter ；

2. 安裝完成后，打開(kāi)Preferences -> package settings -> Bracket Highlighter -> Bracket Settings – User，然后添加如下代碼：

{
    "bracket_styles": {
        "default": {
            "icon": "dot",
            // "color": "entity.name.class",
            "color": "brackethighlighter.default",
            "style": "highlight"
        },
        "unmatched": {
            "icon": "question",
            "color": "brackethighlighter.unmatched",
            "style": "highlight"
        },
        "curly": {
            "icon": "curly_bracket",
            "color": "brackethighlighter.curly",
            "style": "highlight"
        },
        "round": {
            "icon": "round_bracket",
            "color": "brackethighlighter.round",
            "style": "highlight"
        },
        "square": {
            "icon": "square_bracket",
            "color": "brackethighlighter.square",
            "style": "highlight"
        },
        "angle": {
            "icon": "angle_bracket",
            "color": "brackethighlighter.angle",
            "style": "highlight"
        },
        "tag": {
            "icon": "tag",
            "color": "brackethighlighter.tag",
            "style": "highlight"
        },
        "single_quote": {
            "icon": "single_quote",
            "color": "brackethighlighter.quote",
            "style": "highlight"
        },
        "double_quote": {
            "icon": "double_quote",
            "color": "brackethighlighter.quote",
            "style": "highlight"
        },
        "regex": {
            "icon": "regex",
            "color": "brackethighlighter.quote",
            "style": "outline"
        }
    }
}

Alignment （代碼對(duì)齊）

單和易于使用的插件,使你的代碼組織和美觀。當(dāng)您重溫代碼時(shí)候非常有用。
使用方法：選中要調(diào)整的行，然后按 Ctrl+ Alt + A 一些對(duì)應(yīng)的設(shè)置可以參看配置

SideBar Enhancements

這個(gè)插件改進(jìn)了側(cè)邊欄，增加了許多功能

SublimeLinter

使用SublimeLinter配置JS,CSS,HTML語(yǔ)法檢查 可參看 配置

CSScomb

幫助排序CSS屬性,自定義排序規(guī)則 GitHub

Vue.js 文件代碼高亮支持

讓sublime text3支持Vue語(yǔ)法高亮顯示

主題插件

sublime 支持PHP語(yǔ)法提示

https://github.com/benmatselby/sublime-phpcs

自己比較喜歡的主題

Theme - itg.flat
https://github.com/itsthatguy/theme-itg-flat

https://github.com/voronianski/oceanic-next-color-scheme

https://github.com/babel/babel-sublime

查看20款sublime 主題

PackageControl官網(wǎng)地址：