摘要：前端開(kāi)發(fā)配置此文件目錄中文件主要是關(guān)于的插件配置，快捷鍵配置，主題和字體配置。插件列表所有插件都可以使用安裝，具體的安裝方法可以自行谷歌安裝，不在本文的介紹范圍之內(nèi)。這兩個(gè)插件主要是平時(shí)使用或者是這些預(yù)編譯語(yǔ)言有用，支持語(yǔ)法高亮。

此文件目錄中文件主要是關(guān)于sublime的插件配置，快捷鍵配置，主題和字體配置。

所有插件都可以使用Package Control安裝，具體的安裝方法可以自行谷歌安裝，不在本文的介紹范圍之內(nèi)。也可以是使用git 手動(dòng)安裝。

該插件主要使編寫(xiě)css更加的方便和快捷，可以配置快捷鍵給標(biāo)簽屬性添加瀏覽器廠商前綴。安裝前需要確定電腦安裝node。

配置快捷鍵如下：

    //autoprefixer快捷鍵設(shè)置
    { "keys": ["command+alt+p"], "command": "autoprefixer" }

具體配置和文檔請(qǐng)參看官方文檔

比如我在編寫(xiě) CSS 的時(shí)候是不用關(guān)心哪些屬性是需要添加廠商前綴的，當(dāng)我需要保存測(cè)試的時(shí)候，只需要按下快捷鍵，該插件會(huì)自動(dòng)給需要添加廠商前綴的屬性添加前綴，如下：

{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    flex-flow: row;
}

當(dāng)然該插件也可以加入到自己開(kāi)發(fā)項(xiàng)目的自動(dòng)化工具中去，比如：Gulp ，Grunt

ES6終將是要取代 ES5 的但是在從 ES5 到 ES6 過(guò)度的過(guò)程中，各個(gè)瀏覽器廠商對(duì) ES6 支持的也不是很好。
主要是將ES6的代碼編譯為ES5。至于為什么要這么做，不是本文的內(nèi)容，可以自行谷歌了解。

javascript ,jQuery , Bootstrap 等js庫(kù)的自動(dòng)補(bǔ)全。該插件的特點(diǎn)就是可以自定義配置需要自動(dòng)補(bǔ)全的庫(kù)。

安裝完以后它的配置文件可以配置自己需要補(bǔ)全的庫(kù)

{
  // --------------------
  // sublime-better-completions-Package (sbc package)
  // --------------------
  // API files is contains the *keyword* such as `html`, `jquery`, `myglossary` with lowercase as filename `sbc-api-${filename}.sublime-settings` place in `/packages/User/` (your own) or `/packages/${this-package}/sublime-completions/` (package build-in).
  // After you enable, disable or added new your own completions, you might need restart your Sublime Text Editor.
  //
  // Your own setting file `sbc-setting.sublime-settings` need to place in `/packages/User/` and contains all your api setting property that you want to enable.
  //
  // --------------------
  // APIs Setup
  // --------------------
  // `true` means enable it.
  // `false` means disable it.
  "completion_active_list": {
    // build-in completions
    "css-properties": false,
    "gruntjs-plugins": false,
    "html": false,
    "lodash": false,
    "javascript": false,
    "jquery": false,
    "jquery-sq": false, // Single Quote
    "php": false,
    "phpci": false,
    "sql": false,
    "twitter-bootstrap": false,
    "twitter-bootstrap-less-variables": false,
    "twitter-bootstrap3": false,
    "twitter-bootstrap3-sass-variables": false,
    "underscorejs": false,
    "react": false,

    // Your own completions?
    // ~/Library/Application Support/Sublime Text 3/Packages/User/sbc-api-my-angularjs.sublime-settings
    "my-angularjs": false,

    // ~/Library/Application Support/Sublime Text 3/Packages/User/sbc-api-my-glossary.sublime-settings
    "my-glossary": false,

    // ~/Library/Application Support/Sublime Text 3/Packages/User/sbc-api-my-html.sublime-settings
    "my-html": false,

    // ~/Library/Application Support/Sublime Text 3/Packages/User/sbc-api-my-javascript.sublime-settings
    "my-javascript": false
  }
}

