Sublime Text各類插件使用方法

時間  2019-11-12
標籤 sublime text 各類 插件 使用方法 欄目 HTML 简体版
原文   原文鏈接

有快捷鍵衝突的時候能夠修改快捷鍵，建議修改插件快捷鍵而不是Sublime Text的快捷鍵，個人有衝突的一概將插件快捷鍵設置成：Ctrl+Alt+A(B...)

Package Control

通俗易懂地說，這個是你在完成安裝SublimeText後必須安裝的東西。你問爲何？由於有了這個特殊的「插件包」，你能夠很容易地安裝、升級、刪除，甚至很是方便地查看您已經安裝在SublimeText中的包或插件的列表。它經過菜單和對應的行爲使這些過程變得很是容易和有組織。css

Emmet(快捷鍵爲Ctrl+E，習慣用Tab)

歸納地說，Emmet（譯者注：前身就是之前大名鼎鼎的Zen Coding，這個若是你沒據說和使用過，就悲哀了）是一個可讓你更快更高效地編寫HTML和CSS，節省你大量時間的插件。怎麼使用？你只需按約定的縮寫形式書寫而不用寫整個代碼，而後按「擴展」鍵，這些縮寫就會自動擴展爲對應的代碼內容。 好比，你只須要輸入 ((h4>a[rel=external])+p>img[width=500 height=320])*12 ，而後它會被擴輾轉換成12個列表項和緊隨其後的圖像。而後你就能夠在此基礎上再填寫內容，就這麼簡單。html

生成一個html空模版文件node

html:xt->Tabgit

Emmet插件

生成多個元素，例如20個div：程序員

div*20->Tabgithub

Emmet插件1

生成子元素，例：div->ul->li->a->img 寫法編程

div>ul>li>a>img->Tabvim

Emmet插件3

生成同級別元素，例：div->ul+div 寫法windows

div>ul+div->Tabsublime-text

Emmet插件4

生成向上層元素，例：div->ul->上一層添加一個ul 寫法

div>ul^ul->Tab

Emmet插件5

生成帶序號的元素

h$*6->Tab

生成帶id或class元素，id寫法#id名->Tab ，class寫法 .class名->Tab

Emmet插件6

Alignment

這個插件讓你能對齊你的代碼，包括 PHP、CSS 和 Javascript。代碼看起來更簡潔和可讀，便於編輯。默認是Ctrl+Alt+A，哇，齊了。

Sublime-HTMLPrettify

Ctrl + Shift + H，可格式化HTML，CSS，JS，XML等，至關於功能是JsFormat，CssCond，sublimetext_indentxml的結合，功能強大，我的把他設置爲了Ctrl + Shift + F，同時須要下載node.js，將node.js的路徑配置進去就好了，可是對JSON的格式化不是那麼使人滿意，因此仍是加了JsFormat這個插件

JsFormat

Ctrl+Alt+F  格式化js代碼

WebInspector 

在 JavaScript調試方面，這是一個使人驚訝的工具，Sublime上的完整的代碼檢查工具。
功能：使用絕對路徑儲存在用戶設置中的項目斷點，控制檯，分步和斷點調試器，棧追蹤。這些都可以很棒的工做！並且Mozilla還提供了一個插件Fireplay讓你鏈接到Firefox 開發工具和最簡單的調試器JSHint

CSSComb

這是用來給CSS屬性進行排序的格式化插件。若是你想保持的代碼乾淨整潔，而且但願按必定的順序排列（是否是有點強迫症了？），那麼這個插件是一種有效解決的方案。特別是當你和其餘有本身代碼編寫風格的開發者一同協做的時候。

使用方法：Ctrl + Shift + C

sublimetext_indentxml

對XML進行格式化，Ctrl + K + F

AllAutocomplete

Sublime Text 默認的 Autocomplete 功能只考慮當前的文件，而 AllAutocomplete 插件會搜索全部打開的文件來尋找匹配的提示詞，無需重啓便可生效。

