sublime +react+es6开发环境

本文介绍了如何在Sublime3中配置React和ES6的开发环境,包括语法高亮、JSX格式化、HTML标签自动补全以及ESLint的设置方法,提供了一个便捷高效的开发体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Babel

Sublime3才有的插件,支持ES6、JSX语法高亮。

菜单->View->Syntax->Open all with current extension as...->Babel->JavaScript(Babel) 高亮了有木有。


Babel

Babel-Sublime插件很好的支持了JSX语法的高亮显示,连包裹在组件中的HTML标签都能实现高亮显示,具体的插件安装以及设置方法就不多说了,自行看GitHub上的介绍吧,很简单。

//支持的代码片段如下
cdm→  componentDidMount: fn() { ... }
cdup→  componentDidUpdate: fn(pp, ps) { ... }
cs→  var cx = React.addons.classSet;
cwm→  componentWillMount: fn() { ... }
cwr→  componentWillReceiveProps: fn(np) { ... }
cwu→  componentWillUpdate: fn(np, ns) { ... }
cwun→  componentWillUnmount: fn() { ... }
cx→  cx({ ... })
fdn→  React.findDOMNode(...)
fup→  forceUpdate(...)
gdp→  getDefaultProps: fn() { return {...} } 
gis→  getInitialState: fn() { return {...} } 
ism→  isMounted()
props→  this.props.
pt→  propTypes { ... }
rcc→  component skeleton
refs→  this.refs.
ren→  render: fn() { return ... }
scu→  shouldComponentUpdate: fn(np, ns) { ... }
sst→  this.setState({ ... })
state→  this.state.

JsFormat

刚开始在JSX文件格式化后惨不忍睹,其实配置一个属性就可以支持JSX语法格式化。

菜单->Preferences->Package Settings->JsFormat->Settings-User加入以下代码

{
  "e4x": true,//支持jsx格式化
  "format_on_save": true//保存立即格式化,看个人喜好
}  
Emmet

这个html标签自动补全的神插件相信很多人都用上了,非常便捷,现在可以通过配置实现JSX的html内容自动补全。

菜单->Preferences->Key Bindings - User加上以下代码(keys就是触发自动补全的按键,可自定义)

[{
  "keys": [
    "tab"
  ],
  "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
  }]
}]
代码检查

1.首先安装SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint插件。

2.然后命令行全局安装

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint

3.以ES6语法检查为例,在项目工程根目录新建.eslintrc,输入

{
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
},
"rules": {
    "semi": ["error", "always"]
    }
}

详细配置参考 http://eslint.org/docs/user-guide/configuring

4.打开Sublime3,菜单->Tools->SublimeLinter->Toggle Linter...就可以打开js、jsx、es6检查规则。注意:当使用es6开发时务必把jshint关掉,否则报一堆警告错误。




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值