Just look at this beauty!

My SublimeText-killer Atom setup for developing React apps

Carlos Vega
Unhandled Exception
2 min readMar 18, 2016

--

TL;DR: VS Code is good for ng2 apps but isn’t good enough for react. Just install Atom (if you haven’t already, open a terminal and run: apm install atom-beautify autoclose-html highlight-selected language-babel react linter linter-eslint minimap minimap-highlight-selected pigments seti-ui monokai-seti

I’ve been a SublimeText fan for a while. There was something about WebStorm that didn’t quite fit my idea of what I was looking for in a text editor and both Atom and, more recently, Visual Studio Code had their own issues.

Time passed and both projects (Atom and VS Code) became mature text editors with active communities eagerly building hundreds of plugins to achieve almost any task you could imagine.

During the past year and a bit I’ve been jumping between ST, Atom and VS Code unable to decide between them. On one hand, ST is a mature project (so mature it seemed to be dead, until recently), on the other hand, both Atom and VS Code embrace, and are built on top of, modern web technologies and are serious OSS initiatives backed by big players in the industry (Github and MS).

I used to, and still, do a lot of Angular and VS Code provides a remarkably good developer experience for Angular 2 developers. IntelliSense, code completion and TypeScript integration, just to mention some features, makes creating ng2 app in VS Code a delight. Sadly, I can’t say it provides the same experience for developing react apps.

Some months ago I looked back at Atom and its packages hoping that it could address my needs and it did, so I decided to publish the list of packages that have been making my life easier when developing react apps.

So, without any further introduction, here it is:

  • atom-beautify
  • autoclose-html
  • highlight-selected
  • language-babel
  • linter
  • linter-eslint
  • minimap
  • minimap-highlight-selected
  • monokai-seti
  • pigments
  • react
  • seti-ui

With these packages you’ll get linting, a slick UI and the familiar monokai theme, ES6/ES7 syntax highlighting support, auto close for tags, code beautification, react support(snippets, auto-completion and syntax highlighting), and the useful minimap most of us are used to.

What’s you editor of choice and why? Which packages do you use? Am I missing something?

Let your responses flow and happy coding!

Disclaimer: I’m not a native English speaker, so feel free to point out grammatical and/or syntactical errors. Every respectful comment is deeply appreciated.

--

--

Carlos Vega
Unhandled Exception

Software engineer in love with web development. Avid reader and occasional blogger. He will blog about anything that crosses his mind. Costa Rica.