1.babel-sublime
支持ES6, React.js, jsx代码高亮,对 JavaScript, jQuery 也有很好的扩展。关于 babel 的更多介绍可以看这里:为什么说Babel将推动JavaScript的发展
安装
PC:Ctrl+shift+p
Mac:Cmd+shift+p
打开面板输入babel安装
配置
打开.js, .jsx 后缀的文件;
打开菜单view, Syntax -> Open all with current extension as… -> Babel -> JavaScript (Babel),选择babel为默认 javascript 打开syntax
2.sublimeLinter-jsxhint
JSX 代码审查,实时提示语法错误, 帮助快速定位错误点.
安装
PC上ctrl+shift+p(MacCmd+shift+p)打开面板输入sublimeLinter-jsx安装(依赖于 sublimeLinter)
安装 node.js
安装 jsxhint
3. 修改 Emmet 兼容jsx 文件
emmet 作为前端开发必备插件之一非常方便快捷,通过修改默认的 sublime就可以在 jsx 文件中快速通过 emmet 编写自定义组件。
安装
PC上ctrl+shift+p(MacCmd+shift+p)打开面板输入emmet安装
使用方法
打开 preferences -> Key bindings - Users,把下面代码复制到[]内部。
{
"keys": [
"super+e"
],
"args": {
"action": "expand_abbreviation"
},
"command": "run_emmet_action",
"context": [{
"key": "emmet_action_enabled.expand_abbreviation"
}]
},
{
"keys": ["tab"],
"command": "expand_abbreviation_by_tab",
"context": [{
"operand": "source.js",
"operator": "equal",
"match_all": true,
"key": "selector"
}, {
"key": "preceding_text",
"operator": "regex_contains",
"operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
"match_all": true
}, {
"key": "selection_empty",
"operator": "equal",
"operand": true,
"match_all": true
}]
}
使用super+e触发 emmet;正则判断用 a,div,span,p,button标签默认tab 触发;默认 class 修改为 className。
注:
supre+e 在 PC 上指的是win+e(pc 建议修改为emmet 默认按键 ctrl+e),在 mac 上指的是cmd+e
以上规则来源于StackOverflow,正则小有修改
4. JsFormat 格式化 js 代码
jsformat 是 sublime 上 js 格式化比较好用的插件之一,通过修改它的e4x 属性可以使它支持 jsx。
安装
PC上ctrl+shift+p(MacCmd+shift+p)打开面板输入JsFormat安装.
使用
打开preferences -> Package Settings -> JsFormat -> Setting - Users,输入以下代码:
{
"e4x": true,
// jsformat options
"format_on_save": true,
}
原文地址:https://segmentfault.com/a/1190000003698071
亲测非常好用。
统统安装了一遍,然后错误有提示,输入有提示。
每次按保存都会更新格式。
大大提高开发效率。