身思乐,人事爱,稳恒不言败!

Sublime Text3关于react的插件——react语法提示&代码格式化

背景: 最近因为项目准备迁移切换技术栈到react~所以研究了一波sublime关于react的插件,很多推荐已经写得很详细,这里就补充一下语法提示和代码格式化的插件。

1.sublime-react-es6: react  es6 语法提示

sublime-react一样,作为react语法提示,但是sublime-react-es6支持es6语法。

安装:

1.安装Sublime  Package Manager。通过命令行打开: ⌘+shift+p(MacOS/Linux)

2.输入install, 选中Package Control: Install Package

3.输入React, 选中React ES6 Snippets

安装以后即可使用,如图所示:

r1

其他代码段提示参见github:sublime-react-es6

2.sublime-jsfmt :jsx语法代码格式化

虽然HTML-CSS-JS Prettify和jsformat都支持jsx格式化,但是因为某些特殊字符处一定会有换行让人难以接受,例如import时:

r2

jsformat格式化后

类似的问题会导致代码校验时无法通过,并且在代码简洁程度上也让人难以接受。而sublime-jsfmt能够帮助搞定这个问题。上图格式化后会变成如下效果:

e3

所以这里强烈推荐安装sublime-jsfmt

安装方法:

1.打开命令面板Package Control: Install Package -> 输入jsfmt选中。

2.修改设置Preferences -> Package Settings -> Sublime JSFMT:

r4

3.设置代码快捷键:

a. Preferences -> Key Bindings – User

b.添加配置:   {“keys”:[“ctrl+q”],”command”:”format_javascript”}

设置后即可选中代码再通过快捷键格式化代码~

其他的ES6、React.js、jsx代码高亮等可以参见Sublime Text 3 搭建 React.js 开发环境

from:http://www.jianshu.com/p/ecf6c802fdc5