一些幫助Web前端開發的Sublime Text包

劉忻沂發表於2014-09-24

我已經有一段時間沒有寫有關Sublime Text以及它對於我這個Web前端開發工程師帶來的好處的文章了。正是由於它的包的特性,使得我已經有3年多沒有更換文字編輯器/IDE了。我甚至還專門建立了一個wiki(在一定程度上)去幫助使用者更好使用,並針對需求選擇最好的包。這篇文章將只會關注那些我認為大多數前端開發者在開發中需要用到的包。

Package Control

在你安裝其他包之前,請確保你最先安裝Package Control。它會讓其他包的安裝和更新異常簡單。

 

針對寫程式碼

Emmet

Emmet(之前被叫做Zen Coding)是一個可以極大提高web開發者HTML和CSS工作效率的工具箱元件。你可以在http://emmet.io/檢視更多資訊。

SublimeLinter

Sublime Text3下的互動式程式碼校驗框架。你可以在這裡找到安裝指南,並且不同的語言需要其特定的外掛,請參見這個列表

jQuery

這個包為jQuery的大部分方法提供了示例程式碼段,讓它的API更加容易使用。

Inc-Dec-Value

增加/減少數字(包括整數和分數),日期,十六進位制顏色碼,配置值對映關係或者迴圈列舉。此外還有字串操作(轉大寫,轉小寫),在這裡可以看完整的相關配置。

ColorHighlighter

ColorHighlighter是一個Sublime Text2和3都可用的外掛,它可以展示你所選擇的顏色程式碼(像“#FFFFFF”, “rgb(255,255,255)”, “white”, 等等)的真正顏色。同時它還包含一個顏色選擇器讓你可以方便地更改顏色。

Convert case

這個外掛可以把選擇地詞語/代號在pascal, camel, snake, dot, dash和分開的單詞這幾種寫法之間轉換。
(譯者注——
pascal寫法:VariableNameLikeThis
camel寫法:variableNameLikeThis
snake寫法: variable_name_like_this
dot寫法: variable.name.like.this
dash寫法: variable-name-like-this
分開的單詞: variable name like this)

BracketHighlighter

括號和標籤高亮顯示的外掛

AlignTab

一個使用正規表示式來幫助對齊的外掛

MultiEditUtils

該外掛用於幫助多重選擇下的編輯

 

針對使用者介面

SideBarEnhancements

增強編輯器的側邊欄。包括檔案和資料夾。

Origami

你可以隨心所欲地分割視窗!建立新板塊,刪除板塊,在板塊之間移動或複製顯示內容。

Modific

高亮自上次提交後修改過的程式碼行(支援Git,SVN,Bazaar,Mercurial以及TFS)

Soda Theme

Sublime Text的暗色及亮色自定義UI主題。我用的是暗色版,個人比較喜歡這個主圖。還有其他更多主題可以在這個列表裡面找到。

Themr

Sublime Text的一個UI主題選擇器。

ColorSchemeSelector

這個外掛可以讓你通過迅捷皮膚快速地選擇主題。

Base16 Color Schemes

我個人最喜歡地Sublime顏色方案

TabsExtra

該外掛提供黏滯tab以及更多地關閉tab選項和額外地選單選項。

 

針對特定的語言

SCSS

一個Sass和SCSS的語法包

Sass Snippets

Sass程式碼段外掛

CSS3 Syntax

該外掛可以增強Sublime預設的針對CSS的高亮。

JavaScriptNext

這是一個針對JS的加強語法包。它是基於那些常用的語言檔案建造的並新增了更多細節的匹配,而且它還包含了來自ECMAScript6的一些新特性例如模組,簡明方法,箭頭函式, 類, 生成器,以及訪問器(ES5)。

如果你想對於每個js檔案都使用它的話,建立或開啟一個js檔案,然後你需要點選右下角愈語法名字按鈕,然後選擇‘Open all with current extension as’下面的JavascriptNext – ES6 > JavascriptNext

Liquid

Liquid模版。如果你開發Jekyll站點的話會很有用。

 

針對一般性幫助

FindKeyConflicts

用於找出鍵值對映(Key Mapping)衝突的外掛。

 

用於搞笑

Sound

該外掛會給許多sublime操作新增音效。給同事的sublime偷偷裝上是不錯的惡作劇。

想要改變某些設定麼?

sublime的預設設定很不錯但是幾乎所有的地方都可以進行修改以使其更符合你的口味。請看看我自己的設定可以瞭解你大概可以做什麼

相關文章