• 0

    JavaScript 開發者必備的10款 Sublime Text 插件

    jopen 9年前發布 | 22K 次閱讀 JavaScript

    Sublime Text 是一款幾乎所有開發者都必備的非常強大的軟件。它是跨平臺的、高度可定制化的、非常先進的文本編輯器,完美的彌補了全功能的 IDEs(出了名的消耗資源)與命令行編輯器如VIMEmacs(有陡峭的學習曲線)的不足。

    使得 Sublime 如此強大的原因之一是它的可擴展插件架構,這使得開發人員可以非常容易的擴展 Sublime 的核心功能,如代碼補全、或遠程接口文檔的嵌入。Sublime Text 自身不帶有插件管理功能,它們通常是通過一個第三方的稱作 Package Control 的工具來管理。給 Sublime Text 安裝 Package Control ,請按照它們的網站上的安裝指南

    這篇文章中,我們將為你介紹10款 JavaScript 開發者必備的 Sublime Text 插件,每一個都可以改善你的工作流程,提升工作效率。現在就讓我們開始吧。

    1. Bable

    JavaScript 開發者必備的10款 Sublime Text 插件

    列表第一個當然應該是 Bable。它為你的 ES6/2015 和 React JSX 代碼添加語法高亮功能。插件安裝后的第一件事就是把它設置為 .es6, .jsx 甚至 .js 文件的默認語法。然而你需要注意的是最后一個如果你使用的是 ES3/5 的話,請不要使用 Bable 語法。

    如果你還沒有發現使用 Bable 的樂趣的話,我強烈建議你使用它。它可以把 ES6/2015 和 JSX 代碼編譯成 ES5。它與所有流行的架構工具與CLI 都整合的很好。它不支持舊版本的瀏覽器,如果你使用 IE10 以下的瀏覽器,請遵循它們的警告頁面提示

    不幸的是,它不支持在 Sublime 中動態的編譯 ES6,如果你有這個需要的話,我建議你看看  Compile Selected ES6

    2. JSHint

    JavaScript 開發者必備的10款 Sublime Text 插件

    JSHint 是一個 JavsScript Linter。它可以檢測代碼的樣式、語法以及是否是常見的相關錯誤。無論你是新手還是老手,JSHint 都是必備的。查看 JSHint 關于頁面獲取更多信息。

    為了使 JSHint 能夠運行,你需要通過 npm 全局安裝 JSHint:

    npm install -g jshint

    一旦 JSHint npm 模塊和 Sublime Text 插件安裝完成,你就可以通過打開 JavaScript 文件并按 Ctrl+JAlt+J 在Linux/Windows上)來調用 JSHint。

    3. jsFormat

    JavaScript 開發者必備的10款 Sublime Text 插件

    jsFormat 是基于 JS Beautifier 的,可以自動的幫你格式化 JavaScript 和 JSON。即使是你僅僅用它來格式化JSON也是值得的。對我來說最大的好處就是可以查看別的開發者代碼或者是自己很久之前寫的。

    你可以通過 Preferences -> Package Settings -> JsFormat -> Settings - User 來設置你想要的代碼格式。

    4. DocBlockr

    JavaScript 開發者必備的10款 Sublime Text 插件

    為你的代碼添加注釋通常是件非常痛苦的事情。我不知道多少人會享受這個過程,但它卻是必須的。DocBlockr 通過把注釋變得簡單來減少這個痛苦。安裝完 DocBlockr 之后,你需要做的只是在新的一行輸入 /* 或者 /** ,它會為你完成剩下的。

    DocBlockr 還支持很多其他語言:CoffeeScript, TypeScript, PHP, ActionScript, Haxe, Java, Apex, Groovy, Objective C, C, C++, and Rust。

    5. SideBar Enhancements

    JavaScript 開發者必備的10款 Sublime Text 插件

    Sublime Text 自帶的邊欄文件操作選項非常的少。SideBarEnhancements 彌補了此缺點。值得注意的是,它為文件和文件夾還提供了“move to trash”、“open with..”甚至還有剪切板選項。

    6. AngularJS

    JavaScript 開發者必備的10款 Sublime Text 插件

    它是有 Angular-UI 團隊開發的,可能是列表中比較偏大(但是是必須的)插件,它的功能包括:

    • AngularJS 核心指令的代碼補全功能
    • 自定義指令的指令完成
    • directives, controllers and filters的快速搜索
    • Angular相關的代碼片段
    • GoToDocs for core AngularJS directives

    7. TypeScript

    JavaScript 開發者必備的10款 Sublime Text 插件

    由微軟支持,該插件為 TypeScript 項目添加了代碼補全、語法高亮、代碼格式化以及擴展的導航功能。它還配備了一個構建系統,允許你把 TypeScript 編譯到 JavaScript。

    可以用 Tools -> Build System 進入Bulid系統,然后打開一個 .ts 結尾的文件,然后選擇 Tools -> Build 或者直接按 Ctrl+B ,它會讓你輸入參數,直接就會在同一個目錄輸入JavaScript文件。唯一的條件是需要 Node 支持。

    8. Handlebars

    JavaScript 開發者必備的10款 Sublime Text 插件

    如果你使用 Ember.js 或者僅僅把 Handlebars 作為模版語言,這款插件都是必備的。如果沒有它,你最好把語法高亮關閉。

    除了語法高亮,它還提供了各種表達式的標簽觸發器。例如輸入 x-temp 然后按 TAB 會生成:

    <script type="text/x-handlebars" data-template-name=""></script>

    另外,如果輸入 ifel 然后按 TAB 怎生成:

    {{#if }}
    
    {{else}}
    
    {{/if}}>

    非常的順手,對嗎?

    項目的主頁上有所有的代碼片段列表。

    9. Better CoffeeScript

    JavaScript 開發者必備的10款 Sublime Text 插件

    Better CoffeeScript 是原 CoffeeScript-Sublime-Plugin 的 Fork,不幸的是原插件似乎已經被作者廢棄,并且只支持Sublime Text 2。

    該插件為使用 CoffeeScript 的開發者提供很多必要的代碼高亮,并且不至于此。它給 Sublime 增加了一些命令,如檢測語法的能力、編譯文件、顯示編譯的JavaScript等。

    你可以在該項目的主頁細讀它的各項設置與選項。

    10. jQuery

    我知道現在jQuery在很多地方都失寵了,但它依然是非常有用的,如果你不建立一個完全互動的網站,或者你只是想在一個現有的應用程序中添加功能。

    例如輸入 $.a 然后選擇 $.ajax 就會生成下面的內容:

    $.ajax({
      url: '/path/to/file',
      type: 'default GET (Other values: POST)',
      dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
      data: {param1: 'value1'},
    })
    .done(function() {
      console.log("success");
    })
    .fail(function() {
      console.log("error");
    })
    .always(function() {
      console.log("complete");
    });

    非常棒~

    總結

    這就是為你準備的JavaScript 開發者必備的10款 Sublime Text 插件。我強烈建議你嘗試其中的一兩個,然后在評論中告訴我使用體驗。或者說我沒有列出某個你最喜歡的,也請在評論中給出,我可以考慮把它添加到列表中。

    最后,請記住 Sublime Text 并不是免費的,它只是提供了一個無限期的試用版。單個許可證的價格是 $70 。如果你每天都在使用文本編輯器的話,這將是一個值得的投資。

    譯者加:《Sublime Text 3注冊碼》提供了一個免費的注冊碼供大家使用,不過還是建議有能力的朋友購買許可證。

    via:sitepoint,本文由 Specs 翻譯整理,發布在 Coder資源網,轉載請注明來源。

     本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
     轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!
  • sesese色