A Quick Look At The New Atom IDE

Atom is a free and open-source text editor for macOS, Linux and Windows. It is preferred by many developers for its great design, clean interface, and the excellent ecosystem of community-built packages.

In September 2017 GitHub and Facebook announced the release of Atom-IDE - a collection of optional packages that bring IDE-like functionality to Atom. In this article we are going to show you how to get started with Atom-IDE and look at some of the new features.

Installation

Installing Atom-IDE is free and takes less than 5 minutes. Here is what you need to do:

1. Download Atom Beta 1.21.
2. Go to the Packages tab-> Settings View-> Install Packages/Themes.
3. Search for and install the atom-ide-ui package to bring in the IDE user interface.
4. Atom IDE works with a selected number of languages, you will need to install each language pack separately.

Supported Languages

The initial release comes with 5 official language packs. They enable smarter context-aware autocompletion, code navigation, and error handling for that specific language.

• TypeScript and JavaScript (ide-typescript)
• Flow (ide-flowtype)
• C# (ide-csharp)
• Java (ide-java)
• PHP (ide-php)

There are also a number of community-made packages for other languages.

New Features in Atom-IDE

Autocomplete

Autocomplete is included in all the ide packages. Just start typing and it will show you suggestions, matching what you have typed so far.

Syntax checking

Click on the red exclamation mark and yellow warning triangle at the bottom left of your Atom window and you will see the Diagnostics pane. It shows you all the errors and warnings in the current file. You can also right click them to move to that line in your code.

Find All references

This new feature shows you all the references of a class or variable. Select the class or variable you are interested in, then right-click it and select Find references.

Hover

When you hover the mouse over a type or other supported object, you can see some additional information about it, such as its properties and methods.

Outline view

Another new feature which lets you see a tree-based outline view of your document. It allows you to quickly look through your classes, functions and other code blocks.

Reference highlighting

Move your cursor to a variable and you can highlight other references of that variable. You can also CTRL+ left click on a class or variable reference to navigate to the place it is defined.

Popular Atom packages

Beside the atom-ide-ui, there are lots of other community-made packages that can be used to add new features to Atom. Here are some of our favorites:

• minimap - It provides an eagle-eye view of your document, which makes it easily scrollable.
• highlight-selected - With this package, when you double click a word, all the matching words in your document become highlighted.
• project-manager - Gives you fast access to all your projects and an easy way to manage them.
• atom-beautify - An extension for beautifying your code. Works with HTML, CSS, JavaScript, PHP and many others.

You can browse more packages in the atom package store.

Conclusion

The release of Atom-IDE offers a number of new features, which can make coding a much more pleasant and enjoyable experience. Right now it supports only a couple of the most popular programming languages, but thanks to a big and active community we can expect even broader language support in the future.

If you enjoy the Atom editor, you should absolutely give Atom-IDE a try!