sublime3 支援jsx es6文法

標籤：classname   match   文法高亮   rand   abs   tabstop   自動   rem   git   

Sublime Text3 React.js開發常用外掛程式

本文主要是針對jsx文法的，用來快速編寫組件中的html部分。

babel

支援ES6、React.js、jsx代碼文法高亮。

安裝

command+shift+p -> install package -> babel

配置

該外掛程式不需要額外配置，在開啟.js或.jsx尾碼的檔案，直接選擇Babel為對應的文法就可以了。

Emmet

可以自動擴充react的className，這點不要太爽～
我們要做的，只是安裝好它之後稍微做下配置修改，就可以愉快的開擼了。

安裝

command+shift+p -> install package -> emmet

配置

開啟菜單Preferences -> Package Settings -> Emmet -> Key Bindings - User

將下面代碼貼進去儲存。更詳細的規則可以參考emmet-sublime文檔

[{    "keys": ["tab"],    "command": "expand_abbreviation_by_tab",    // put comma-separated syntax selectors for which     // you want to expandEmmet abbreviations into "operand" key     // instead of SCOPE_SELECTOR.    // Examples: source.js, text.html - source    "context": [{            "operand": "source.js",            "operator": "equal",            "match_all": true,            "key": "selector"        },        // run only if there‘s no selected text        {            "match_all": true,            "key": "selection_empty"        },        // don‘t work if there are active tabstops        {            "operator": "equal",            "operand": false,            "match_all": true,            "key": "has_next_field"        },        // don‘t work if completion popup is visible and you        // want to insert completion with Tab. If you want to        // expand Emmet with Tab even if popup is visible --         // remove this section        {            "operand": false,            "operator": "equal",            "match_all": true,            "key": "auto_complete_visible"        }, {            "match_all": true,            "key": "is_abbreviation"        }    ]}]

 

jsformat

jsformat是sublime上js格式化比較好用的外掛程式之一，通過修改它的e4x屬性可以使它支援jsx。

安裝

command+shift+p -> install package -> jsformat

配置

開啟菜單Preferences -> Package Settings -> JsFormat -> Settings - User，將下面代碼貼進去儲存。

{  "e4x": true,  // jsformat options  "format_on_save": true,}

 

 

sublime3 支援jsx es6文法