最全的Sublime text 經常使用插件整理

時間 2019-11-10

標籤 sublime text 經常使用插件整理欄目 HTML 简体版

原文原文鏈接

Sublime text 經常使用插件

記錄一些本身在使用sublime時經常使用的一些插件 cssrem 、SublimeServer 、 FileHeader 、OmniMarkupPreviewer 、sublime-jsdocs 、AutoFileName、SublimeText-Nodejs 、Sublime-Better-Completion 、SublimeAllAutocomplete 、JsFormat 、jQueryjavascript

安裝插件php

須要先Package install安裝css

按Ctrl+`調出console 複製代碼運行html

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

一個CSS的px值轉rem值的Sublime Text 3自動完成插件。下載地址 https://github.com/flashlizi/...vue

插件效果以下：java

安裝

下載本項目，好比：git clone https://github.com/flashlizi/...
進入packages目錄：Sublime Text -> Preferences -> Browse Packages...
複製下載的cssrem目錄到剛纔的packges目錄裏。
重啓Sublime Text。

配置參數

參數配置文件：Sublime Text -> Preferences -> Package Settings -> cssremnode

px_to_rem - px轉rem的單位比例，默認爲40。
max_rem_fraction_length - px轉rem的小數部分的最大長度。默認爲6。
available_file_types - 啓用此插件的文件類型。默認爲：[".css", ".less", ".sass"]。

SublimeServer

靜態WEB服務器：SublimeServer GitHub地址python

FileHeader

快速新建文件、並生產頭部註釋 GitHub地址git

打開Preferences –Package Settings-File Header-settings user，輸入github

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

OmniMarkupPreviewer

爲 Sublime Text 的一款強大插件，支持將標記語言(Markdown僅是其中一種)渲染爲 HTML 並在瀏覽器上實時預覽，同時支持導出 HTML 源碼文件 GitHub地址

sublime-jsdocs

這個插件能夠很好的生成js ,php 等語言函數註釋,只須要在函數上面輸入/** ,而後按tab 就會自動生成註釋 GitHub地址

AutoFileName

自動提示路徑插件 GitHub地址

SublimeText-Nodejs

基於sublime text3的node.js開發環境搭建 GitHub地址

Sublime-Better-Completion

支持Javascript、JQuery、Twitter Bootstrap框架、HTML5標籤屬性提示的插件 GitHub地址

AllAutocomplete

Sublime Text 默認的 Autocomplete 功能只考慮當前的文件，而 AllAutocomplete 插件會搜索全部打開的文件來尋找匹配的提示詞。 GitHub地址

JsFormat

js格式化插件 GitHub地址

使用方法：

一、快捷鍵：ctrl+alt+f

二、先用快捷鍵打開命令面板「ctrl + shift + p」, 再輸入「Format: Javascript」就能夠使用格式化命令

jQuery

jQuery 提示插件

ConvertToUTF8

sublime text自己是不支持中文編碼的，因此須要經過安裝插件來解決，ConvertToUTF8插件能夠實現。

SublimeTmpl

可以很好的新建文件時使用模版的內容了, 目前添加了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提供括號，引號這類高亮功能 GitHub地址

在Sublime Text中用package control安裝 BracketHighlighter ；
安裝完成後，打開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"
        }
    }
}