My first week with Atom editor

My first week with Atom editor

In my previous post I summed up my favorite packages for the Sublime Text editor. I use the editor for minor edits in front end development (mostly in JavaScript). Atom is a new promising editor developed and maintained by Github. The first major version of Atom was released more than a half year ago and I thought now is the right time to try this editor.

From the beginning of using Atom, it impressed me. I felt like it is a very intuitive editor with great usability. I like that Atom has active community with often updates and improvements. I also really like Atom’s UI and how Atom visualizes errorsdiffs, etc.

Atom’s startup was extremely slow and I didn’t find out how to open files from different projects in current window in previous versions. Fortunately, these downsides are fixed in new version and I replaced Sublime editor with Atom. In one week of using Atom I used this list of packages.

General packages

Open-recent – open recent files in the current window

Minimap – a preview of source code

Split-diff – shows diff between two split panes

Minimap-split-diff – a minimap plugin for split-diff package

Editorconfig – plugin for EditorConfig, which helps developers define and maintain consistent coding styles between different editors and IDEs

Tool-bar – provides extensible tool bar

Tool-bar-almighty – adds many commonly used actions in the tool-bar

Highlight-selected – highlights selected text in opened file

Minimap-highlight-selected – a minimap plugin for highlight-selected package

Set-syntax – setting the syntax of the current file

Todo-show – finds all the TODO, FIXME, CHANGED, XXX, IDEA, HACK, NOTE, REVIEW comments in your project

Pigments – highlights color values

Minimap-pigments – minimap plugin for pigments package

Jumpy – jump between characters without using a mouse

Autoclose-html – automates closing of HTML Tags

Emmet – web development toolkit which greatly improves HTML & CSS workflow

Atom-terminal – Launches terminal from the current file

Terminal-plus – You can open the terminal in Atom editor

Linter packages

Atom editor provides all fundamental linters for front-end web development. Linter-eslintlinter-tidylinter-bootlintlinter-xmllintjsonlintlinter-csslintlinter-scss-lint, …

JavaScript packages

Language-babel – syntax definitions for ES6 JavaScript with React JSX extensions

Atom-ternjs – plugin for TernJS, which analyses your JS code on-the-fly and provides autocompletion, function argument hints, jump-to-definition, and various automatic refactoring operations

Hyperclick – Open variable’s definition

Prettier-atom – formatting JavaScript using prettier

Console-log – places your selected variable in console.log

Aligner – Align multiple lines and blocks

NEED A FULL STACK WEB DEVELOPER? LET'S BUILD SOMETHING.

GET IN TOUCH
5 COMMENTS
  • Clifford Fajardo
    Reply

    Thanks for your sharing your packages, along with the links to them!

    Check out the packages that I’ve been using for front end and full stack JavaScript development =)

    Blog post with list & YouTube video:

    http://cliffordfajardo.com/2016/atom-editor-review/

    1. Andrej Gajdos
      Reply

      I am glad you mentioned your video, because some of your tips are great 🙂

  • My favourite tools for OS X - Andrej Gajdos
    Reply

    […] Atom editor – text and source code editor. You can find list of my favourite packages in one of my previous post. […]

  • greggbrookline
    Reply

    Thanks for sharing – here are some updates

    nuclide – doesn’t entirely work until you upgrade to latest react.
    split-diff – uncaught exception when using nuclide
    compare-files – does nothing.

    Atom is a great editor as long as you have something like sublime text 3 to back it up when atom doesn’t work. You wrote this in January 2016 and now it is January 2017 and things seem to have become less stable. Would love to make Atom my main editor, but …

    1. Andrej Gajdos
      Reply

      Yes, I agree. When I switched from back-end to front-end development, I missed a proper IDE. My stack was html, css, less, sass, scss, javascript, es6, react. I started with Sublime editor and needed more than 30 packages to support this stack My Sublime Text packages for front-end web development. There were always couple of packages that didn’t work and decided to try Atom editor. I had the same problem with Atom and tried WebStorm Increasing productivity in JetBrains IDEs. I just installed couple of WebStorm plugins and it worked very well.

Leave a Reply

Your email address will not be published. Required fields are marked *

SIGN UP TO GET NEW POSTS IN EMAIL

Holler Box

Welcome! Do you mind if I ask you a few questions?

Sure!Not right now, maybe later?

How do you describe what you do for a living? (1/3)

I'm an owner/founderI'm a leader/managerI'm a developerI'm a recruiterI'm a designerI'm a bloggerI'm an artistOther

Which of these best describes you? (2/3)

I own my own businessI am employed full-timeI am independent contractor, freelancer, or self-employedOther

What's your BIGGEST challenge right now? (3/3)

I am looking for an adviceI need to grow my teamI am looking for someone technical who helps me turn an idea into an applicationI am looking for a developer who helps me build/update a website/web applicationI am looking for someone with a specific technical expertise or knowledge who helps me with a certain taskOther

Please tell me more

Finding a better jobFinding a better project/clientUnrealistic client's expectations or requirementsI don't have time to learn new technologiesI am not able to solve an issue/technical challengeOther

Please tell me more

Finding a developer for my clientAttracting the right candidatesOther

Please tell me more

What brings you to this website? (3/3)

Google or different search engineI want to learn web developmentOther

Please tell me more

Please tell me more

Name

Company

Email*

Phone Number

Holler Box
%d bloggers like this: