2019独角兽企业重金招聘Python工程师标准>>>

Atom 安装配置

本文参考：链接

Atom 是一款优雅迷人的开发IDE,尤其是react native开发

关于atom 的介绍这里不做叙述，仅对Atom+ Nuclide 的安装和配置做个笔记

一、atom 安装

1. 去官网下载点击链接
2. 安装

二、Nuclide 安装配置

Nuclide 介绍

Nuclide 是 Facebook 官方推出的一套基于 Atom 的开发工具集。用于开发基于 Hack 的 Web 应用。提供自动完成和 JavaScript 类型检查，内建 React 开发支持，并支持 Facebook 最新的 React Native 库，支持 Facebook 的 Flow JavaScript 类型检查器。

优点如下：

1. 提供自动完成和 JavaScript 类型检查
2. 支持 Facebook 的 Flow JavaScript 类型检查器。
3. 方便的 debug
4. 进行版本控制，方便 diff
5. iOS 模拟器 Log

Nuclide 安装准备工作

1. 如果电脑没有安装过 watchman 和 flow，安装一下。

    brew install watchman
    brew install flow

2. 不是最新的更新watchman、flow

    brew upgrade watchman
    brew upgrade flow

3. 安装fbjs

    npm install fbjs

Atom 安装 Nuclide

1. 打开Atom,安装Nuclide 插件

   这里介绍一下稍微介绍一下atom相关设置，以防有些同学第一次接触atom，不知道如何安装atom插件

   如图所示，点击Atom 、Preferences会调出atom的Settings界面，如图中右边圈出所示：有 Core , Editor,Keybindings,Packages,Themes,Updates,Install。其中Packages可以管理插件包、Themes主题、Updates更新、最后一个Install就是用来安装插件

2. 在“Install”页面中搜索“nuclide”插件并安装。

3. 安装完毕后打开 Atom，可以发现顶部菜单栏多了个“Nuclide”

Nuclide 配置

上面已经完成了Nuclide的安装，但是我们还需要对Nuclide进行一些配置

1. 安装相关依赖包

   在atom的Settings界面中选择“Packages”（上面介绍了如何调出atom的Settings）,找到Nuclide插件，

   点击Settings，勾选“Install Recommended Packages On Startup”关闭 Atom，再次打开这些依赖包便会开始自动安装。

   安装完毕后会看到界面上多了一条额外的 ToolBar。

   有兴趣的小伙伴可以研究一下那些ToolBar，反正我是没咋管，嘿嘿！

2. 配置flow

   为什么要配置flow？配置flow有什么用？ 配置flow是用于Nuclide检查错误的！

   在终端中执行 which flow 命令查看 flow 路径

    linhuadeMacBook-Air:~ linhuahu$ which flow
    /usr/local/bin/flow

   滚动到 Nuclide-flow 这个区域，将上面查询到的 flow 路径填到 Path to Flow executable 中去。

   这个时候去打一个错误代码，发现还是不能进行错误提示喔（因为还没配置完，不过不要担心，第一次嘛，万事第一次难嘛）继续配置：

   • 用Atom 打开一个react-native项目，找到.flowconfig，查看需要的 flow 版本。比如下面显示为：0.42.0

       [version]
       ^0.42.0

   • 查看本机的flow，前面准备工作有安装flow，在终端中运行 brew info flow，发现本机版本为0.48.0，版本高于项目的，

       linhuadeMacBook-Air:~ linhuahu$ brew info flow
       flow: stable 0.48.0 (bottled), HEAD
       Static type checker for JavaScript
       https://flowtype.org/
       /usr/local/Cellar/flow/0.48.0 (8 files, 6.9MB) *
         Poured from bottle on 2017-06-22 at 00:58:32
       From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/flow.rb
       ==> Dependencies
       Build: ocaml ✘, opam ✘
       ==> Caveats
       Bash completion has been installed to:
         /usr/local/etc/bash_completion.d
     
       zsh completions have been installed to:
         /usr/local/share/zsh/site-functions
       linhuadeMacBook-Air:~ linhuahu$         

   • 运行如下命令安装 0.42.0 版本

       linhuadeMacBook-Air:~ linhuahu$ npm install flow-bin@0.42 -g
       /usr/local/bin/flow -> /usr/local/lib/node_modules/flow-bin/cli.js
       + flow-bin@0.42.0
       added 1 package in 4.045s

   • 随便在页面上写上一个错误代码，有提示了

   Nuclide配置到现在差不多了，大伙可以试试代码补全、跳转等功能了，懒得贴图了

Nuclide 运行调试程序

1. 我们可以直接通过 Nuclide 运行项目，而不需要使用 XCode。

   • 使用快捷键 command + shift + p 打开终端选项（command palette）并输入如下命令：react native start
   • 选择 Nuclide React Native: Start Packager
   • 打开终端，进入到项目目录
   • 执行如下命令则启动 iOS 模拟器运行程序：react-native run-ios(你也可以跑安卓的)

2. debug调试程序

   • 使用快捷键 command + shift + p 打开终端选项,并输入如下命令：react native debug
   • 选择 Nuclide React Native: Start Debugging
   • 在模拟器中按下快捷键：Command+D，选择 Debug JS Remotely
   • 这时会发现 Nuclide 中自动加载了 debug 窗口
   • 我们可以在代码中添加断点。在模拟器上使用快捷键 Command＋R 重新刷新页面，可以发现程序运行后会停留在断电位置。

3. Element Inspector（自己研究吧，基本够用了）

三、autocomplete-paths 插件

autocomplete-paths是自动补全文件路径的，很实用，也很简单。这里不做介绍了，安装就好了

四、hyperclick和js-hyperclick

跳转对于调试代码和阅读代码非常重要, 当然使用插件, 需要下载hyperclick和js-hyperclick, 就可以通过引用跳转到需要类和方法.

五、atom-beautify

保存的时候自动对齐

注意：atom-beautify设置

    Default Beautifier 选择JS Beautify
    Beautify On Save 选中

六、script

转载于:https://my.oschina.net/KJhulinhua/blog/994956