BracketHighlighter

用於匹配括號，引號和html標籤。對於很長的代碼頗有用。安裝好以後，不須要設置插件會自動生效。好極了！打開和摺疊代碼的某一部分就應該是這個樣子的。

SideBarEnhancements

這個插件能夠給SublimeText的邊欄菜單帶來擴充的功能，包括：在當前工程文件夾中新建文件，移動文件或文件夾，產生文件或文件夾的副本，在新窗口或瀏覽器中打開，刷新等。這只是歸納地說，安裝後探索它更多的功能吧。

修改  Side Bar.sublime-menu文件能夠去除不須要的功能，個人最後修改爲這樣，效果和代碼以下：

[
    {
        "caption": "-",
        "id": "side-bar-start-separator"
    },

    {
        "command": "prompt_add_folder",
        "caption": "Add Folder to Project…",
        "mnemonic": "d"
    },
    
    {
        "caption": "-",
        "id": "side-bar-new-separator"
    },

    {
        "caption": "Open In Browser",
        "id": "side-bar-open",
        "command": "side_bar_open",
        "args": {
            "paths": []
        }
    },

    {
        "caption": "Open the Folder",
        "id": "side-bar-reveal",
        "command": "side_bar_reveal",
        "args": {
            "paths": []
        }
    },

    {
        "caption": "-",
        "id": "side-bar-edit-open-separator"
    },

    {
        "caption": "-",
        "id": "side-bar-find-separator"
    },
    {
        "caption": "Copy Name",
        "id": "side-bar-clip-copy-name",
        "command": "side_bar_copy_name",
        "args": {
            "paths": []
        }
    },

    {
        "caption": "Copy Path (Windows)",
        "id": "side-bar-clip-copy-path-windows",
        "command": "side_bar_copy_path_absolute_from_project_encoded_windows",
        "args": {
            "paths": []
        }
    },
    {
        "caption": "Copy Dir Path",
        "id": "side-bar-clip-copy-dir-path",
        "command": "side_bar_copy_dir_path",
        "args": {
            "paths": []
        }
    },
    {
        "caption": "Copy Path",
        "id": "side-bar-clip-copy-path",
        "command": "side_bar_copy_path",
        "args": {
        "paths": []
        }
    },
    {
        "caption": "Copy Folder Path",
        "id": "side-bar-clip-copy-project-directories",
        "command": "side_bar_copy_project_directories",
        "args": {
        "paths": []
        }
    },

    {
        "caption": "-",
        "id": "side-bar-clip-separator"
    },

    {
        "caption": "Rename…",
        "id": "side-bar-rename",
        "command": "side_bar_rename",
        "args": {
            "paths": []
        }
    },
    
    {
        "caption": "-",
        "id": "side-bar-duplicate-separator"
    },

    {
        "caption": "Duplicate…",
        "id": "side-bar-duplicate",
        "command": "side_bar_duplicate",
        "args": {
            "paths": []
        }
    },
    
    {
        "caption": "-",
        "id": "side-bar-rename-move-separator"
    },

    {
        "caption": "Empty",
        "id": "side-bar-empty",
        "command": "side_bar_empty",
        "args": {
            "paths": []
        }
    },
    {
        "caption": "-",
        "id": "side-bar-delete-separator"
    },

    {
        "caption": "Refresh",
        "id": "side-bar-refresh",
        "command": "refresh_folder_list"
    },
    {
        "caption": "-",
        "id": "side-bar-refresh-separator"
    },
]

Git

Sublime Test Git插件下載地址

雖然名字看上去並不友好，但做爲開發者的你確定一眼就能明白它是幹什麼的。這個插件會將Git整合進你的SublimeText，使的你能夠在SublimeText中運行Git命令，包括添加，提交文件，查看日誌，文件註解以及其它Git功能。

GitGutter或者Modific

這是一個小巧有用的插件，它會告訴你自上次git commit以來已經改變的行。一個指示器顯示在行號的旁邊。

