配置 Node.js 开发环境——使用 Atom — 码志 - 推酷
配置 Node.js 开发环境——使用 Atom — 码志
Node.js 的开发环境选择很多，比如 WebStrom/Visual Studio Code/Atom/HBuilder，还有万能的 Vim/Emacs 等等。
根据我个人的试用，WebStorm 应该是配置起来最省心，用起来最顺手的选择，而且有 Android Studio 和 PyCharm 的使用经验上手毫无障碍。但一来 WebStorm 价格不菲，二来最近刚刚被 Atom 圈粉，而 Visual Studio Code 和 Atom 又是这些编辑器里面与 Node.js 渊源最深的，所以最终决定最近在学习 Node.js 以及写一些练手项目时以使用 Atom 为主，Vim 为辅。
安装 Atom 插件
主要是它们：
atom-ternjs 用于 Javascript 和 Node.js 的自动补全
script 用于一键运行程序
自动补全插件
Atom 上的 Javascript 自动补全主要依赖 atom-ternjs 插件，貌似没有什么其它更好的选择。（配合 autocomplete-plus 插件使用，Atom 默认已经安装。）
安装方法与安装其它插件无异，主要有三种选择：
图形界面。 在 Atom 的 Settings & Install 里搜索找到 atom-ternjs 并安装。 这种方法在国内需要科学上网。
apm install atom-ternjs
这种方法在国内也需要科学上网。
本地安装。
cd ~/.atom/packages
git clone :tststs/atom-ternjs.git
cd atom-ternjs
npm install
一键运行插件
安装 script 插件，然后有两种方法可以一键运行/结束程序了：
Packages & Script & Run Script/Stop Script。
ctrl + shift + b
atom-ternjs 插件对项目配置做了可视化，可以通过菜单来操作。
File & Open 打开 Node.js 项目文件夹。
Package & Atom Ternjs & Configure project
Save & Restart server 之后会在项目根目录生成 .tern-project 文件，该配置文件里常用字段：
ecmaVersion
选择 ECMAScript 版本
browser 表示原生 js 补全，jquery 代表 jQuery 补全
loadEagerly
指定加载解析的 js 文件
排除加载的文件
ternjs 使用的插件，配置的扩展补全的库等
目前插件的配置页面暂不支持 plugins 部分配置，需要手动配置。 比如一份最简单的 .tern-project 文件的示例：
&ecmaVersion&: 6,
&libs&: [],
&loadEagerly&: [
&plugins&: {
&node&: {},
&node-express&: {}
它代表使用 ECMAScript 6，递归加载项目文件夹下所有的 js 文件（包括 node_modules），使用 ternjs 的 node 插件用于 Node.js 核心库补全，node-express 插件用于 express 补全。
这部分推荐详细阅读一下
的 README，会更清楚怎么回事。
创建/修改 .tern-project 文件后，执行 Packages & Atom Ternjs & Restart server。 进行完这一步以后，顺利的话你应该已经能愉快地看到原生 js 和 Node.js 的自动补全了；不顺利的话，看看下面的 Q & A 一节，有我遇到的问题的记录。
最终效果：
在 Mac 下按步骤官方的 README 操作后自动提示出不来？
我在 Windows 下按官方指南配置 atom-ternjs 倒是很顺利，按默认步骤操作完，然后在 plugins 一节添加 node 就一切 OK 了，但在 Mac 下貌似不配置 loadEagerly 为 **/*.js 智能提示出不来。
另外就是 .tern-project 文件放置的位置，最好与 package.json 放在同级目录。
安装 atom-ternjs 总是失败。 科学上网。
，作为主力编辑器，为何不使用它来写 Node.js 呢？
别提了，如果没有把 .tern-project 文件配置好，打一个 . 之后能卡五秒，严重拉低 Vim 编辑速度。
不过 tern_for_vim 也有一个好处，那就是不用像 atom-ternjs 这样每次改完配置后都要手动 Restart server。
ternjs 功能强大，包括：
自动补全方法和变量
查找引用/定义
显示方法详情，包括方法签名和文档等
简单的重构
把它用好了还是能不错地提升开发效率的。
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致23152人阅读
iOS进阶（19）
综合（14）
来自Leo的原创，转载请著名出处
我的StackOverflow
这个系列的文章
工欲善其事，必先利其器
好像在哪听到一句话，”满级程序员不需要IDE，不需要自动补全，不需要静态语法检查”。对于这种言论，我只想说bullshit。
IDE对于开发还是很重要的，而React Native开发官方推荐使用Atom＋Nuclide插件。本文会详细的介绍，如何配置好这个环境，并且以一个示例工程为例，介绍如何利用这套环境进行开发，与运行，调试，断点。
使用Nuclide你能够
配合flow进行静态语法检查，自动补全
方便的debug
进行版本控制，方便diff
iOS模拟器Log
对了,为了从零开始，我卸载了之前安装好的atom和对应的插件
Mac/Windows/Linux
推荐还是用Mac开发React Native，因为iOS运行需要Mac的环境。而且，用Mac的话，也比较省心。
本文的所有流程，均以Mac为例
本文默认读者已经安装好了React Native，如果没有安装好，可以按照的讲解安装，很简单，本文侧重IDE
注意，如果没有安装watchman 和Flow，建议安装
安装watchman－自动监听文件内容变化，刷新数据
brew install watchman
如果提示没有安装brew
/usr/bin/ruby -e "$(curl -fsSL /Homebrew/install/master/install)"
安装flow－提供静态语法检查，自动补全
brew install flow
如果你之前安装了flow或者watchman,建议更新到最新版本
brew upgrade watchman
brew upgrade flow
这个没什么难的，解压缩之后，把Atom从下载目录，拖到应用程序目录即可。
打开Atom，你看到的界面应该是这样的
安装Nuclide
这里，我们在Atom中，用图形化界面来安装。
点击菜单栏：Atom-&Preferences,或者可以”Command+,”快捷打开
然后，在Install Packets的输入框中，输入nuclide，出现的第一个就是我们想要安装的，点击install
默认安装nuclide之后，会安装一大堆的依赖包，安装完成后
可以看到，红色部分是额外的Toolbar可以快捷打开一些选项，小的红色框里多了一个nuclide选项。
如果没有默认安装这些依赖包，可以选中,Packages-&Settings View-&Manage Packets
然后，搜索nuclide，再nuclide package上双击，进入设置
勾选Install recommended packets on startup
退出Atom，再打开，会发现自动安装这些依赖包
新建一个工程
然后，打开Atom，点击Add project folder
再在右侧目录双击index.ios.js,你看到的应该是这样的界面
我们在这一行上面，输入fun
class Demo extends Component {
然后，会车，你就会发现自动生成了方法
function functionName() {
自动补全肯定没有XCode 或者Android Studio来的那么强力，不过有总比没有好对吧。
将光标放到上文提到的functionName上，你会发现如图，就是出现了这个方法的类型
这时候，点击出现的针头，那么这个类型标注就会一直显示在界面上
我们在function里随便输入
function functionName() {
然后，command+s保存文件，这时候，正常会出现如下检查错误
1，表示这一行有错误，点击那个红色的三角图标，你可以看到详细的错误描述
2，表示整个工程的错误
点击2，你会看到错误和警告的列表
如果这里，没有检查出错误
打开终端，cd到工程的根目录,例如我的
/Users/huangwenchen/Desktop/Demo
然后，用终端检查flow能否正常工作
Leo-2:Demo huangwenchen$ flow
如果出现错误
.flowconfig:97 Wrong version of Flow. The config specifies version ^0.25.0 but this is version 0.20.1
Leo-2:Demo huangwenchen$ brew update flow
证明你本地的flow版本和react native默认使用的flow版本不一致，通常，更新到最新版本即可
Leo-2:Demo huangwenchen$ brew upgrade flow
==& Upgrading 1 outdated package, with result:
flow 0.25.0
==& Upgrading flow
==& Downloading https:///bottles/flow-0.25.0.el_capitan.bottle.tar.gz
==& Pouring flow-0.25.0.el_capitan.bottle.tar.gz
==& Caveats
跳转到方法或者类型定义
使用command+鼠标左键
在Nuclide运行项目
第一步，运行react native packager
点击 command + shift + p打开command palette（打开终端选项），然后输入
react native start
然后，选择
Nuclide React Native :Start packager
如果，出现错误
/Users/huangwenchen/Desktop/Demo/node_modules/react-native/local-cli/cli.js:123
class CreateSuppressingTerminalAdapter extends TerminalAdapter {
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Function.Module.runMain (module.js:501:10)
at startup (node.js:129:16)
at node.js:814:3
说明你node的版本太低,运行以下命令更新
sudo npm cache clean -f
sudo npm install -g n
sudo n stable
第二步，终端运行项目
cd到项目目录，执行
$ react-native run-ios
$ react-native run-android
在Nuclide中调试
执行完上面一步后，你应该会看到这样的模拟器界面
然后，在Nuclide中，点击 command + shift + p打开command palette（打开终端选项），输入react native debug
接着，点击模拟器，Command+D，选择Enable Remote JS debugging
这时候，你会看到，Nuclide中，加载了debug窗口
和很多IDE一样，在每一行左边左键可以添加断点了
同时，修改代码看看效果
function myLog() {
console.log("adtad");
class Demo extends Component {
render() {
&View style={styles.container}&
&Text style={styles.welcome}&
Welcome to React Native!
保存，点击模拟器，Command＋R，会发现，停在了断点处
其它的都是JS的调试技巧了，这里不再赘述，后面写博客的时候，遇到了再说。
Element Inspector
像网页调试，你可以再浏览器里动态修改网页的HTML代码，在React Native中调试你也可以
Command + shift + p然后打开如下图
接着，你就会发现像HTML的Element Inspector出现了，你可以看到视图的布局和对应的属性
Facebook出品的一般都容易安装，并且使用起来上手相对容易。本文更多的是对的总结，以及列出了我在安装使用过程中遇到的一些坑，希望能有些帮助。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：617442次
积分：9677
积分：9677
排名：第1433名
原创：270篇
评论：152条
文章：54篇
阅读：130695
阅读：2675
阅读：30347
文章：14篇
阅读：46405
文章：14篇
阅读：46241
文章：18篇
阅读：35594
(3)(2)(2)(1)(2)(4)(5)(6)(4)(5)(1)(2)(4)(8)(13)(11)(7)(6)(9)(10)(21)(15)(17)(10)(15)(15)(25)(27)(17)(3)