Atom开发ReactJS自动报错插件正确配置~

发表于   |   分类于   |  

1.安装language-babel插件

2.Atom设置

在Atom的language-babel的Setting中将Allow Local Override打勾

3.添加.languagebabel文件

在你的项目根目录建立一个.languagebabel文件，配置类似如下实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "babelMapsPath":                      "relPath",
  "babelSourcePath":                    "relPath",
  "babelTranspilePath":                 "relPath",
  "babelMapsAddUrl":                    true|false,
  "createMap":                          true|false,
  "createTargetDirectories":            true|false,
  "createTranspiledCode":               true|false,
  "disableWhenNoBabelrcFileInPath":     true|false,
  "projectRoot":                        true|false,
  "suppressSourcePathMessages":         true|false,
  "suppressTranspileOnSaveMessages":    true|false,
  "transpileOnSave":                    true|false
}

4.添加.babelrc文件

在你的项目根目录建立一个.babelrc文件，配置类似如下实例：

1
2
3
{
  "presets": ["react"]
}

5.用atom编辑jsx

用atom编辑jsx文件时，要注意右下角下图所示这个地方，系统要以Babel ES6 JavaScript方式打开的才会使用到language-babel插件，如果不是，请点击更改。

6.完成配置

配置完毕后，你可以测试一下，写一个js或jsx文件，然后按保存，如果有问题的话，系统会在右上角弹出对话框，告诉你编译失败并且提示错误信息，光标也会定位到出错的位置。

~ End ~