sublime +react+es6开发环境

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了sublime +react+es6开发环境相关的知识,希望对你有一定的参考价值。

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关掉,否则报一堆警告错误。

以上是关于sublime +react+es6开发环境的主要内容,如果未能解决你的问题,请参考以下文章

sublime 玩转react+es6

sublime3 支持jsx es6语法

Sublime运行ES6

玩转 sublime3 第二弹 ES6环境

React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE

浅谈“sublime中”babel的配置