括號(hào)高亮匹配插件。
借用一張官網(wǎng)的截圖：

該插件可以顯示在CSS文件中說(shuō)使用的顏色的色值。包括HTML中嵌套的css樣式也可以顯示。
如下圖：

還可以調(diào)節(jié)顯示的樣式，比如當(dāng)我鼠標(biāo)放到顏色上的時(shí)候

具體的可以參考官網(wǎng)的說(shuō)明。

該插件可以對(duì)css3屬性進(jìn)行高亮和自動(dòng)補(bǔ)全。
具體效果如下：

安裝完以后的設(shè)置如下：

View → Syntax → Open all with current extension as... → CSS3

這個(gè)插件可以非常智能對(duì)js文件添加注釋,這個(gè)非常的方便。
參考一張官網(wǎng)的截圖：

傳說(shuō)中快速的編寫(xiě)html代碼的“神器”。具體的就不再介紹了。網(wǎng)上的教程一搜一大坨啊。

文件差異對(duì)比插件。

之前格式化 js，css 文件使用的都是 JsFormat 和 CSSFormat。每次在不同的文件中都要去使用兩個(gè)不同的插件。后來(lái)找到一個(gè)可以支持三種語(yǔ)言格式化的插件。

對(duì)Html，css，js文件進(jìn)行格式化。

    //html-css-jsprettify插件快捷鍵
    {"keys": ["command+alt+l"],"command": "htmlprettify"},

如果平時(shí)模板語(yǔ)言使用 jade 的話還是安裝一個(gè)吧，這個(gè)可以讓 Sublime 的顯示更加的友好。jade相關(guān)插件，代碼高亮

javascript ES6 語(yǔ)法高亮的支持。

這個(gè)插件主要包括 jQuery 語(yǔ)法高亮，代碼段。

這兩個(gè)插件主要是平時(shí)使用 scss 或者是 sass 這些預(yù)編譯語(yǔ)言有用，支持語(yǔ)法高亮。

這個(gè)插件還是很有用的。當(dāng)我們?cè)诟蠖寺?lián)調(diào)的時(shí)候，通常都會(huì)有一臺(tái)開(kāi)發(fā)機(jī)，暫時(shí)存放我們的代碼，這個(gè)時(shí)候如果我們要做一些修改。通常的步驟是：
1.上傳 svn 2.登上開(kāi)發(fā)機(jī) svn up 一下。這個(gè)過(guò)程中很浪費(fèi)時(shí)間

如果我們使用 SFTP 插件就可以保存的時(shí)候自動(dòng)上傳到服務(wù)器。配置方法：
1.在項(xiàng)目根目錄建立 sftp-config.json 文件
2.配置該文件，詳細(xì)配置如下圖

Sublime 側(cè)邊欄增強(qiáng)插件。

語(yǔ)法，函數(shù)跳轉(zhuǎn)。但是我在使用的過(guò)程中覺(jué)得這個(gè)插件并不怎么好用。

這個(gè)插件主要使 Sublime 對(duì) markdown 語(yǔ)法的高亮支持。效果如下圖：

去除代碼末尾的空格鍵

安裝完以后需要，另外安裝需要檢測(cè)語(yǔ)言的插件。

在安裝完SublimeLinter 后安轉(zhuǎn)該插件對(duì) JavaScript 語(yǔ)言進(jìn)行語(yǔ)法檢測(cè)。

在安裝完SublimeLinter 后安轉(zhuǎn)該插件對(duì) css 語(yǔ)言進(jìn)行語(yǔ)法檢測(cè)。

該插件主要能夠使sublime 兼容mac的retina屏幕

需要在自己的配置文件內(nèi)啟動(dòng)

{
    "theme": "Soda Light 3.sublime-theme"
}

如果您覺(jué)得不錯(cuò)，請(qǐng)?jiān)L問(wèn) github（點(diǎn)我） 地址給我一顆星。謝謝啦！