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

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

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

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

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

jsformat格式化后

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

jsfmt格式化后效果

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

安装方法:

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

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

代码复制请到sublime-jsfmt Setting中

3.设置代码快捷键:

a. Preferences -> Key Bindings - User

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

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


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本节索引 sublime Text3 插件的安装 代码编辑非常有用的5个插件 配置React 开发环境所需要的插件...
    南航阅读 43,897评论 7 24
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 13,868评论 1 34
  • 作为一个秒开的编辑器,用了就不想换呀,插件库也很强大,稍作配置就可以用了 本体 Sublime免费的,只是偶尔弹窗...
    玖零儛阅读 9,503评论 5 1
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 13,132评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 713,138评论 149 1,114