Out of the box, Atom is Git-aware, includes Markdown previews, auto-complete and more. It is designed to be hackable to the core.
What Atom Text Editor Offers?
At the time of writing this Atom Code Editor, over 7,000 packages and more than 2,000 themes had been published for Atom. The atom itself is created by bundling the core app with dozens of packages for each default feature.
These packages do things like add Markdown preview support, display your directory’s Git status, and control Find and Replace. They can be managed through the Settings view. Atom’s Settings view sets it apart because it includes a package manager by default, giving you access to the packages you have installed, as well as the thousands created by the community. You can browse and install these from within Atom.
You can open the Settings view by clicking Packages > Settings View > Open in your menu bar or by using the cmd+, keyboard shortcut.
With the Settings view open, you’ll find the Packages tab on the left. This will display all the packages you have installed and their type:
Community packages: Packages written by people outside of GitHub’s Atom team
Core packages: Developed by the Atom team and bundled with Atom
Development packages: Packages you have on your machine and use in Atom from a local source
From the Packages view, you can manage your installed packages by selecting to install/uninstall or disable/enable them. Clicking on a package in this view takes you to the package’s available settings (if any) as well as the README that describes the package. If you want to know more, you can click on the link and be taken to the package’s repository or issue tracker.
The Install tab in the Settings view connects you to the thousands of packages available for Atom. At the top, you’ll find featured packages, but you can also use the search bar to find the one you’re looking for.
Packages are published to Atom using Atom Package Manager (APM), which is included with Atom. You’ll find published Atom packages in the Install view, and they can also be found on Atom’s website.
Just like in the Packages view, clicking on a single package displays the README, so you can see what it does before you install it. It also links to the package’s code repository.
You can install new packages from the community in this view by clicking the Install button on a listed package. You can then manage packages from the Packages view.
In order to use a package you’re developing locally in Atom before you publish it with APM, you can link it to Atom using the APM CLI. For instance, from within the package’s directory in Terminal or Bash, use the following command:
$ apm link
Linked packages will show up in the Development Packages section in the Packages view. You can see linked packages with this command:
$ apm links
Themes in Atom
In the Install view, toggle the search bar to Themes to search the available Atom themes. Once you have themes installed, you can manage and set them as the current theme in the Themes view.
UI and syntax themes
Atom has themes for both the UI and the code syntax. The syntax themes style how the code looks in the editor itself, and the UI themes style how the rest of the Atom looks (e.g. the tabs and file tree).You can even make small changes to the Atom without creating a complete theme or package.
Alternative customization in Atom
To open your .atom configuration directory, click the ‘Open config folder’ button on the left side of the Settings view.
The init.coffee file allows you to add custom behavior to Atom every time a new window is launched. It’s executed after packages are loaded and any previous editor state has been restored.
To interact more with Atom text editor, you can use the Atom API. Documentation on the API is available on the Atom site.
Just like init.coffee file, styles.css is a file that is loaded after Atom starts up. The styles you add here will override or add onto Atom’s existing styles, and they will take effect immediately upon saving.
For example, you could change the editor’s background color by adding this CSS:
A quick way to find the property names in Atom is to make use of the fact that underneath Atom is Chromium, so you have access to DevTools. You can toggle DevTools on and off by pressing alt+cmd+I.
With DevTools open, you can use the magnifying glass to select elements in Atom and reveal their class or element names. Target them in your styles.css file to change their properties.
With Atom’s package manager and configuration files, you can customize your Atom environment right from within Atom.
The app works across operating systems. You can use it on OS X, Windows, or Linux.
Built-in package manager
Search for and install new packages or start creating your own—all from within the tool.
This product helps you write code faster with a smart, flexible autocomplete.
File system browser
Easily browse and open a single file, a whole project, or multiple projects in one window.
Split your app interface into multiple panes to compare and edit code across files.
Find and replace
Find, preview, and replace text as you type in a file or across all your projects.