Sublime text 前端開發插件安裝和配置

glumes 發布于2019-08-19 17:20 / 2191人閱讀

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

前端開發sublimeconfig mac配置

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

插件列表

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

1.autoprefixer

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

配置快捷鍵如下：

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

具體配置和文檔請參看官方文檔

比如我在編寫 CSS 的時候是不用關心哪些屬性是需要添加廠商前綴的，當我需要保存測試的時候，只需要按下快捷鍵，該插件會自動給需要添加廠商前綴的屬性添加前綴，如下：

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

當然該插件也可以加入到自己開發項目的自動化工具中去，比如：Gulp ，Grunt

2.babel

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

3.Better Completion

javascript ,jQuery , Bootstrap 等js庫的自動補全。該插件的特點就是可以自定義配置需要自動補全的庫。

安裝完以后它的配置文件可以配置自己需要補全的庫

{
  // --------------------
  // 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
  }
}

4.BracketHighlighter

括號高亮匹配插件。
借用一張官網的截圖：

5.Color Highlighter

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

還可以調節顯示的樣式，比如當我鼠標放到顏色上的時候

具體的可以參考官網的說明。

6.css3

該插件可以對css3屬性進行高亮和自動補全。
具體效果如下：

安裝完以后的設置如下：

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

7.DocBlockr

這個插件可以非常智能對js文件添加注釋,這個非常的方便。
參考一張官網的截圖：

8.Emmet

傳說中快速的編寫html代碼的“神器”。具體的就不再介紹了。網上的教程一搜一大坨啊。

9.FileDiffs

文件差異對比插件。

10.html-css-jsprettify

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

對Html，css，js文件進行格式化。

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

11.jade

如果平時模板語言使用 jade 的話還是安裝一個吧，這個可以讓 Sublime 的顯示更加的友好。jade相關插件，代碼高亮

12.javascript next - ES6 syntax

javascript ES6 語法高亮的支持。

13.jQuery

這個插件主要包括 jQuery 語法高亮，代碼段。

14.Sass

這兩個插件主要是平時使用 scss 或者是 sass 這些預編譯語言有用，支持語法高亮。

工具插件 1.SFTP

這個插件還是很有用的。當我們在跟后端聯調的時候，通常都會有一臺開發機，暫時存放我們的代碼，這個時候如果我們要做一些修改。通常的步驟是：
1.上傳 svn 2.登上開發機 svn up 一下。這個過程中很浪費時間

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

2.SideBarEnhancements

Sublime 側邊欄增強插件。

3.[SublimeCodeIntel]()

語法，函數跳轉。但是我在使用的過程中覺得這個插件并不怎么好用。

4.Markdown Extended

這個插件主要使 Sublime 對 markdown 語法的高亮支持。效果如下圖：

5.[TrailingSpaces]()

去除代碼末尾的空格鍵

語法檢查插件列表 1.SublimeLinter

安裝完以后需要，另外安裝需要檢測語言的插件。

2.SublimeLinter-jshint

在安裝完SublimeLinter 后安轉該插件對 JavaScript 語言進行語法檢測。

3.SublimeLinter-csslint

在安裝完SublimeLinter 后安轉該插件對 css 語言進行語法檢測。

主題插件 1.Theme-soda

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

需要在自己的配置文件內啟動

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

2.Monokai Extended

如果您覺得不錯，請訪問 github（點我）地址給我一顆星。謝謝啦！

GPU云服務器云服務器 sublime-text sublime-text-3 sublime-text2-標簽高亮 sublime插件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78435.html

Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

jsdt 2019-08-01 15:03 評論0 收藏0
Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

wuyangchun 2019-07-24 18:29 評論0 收藏0
Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

Martin91 2019-08-19 17:38 評論0 收藏0
Sublime Text3配置使用教程整理

摘要：安裝完添加如下配置可自動在保存文件的時候格式化中文輸入法不能跟隨光標嗎試試這個插件吧目前只支持和裝完之后，寫作時右下角顯示語法為，可以按，直接就會生成，并在瀏覽器中顯示。 Win平臺上已經打造了便攜版的Sublime Text3,但是，現在折騰Ubuntu不能同步過來使用了，寒假在家休息，整理一下安裝過程好了：安裝sublime 在sublime text官網選擇合適的版本安裝。 u...

kevin 2019-08-30 12:46 評論0 收藏0
一個前端程序猿的Sublime Text3的自我修養

摘要：效果如下配置方法參考下的配置方法完美支持提供了比默認更好的語法高亮，而且他完美支持。語法高亮默認安裝的對的支持讓人抓狂，幀動畫別開玩笑了你只會看到一片白色的純文本一樣的代碼。事實上不光，我建議用完全替代原來的來完成語法高亮。文章轉載自本人的博客《三省吾身丶丶》點擊查看喜歡的話請瘋狂的推薦吧！ ^_^ 本文章會在本人有插件或者設置更新時，進行不定時更新偷懶了，圖片地址直接設置的博客...

KunMinX 2019-08-22 10:59 評論0 收藏0