DeleteBlankLines

刪除所有空行：

注意:
若是行中帶有tab或空格字符則不會被刪除,只刪除只含有\n或\r的空行
在Windows操做系統中:
Ctrl+Alt+Backspace -- 刪除全部空行
Ctrl+Alt+Shift+Backspace -- 刪除多餘空行
 
在OSX操做系統中:
Ctrl+Alt+Delete -- 刪除全部空行
Ctrl+Alt+Shift+Delete -- 刪除多餘空行
 
在Linux操做系統中:
Ctrl+Alt+Backspace -- 刪除全部空行
Ctrl+Alt+Shift+Backspace -- 刪除多餘空行

EditorConfig

EditorConfig幫助開發者在不一樣的編輯器，IDE之間定義和維護統一的編程風格。EditorConfig工程包含一個文件，定義了編程風格，文本編輯器插件集合，讓編輯器能夠讀取該文件並依照它來定義風格。例如.editorconfig文件：

對比查找兩個文檔的不一樣Sublimerge Pro

打開Sublime Text後，接着按 Ctrl+Shift+P，並輸入  Install Package ，安裝完成以後選擇 Compare to View

Colorpicker

若是你常常要查看或設置顏色值，這個插件能夠很方便地調用你本機的調色板應用。（譯者擴充：）這是一個雙向的功能，你既能夠在調色板中選擇一個顏色，而後按「肯定」按鈕把該值填寫到 SublimeText 中活動文檔的當前位置，也能夠在活動文檔中選擇一個顏色的值，按此插件的快捷鍵就會在顯示的調色板中定位到該值所對應的顏色。

使用方法: Ctrl + Shift + C

DocBlockr

DocBlockr 可使你很方便地對代碼創建文檔。它會解析函數，變量，和參數，根據它們自動生成文檔範式，你的工做就是去填充對應的說明。

Floobits

SublimeText, Vim, Emacs, IntelliJ IDEA極佳的擴展工具，它使得開發者能夠在從不一樣的編輯器合做編寫代碼。

AutoFileName

自動補全文件路徑-很是方便。沒有廢話。

PlainTasks

傑出的待辦事項表！全部的任務都保持在文件中，因此能夠很方便的把任務和項目綁定在一塊兒。能夠建立項目，貼標籤，設置日期。有競爭力的用戶界面和快捷鍵。

SublimeREPL

這多是對程序員最有用的插件。SublimeREPL 容許你在 Sublime Texxt 中運行各類語言（NodeJS ， Python，Ruby， Scala 和 Haskell 等等）。

MarkdownEditing

多是Markdonw最好的插件了：語法高亮，縮略詞，自動補全，配色方案。你也能夠嘗試使用MarkdownPreview做爲替代解決方案。

MarkdownPreview

SublimeText不只僅是可以查看和編輯 Markdown 文件，但它會視它們爲格式很糟糕的純文本。這個插件經過適當的顏色高亮和其它功能來更好地完成這些任務。

CodeIntel

Sublime CodeIntel是我最喜歡的插件，它提供了不少IDE提供的功能，例如代碼自動補齊，快速跳轉到變量定義，在狀態欄顯示函數快捷信息等。

它支持的語言有：PHP, Python, RHTML, JavaScript, Smarty, Mason, Node.js, XBL, Tcl, HTML, HTML5, TemplateToolkit, XUL, Django, Perl, Ruby, Python3.

雖然有時候有點小問題，但真的能節省不少時間。強烈推薦安裝。

Terminal

這個插件可讓你在Sublime中直接使用終端打開你的項目文件夾，並支持使用快捷鍵。默認是Ctrl+Alt+T  調出控制檯，快捷鍵跟Sublime Text衝突，須要修改快捷鍵，個人修改成Ctrl+Alt+T

Prefixr

