Tutorial: Setting-Up Atom text editor for Particle Development (OSX)

Tutorials
1

Atom text editor

Atom is an amazing open source text editor, that is also fully customizable for Particle development. Particle is already offering Particle Dev app (witch is based on Atom). So if you want to quickly get started with writing your Photon/Core code, go ahead and use the Particle Dev app, it is easy to use.

So… wait a minute, why write a tutorial on Atom then?

Well… if you’re like me, and you love customizing things to your liking, then give this tutorial a shot. You will learn how to setup Atom so you can compile and flash your Photon/Core apps, get browser access to https://docs.particle.io, as well as set-up terminal window for CLI commands all this within Atom itself.

Steps Overview:

  1. Download the latest Atom text editor
  2. Install the necessary Spark(Particle) Atom pkgs
  3. Install the browser-plus pkg and terminal-plus pkg

Step 1: Download the latest Atom text editor version

The latest Atom text editor version can be found HERE Go ahead and install the latest version of Atom for Mac.

Step 2: Install the necessary Spark(Particle) packages for Atom

There are a few packages that you need to install within Atom, in order to use it just like the custom Atom based Particle Dev app.

Upon opening Atom you can close the open Atom window (do not quit Atom itself). Then go ahead and click on the “Atom” menu button on the toolbar, then “Preferences”. This will open a new window with a “Settings” tab. This is where you will choose what packages to install to setup Atom to your liking.

Click on the “Install” button (middle column) within this new settings window. In the search field, go ahead and search for “Spark”. Install the following packages:

Additionally you must also install the tool-bar package, this will give you the awesome toolbar (used for things like: compile, flash, select Core/Photon etc…) that is found in the Particle Dev app.

Step 3: Install the browser-plus pkg and terminal-plus pkg

Finally install the browser-plus pkg and terminal-plus pkg for some awsome inside Atom features.

The “terminal-plus” window can be open inside Atom by clicking on the small “+” button that is found on the new toolbar installed at the bottom of your Atom workspace.

For more info look at this picture:

Now… all what is left to do is to configure the “browser-plus” with a keymap of your choice, so you can open it in a window inside Atom. The default keybinding that is set in the “browser-plus pkg”, is “ctr-alt-o”. This keymap can be changed to something else if you want. In my case this coincided with the keybinding for opening a “Remote-FTP” window. “Remote-FTP” is another Atom pkg that can be installed. Thus i had to change the keymap to something else.

To change the keymap, follow the steps below…

Go to “Atom” menu in the menu bar, then click on “Preferences”. There we have to click on “Keybindings” so we can create are own keymap to open the browser-plus window. In the “Keybindings” window, go ahead and click on the link to “your keymap file”.

Here… you can create a specific keybinding to use with “browser-plus”.

Template:

    'atom-workspace':
  'your_shortcut': 'browser-plus:open'

Feel free to change the “your_shorcut” text with the keymap that you would like to use for the “browser-plus” window.

Workspace Example

Now you’re all set to go to war and create amazing Particle based projects !!

Here’s how the Atom Workspace could look like with the “browser-plus” and “terminal-plus” windows opened:

Additional Atom Packages to Install

There are some additional packages that can be installed to make the toolbar more useful…

"tool-bar-main" (for adding basic buttons like save, open, find etc…)
"flex-tool-bar" (for adding custom buttons, see description when installing)

NOTE

If for whatever reason you get some errors about “incompatible native modules”, click on the red bug icon in the status bar and then choose “rebuild modules” button. This should resolve the issue.

Don’t forget to keep Atom and the packages installed up-to-date. This way you can benefit from the latest bug fixes and new features.

Cheers! :beers:

9 Likes
2

I’d love to see a DFU-util button in the toolbar. Make a mistake and cause your device to go into blocking, not flashing from the cloud properly or whatever…plug your photon/core in and hit the dfu button. Get a prompt for what you want to flash, tinker, newest firmware, etc and watch it happen. Much better than opening Cli and so on. Something small but could be helpful for someone that is struggling. If I had the skills I’d do it myself but I’m focused on learning more c++ and such.

2 Likes
3

have downloaded and installed all the packages but Atom looks nothing like your example.

1 Like
4

@tezza you are 100% right! Sorry about that, and thank you for pointing it out. After installing those pkgs you have everything that you need now to set it up like mine. I updated the tutorial to reflect the additional needed information.

Basically…you can set your window up like mine, by opening a “browser-plus” window and a “terminal-plus” window.

For the “browser-plus” window, you could use the default keymap which is “ctr+alt+o”. If for whatever reason it does not work, look in the tutorial so see how you can set the keymap to something that works for you.

The “terminal-plus” window, can be opened by clicking on the “+” button on the new toolbar that appears at the bottom left side of your Atom Workspace window. See photo in the tutorial…

Hope this clarifies… :stuck_out_tongue_winking_eye:

Cheers! :thumbsup:

5

you also forgot one other package, language-particle. found it in the other thread.

6

@tezza

Yup! Again you’re right…Updating as “we speak” LOL :clap:

Version 3.0 coming up… :laughing:

Thank you!

7

Your welcome… :grinning:, now just have to get the menu options set up, cant find the flash or compile buttons.also the terminal-plus doesnt work in windows 10.

8

@tezza

Hmm…those should appear automatically after you install “tool-bar” and restart Atom…

Try “ctr+alt+t” which is the default keybinding for the “tool-bar” pkg. It should toggle it on/off.

For Windows 10 I have no idea how to get terminal. But try to search a DOS window package or something…assuming that you set up the Particle CLI for Windows already.

9

Hmmm. shifted the menu icons to left side but it doesnt change the icons from the standard ones.
Have installed the CLI may be something in win 10.

10

Nice post. Im curious as why you used “Remote-FTP” window? Is it more secure or something? Thanks.

11

@freddyroosevelt

No particular reason really. Just thought it is convenient to have an FTP window inside Atom for web development. This way, I could work on “html” code, and then upload my website source code to my domain server, all in one window. :stuck_out_tongue_closed_eyes:

1 Like
12

oh ok lol. im about to download it since i will need it also for html code. Thanks again and keep up the tuts. Us noobs need them hahaha

1 Like
13

@freddyroosevelt

HAHAHA ! Trust me i’m a noob myself when it comes to Particle Development…but I love learning new stuff, and Particle is AWESOME they have amazing documentation :clap: :stuck_out_tongue_closed_eyes:

2 Likes
14

Thanks for this tutorial! Just FYI you don’t need particle-dev-release-notes package :smile:

Other useful package (which is bundled with Particle Dev App) is switch-header-source.

For making the toolbar more useful you may want:

1 Like
15

looks like its not compatible with windows 10.
it says

16

@suda

Thank you for clarifying :smile: …I wanted to be on the safe side…that’s why I installed whatever looked like it’s made by Spark (Particle). Removed the not needed pkg from the tutorial.

I’m installing the other ones as I’m replying…

Cheers! :beers:

17

@tezza

Bummer :pensive: …I wish I’d have a PC to play around and see if I can help.

For now it looks like it’s better (headache-free) to stick with Particle Dev for Windows…

18

i have a laptop with windows 7 will give it a try on that over the next couple of days.

19

@tezza

Worth to try.

The other thing that you can do…but it definitely becomes more involved is to install Linux on one of your machines by using a virtual machine. I know VirtualBox (made by Oracle) is free and you could install a Linux version on it to play around. Looks like Atom works on Linux as well.

Anyway this becomes more involved for sure, but it’s another idea…

20

Have used linux for a long time… :smiley: and have a couple of VM’s set up already on virtual box.just that things are sort of hectic at the moment.