config ATOM & support JSX

此文完成ATOM的React.js开发环境配置,包括对js jsx代码高亮、代码规范、格式化、还有一些自动闭合和提示的东西。

主要的流行的插件:

这下面几个插件是目前下载量很高的。

  • React
  • language-babel
  • atom-beautify
  • linter: eslint

经过实际的测试和考量,发布解决方案:

只使用:

react做代码高亮和一些提示,react的高亮比language-babel做的好。
atom-beautify的代码格式化总是出现问题,而且使用自动保存格式化,很慢,所以现在抛弃之。不过对于css和html还是可以一用的。禁用对js和jsx的格式化。
language-babel 可以彻底的不用了。

配置

reactlinter 配置

react也就没有什么配置可选的,但是功能上很健全的,代码高亮做的很好。

linter:首要安装linter基础包,然后是linter-eslint。配置也就几个选项,使用fix errors on save挺好的。

主要配置在于ESLint:http://eslint.org/

首要是安装ESLint,没的说,全局安装就好。

创建.eslintrc.js文件,在做深入配置。不用自己配置规则,使用airbnb的,对于ESLint的话,

{
    "extends": "airbnb",  // 直接用airbnb的规则就好了。
    "plugins": [
        "react"
    ]
};

配置完成后:

linter-eslint会自动提示错误,可以在没有加分号的地方,自动添加。缩进也会按照airbnb的规则进行。

完美,没有瑕疵。

Reference:

http://eslint.org/docs/user-guide/getting-started

其余:

Compiling Vs Transpiling

transpiling这个此出现很频繁,但是词典却没有释义。

尽管术语“traspiling"从上世纪就已经出现了,但是似乎对于它到底是什么意思以及”transpiling"和“compiling"有什么区别仍然存在很多疑惑。 首先,transpiling是一种特殊的compiling。这很有助于让我们了解到我们是在谈论差不多类似的东西,实际上它就是一种很特别的编译。但区别于通常意义的编译我们该如何定义它呢? Compiling这个术语通常是将一种语言编写的源代码转换为另一种。
Transpiling是一个特定的术语,用于将一种语言编写的源代码转换为另一种具有相同抽象层次的语言。
因此(简单来说)当你编译C#时,编译器将函数体转换为中间语言(IL)。这不能称为transpiling,因为这两种语言的抽象层次完全不同。 当你编译TypeScript时,编译器将它转换为JavaScript。二者的抽象层次相同,所以你可以称之为transpiling。 编译器和transpiler都可以在处理过程中优化代码。 其他一些常见的可以称为transpiling的组合包括C++到C,CoffeeScript到JavaScript,Dart到JavaScript以及PHP到C++。

原文链接: https://www.stevefenton.co.uk/2012/11/Compiling-Vs-Transpiling/

其它插件:

https://github.com/millermedeiros/esformatter

https://atom.io/packages/language-jsx

谷歌关键词:atom react jsx 还是有好的收获的。

https://www.reddit.com/r/reactjs/comments/3x0ipa/pluginformattingreactjsxjsinatom_sublime/