因爲CSS3和HTML5的W3C規範都還沒有統一，各大瀏覽器對標準的支持仍是有差別的。因此在編寫CSS3代碼還須要針對不一樣的瀏覽器寫一堆的CSS3代碼前綴。Prefixr插件能將CSS3代碼自動生成跨瀏覽器CSS代碼。

JSLint

JSLint是一個Javascript代碼質量檢測工具。它能夠告訴你代碼的什麼地方須要改進。雖然你也能夠在網上檢測，但這個插件能讓你不打開瀏覽器，直接在Sublime裏面檢測。

使用方法：按下Shift + Command + P(Mac)或是Ctrl + Shift + P(Windows)調出命令面板，找到JSLint: Run JSLint，按下Enter，JSLint會輸出結果到狀態欄。

Linter

這個插件最近才爲SublimeText3重建和發佈。新版本顯然帶來了不少新的有所不一樣的功能，而不是簡單地把全部的Linter 放在一個包中，開發者容許用戶在升級時選擇並安裝本身常用的Linter。很明顯，這能夠節省磁盤空間。「更多的定製」，這對用戶是很友好的。

CanIUse

若是您想檢查瀏覽器是否支持你包括在你的代碼中的CSS和HTML元素，那麼這是你須要的插件。全部您須要作的就是選擇有疑問的元素，插件將爲你作其他的事情。

FTPSync

默認狀況下SublimeText不具有FTP的功能，若是你正在尋找能在您的SublimeText應用程序中使用的免費和易用的FTP工具，你能夠考慮FTPSync。這是一個很是簡單的FTP同步工具，它能夠控制上傳目標的多重命名。讓咱們知道您的想法。

SASS Build

SASS Build 是一個編寫CSS的預處理器。這個特別的插件將幫助你妥善構建包括壓縮選項在內的SASS文件。一旦你安裝了這個插件，你能夠很容易地經過按Ctrl+ B（MAC系統是 Command +B）來啓動它。

PackageResourceViewer

經過這個特殊的插件，會給你查看和編輯SublimeText附帶的不一樣的包帶來不少方便。您也能夠提取任何給定的包。這一行動將其複製到用戶文件夾，以便您能夠安全地對其進行編輯。

Trmmer

你知道當你編寫代碼時，因爲錯誤或別的某些緣由，會產生一些沒必要要的空格。須要注意的是多餘的空格有時也會形成錯誤。這個插件會自動刪除這些沒必要要的空格。

FileDiffs

這個插件容許你看到SublimeText中兩個不一樣文件的差別。你能夠比較的對象能夠是從剪貼板中複製的數據，或工程中的文件，當前打開的文件等。

  • Sublime SFTP
  • CTags – 讓Sublime Text支持CTags.
  • ActualVim – Vim in Sublime – 兩個最愛的編輯器合二爲一.
  • SublimeLinter – 行內語法檢測插件，支持： C/C++, Java, Python, PHP, JS, HTML, CSS, etc.
  • FixMyJS, Jsfmt and JsFormat – JS/JSON代碼風格格式化.
  • AStyleFormatter – C/C++/C#/Java 代碼風格格式化.
  • SVG-Snippets – 一套 SVG 代碼片斷.
  • Inc-Dec-Value – 增長或減小數字, 日期, 十六進制彩色值等等。
  • Trailing Spaces – 高亮空白結尾並快速刪除它們
  • Placeholders – 帶有文本，圖片，列表，表格等的佔位用代碼片斷
  • ApplySyntax – 快速語法檢測
  • StylToken – 容許以不一樣的顏色高亮特定的一段文本 (相似和notepad++ 的Style token功能).
  • EasyMotion – 快速跳轉到任何當前激活視圖而已看到區域的字符
  • ZenTabs 和Advanced?New?File – 改進默認tab樣式和文件建立.
  • EncodingHelper – 猜想文本的編碼方式，在狀態欄顯示，從不一樣的編碼形式轉換到UTF-8
  • Gist – 同步GitHub Gist和Sublime (ST2).

  • Clipboard History (ST2) – 爲的剪切板保存歷史記錄

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程