天天看點

sublime text3 前端插件介紹

Emmet插件

Emmet插件可以說是使用Sublime Text進行前端開發必不可少的插件

它讓編寫HTML代碼變得極其簡單高效

sublime text3 前端插件介紹

基本用法:輸入标簽簡寫形式,然後按Tab鍵

關于Emmet的更多介紹,請檢視官方文檔

這份速查表,可以幫你快速記憶簡寫形式

JsFormat插件

這是一款将JS格式化的插件

同樣使用Package Control安裝JsFormat插件後

即可在JS檔案中通過滑鼠右鍵->JsFormat或鍵盤快捷鍵Ctrl+Alt+F對JS進行格式化

SideBarEnhancements插件

SideBarEnhancements是一款很實用的右鍵菜單增強插件

在安裝該插件前,在Sublime Text左側FOLDERS欄中點選右鍵

更強大的是,該插件還能讓我們自定義快捷鍵呼出某個浏覽器以預覽頁面

這樣就不用到項目目錄下尋找和拖動到特定浏覽器中預覽了

安裝此插件後

點選菜單欄的preferences->package setting->side bar->Key Building-User

鍵入以下代碼

[    { "keys": ["ctrl+shift+c"], "command": "copy_path" },    //firefox    { "keys": ["f1"], "command": "side_bar_files_open_with",             "args": {                "paths": [],                "application": "F://Firefox Developer Edition//firefox.exe",                "extensions":".*" //比對任何檔案類型            }    },    //chrome    { "keys": ["f2"], "command": "side_bar_files_open_with",            "args": {                "paths": [],                "application": "C://Program Files (x86)//Google//Chrome//Application//chrome.exe",                "extensions":".*"            }     },    //ie    { "keys": ["f3"], "command": "side_bar_files_open_with",             "args": {                "paths": [],                "application": "C://Program Files//Internet Explorer//iexplore.exe",                "extensions":".*"            }    }]      

這裡設定其按Ctrl+Shift+C複制檔案路徑

分别按F1、F2和F3即可分别在firefox,chrome,IE浏覽器預覽目前頁面效果

當然,你也可以自己定義喜歡的快捷鍵

但要注意代碼中的浏覽器路徑要以自己電腦裡的檔案路徑為準

TrailingSpaces插件

有時候,在代碼結尾打多了幾個空格或Tab

并沒有任何顯示效果

TrailingSpaces這款插件能高亮顯示多餘的空格和Tab

Tag插件

這是HTML/XML标簽縮進、補全、排版和校驗工具

sublime text3 前端插件介紹

安裝該插件後,可以如上圖方式使用Tag插件對HTML/XML進行自動排版等操作

該操作快捷方式 ctrl+ alt + f;

Terminal插件

在程式設計過程中,我們經常需要使用到指令行視窗

Terminal插件可以允許在Sublime Text 3中打開cmd指令視窗

安裝好該插件後

即可使用快捷鍵Ctrl+Shift+T呼出指令行視窗

SublimeCodeIntel插件

這是一款代碼提示插件,支援多種程式設計語言

該插件安裝時間可能相對較長

CssComb插件

CssComb是為CSS屬性進行排序和格式化插件 [官網]

使用Package Control安裝CssComb插件後,你可能發現它并不能運作

它依賴于Node.js [官網]

Autoprefixer插件

這是一款CSS3私有字首自動補全插件

該插件使用CanIUse資料庫,能精準判斷哪些屬性需要什麼字首

與CssComb插件一樣,該插件也需要系統已安裝Node.js環境

使用方法:在輸入CSS3屬性後(冒号前)按Tab鍵,如下圖示

其他:

plaintasks插件:

  主要是對文檔類的編輯,寫文檔說明,做計劃日志,工作記錄……以及各種備忘錄等都是很好的編輯文檔,

IMESupport:

  還在糾結sublime裡輸入漢字時輸入框不跟随光标的問題嗎?有了這個,就都不是問題了。可以解決sublime裡輸入法不跟随光标走的問題

CSS Format:

  css代碼格式工具,具體功能有:

  • Expanded:
    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }      
  • Expanded (Break Selectors):
    body {
        background: #fff;
        font: 12px/2em Arial, Helvetica, sans-serif;
    }
    
    ol,
    ul,
    li {
        margin: 0;
        padding: 0;
    }      
  • Compact:
    body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }      
  • Compact (No Spaces):
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}      
  • Compact (Break Selectors):
    ol,
    ul,
    li { margin: 0; padding: 0; }
    a { color: rgba(65, 131, 196, 0.8); }
          
  • Compact (Break Selectors, No Spaces):
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
    ol,
    ul,
    li{margin:0;padding:0;}      
  • Compressed:
    body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}
    
          

Autoprefixer:

  詳細介紹:http://www.w3cplus.com/blog/tags/470.html

  使用方法:按 ctrl+shift+P調出搜尋框,輸入autoPrefixer 點選選擇!

  Autoprefixer解析CSS檔案并且添加浏覽器字首到CSS規則裡,使用Can I Use的資料來決定哪些字首是需要的。

  所有你需要做的就是把它添加到你的資源建構工具(例如 Grunt)并且可以完全忘記有CSS字首這東西。盡管按照最新的W3C規範來正常書寫你的CSS而不需要浏覽器字首。像這樣:

1

2

3

a{

transition :transform

1

s

}

  Autoprefixer使用一個資料庫根據目前浏覽器的普及度以及屬性支援提供給你字首:

4

5

a{

-webkit-transition :-webkit-transform

1

s;

transition :-ms-transform

1

s;

transition :transform

1

s

}

.md檔案編輯:

  Markdown Editing 和 Markdown Preview

  自定義快捷鍵

    如果我們想要直接在浏覽器中預覽效果的話,可以自定義快捷鍵:點選 

Preferences

 --> 選擇 

Key Bindings User

,輸入:

    "keys": ["alt+m"], "command": "markdown_preview", "args": { "target": "browser"}            

     儲存後,直接輸入快捷鍵:

Alt

 + 

M

 就可以直接在浏覽器中預覽生成的HTML檔案了。

  不知道md檔案編輯格式請自行搜尋學習。

  markdown(md)是為那些需要經常碼字或者進行文字排版的、對碼字手速和排版順暢度有要求的人群設計的,他們希望用鍵盤把文字内容啪啪啪地打出來後就已經排版好了,最好從頭到尾都不要使用滑鼠。

  這些人包括經常需要寫文檔的碼農、部落格寫手、網站小編、出版業人士等等

  

Package Control:安裝SublimeText後必須安裝的東西

Trmmer:會自動删除這些不必要的空格 DocBlockr:對代碼建立文檔 Snippets:快速書寫代碼

Soda:一個流行的主題,包含代碼着色、标簽、圖示 

Sublime Prefixr:CSS3 私有字首自動補全插件 JS Format:一個JS代碼格式化插件。

SublimeEnhancements:邊欄菜單帶來擴充的功能 SideBarEnhancements:一個左邊欄增強 SublimeLinter:行内高亮文法 FileDiffs:兩個不同檔案的差異 

jQuery:jQuery插件 

ColorPicker:調色闆

SASS Build:CSS的預處理器

FTPSync:免費和易用的FTP工具 Git:git的支援插件

SyncedSidebarBg:自動同步側邊欄底色為編輯視窗底色;PS:有時改完後側邊欄顔色沒變化,不知什麼原因,打開包控制,然後列一下已安裝包就重新整理了

sublimeLinter:是少數幾個能在sublime text 3工作的代碼檢查插件

部落格中所涉及到的圖檔都有版權,請謹慎使用