Save 10% on our Pro WordPress plugins with discount code: 10PERCENT
Web Dev + WordPress + Security

Tips for Atom Code Editor

[ Tips for Atom Code Editor ] For some of my tutorials, I use the Atom Code Editor. It’s not as easy as Coda, but it does provide a LOT more flexibility in terms of configuration and customization. Over the last couple of years, I’ve collected a handful of useful tips and tricks for dialing in the perfect Atom environment. Well, perfect for my own needs — your mileage may vary. So without further ado, let’s jump into some sweet Atom tips. I update this post with new tips as I get them.

Note: To open the Atom Settings page, visit File > Preferences.

Add custom themes

For tutorials, I prefer dark text on light background, so I go with the built-in “One Light” theme for both UI and syntax themes.

  • Settings > Themes > UI Theme > “One Light”
  • Settings > Themes > Syntax Theme > “One Light”

For my own use, I like atom-material-ui, atom-material-syntax, gruvbox, and iplastic-syntax.

Disable background tips

To disable background tips:

Visit: Settings > Install > “atom-background-tips”, and click disable.

Disable Pending Pane items

To disable Pending Pane items:

Visit: Settings > Core > uncheck “Allow Pending Pane Items”

Wrap at line length

To wrap code at line length:

  1. Settings > Editor > enable “Soft Wrap”
  2. Settings > Editor > enable “Soft Wrap at Preferred Line Length”
  3. Settings > Editor > set “Preferred Line Length” to 100

Enable soft wrap

To enable soft wrapping:

  1. Settings > “Open Config Folder”
  2. Add softWrap: true to config.cson, like so:
	fontSize: 13
	scrollPastEnd: true
	tabLength: 4
	softWrap: true
	preferredLineLength: 100
	softWrapAtPreferredLineLength: true
	softWrap: true

Note: this is done automatically if you implemented the previous tip (Wrap at line length).

Change select/highlight color

Settings > “Open Config Folder” > styles.less:

atom-text-editor.editor .selection .region {
	background-color: rgba(0,0,0,0.1);

Note: Cmd+Save to save changes.

Highlight Line

I like to highlight lines: Settings > Install > “highlight-line”

Then configure: Settings > Packages > “highlight-line” > Settings > check both: “Enable Background Color” and “Enable Selection Border”

And add some custom styles: Settings > “Open Config Folder” > styles.less:

atom-text-editor.editor {
    // current line bg color
    .line.highlight-line {
        background-color: rgba(0,0,0,0.05) !important;
    // selection bg color
    .selection .region {
        background-color: rgba(0,0,0,0.05) !important;
    // selection top line
    .line.highlight-line-multi-line-solid-top {
        border-top-color: rgba(0,0,0,0.2) !important;
    // selection bottom line
    .line.highlight-line-multi-line-solid-bottom {
        border-bottom-color: rgba(0,0,0,0.2) !important;

Note: Cmd+Save to save changes.

Hide files

To hide any unwanted files:

  1. Settings > Core > Ignored Names: .git, .hg, .svn, .DS_Store, ._*, Thumbs.db, desktop.ini, .ftpconfig, cgi-bin
  2. Settings > Packages > “tree-view” > Settings > Hide Ignored Names

Increase font size

To increase the default font-size:

Settings > Editor > Font Size: 14

Disable trailing newline

To disable auto/trailing newline feature:

  • Settings > Packages > “whitespace” > Settings
  • Uncheck Ensure Single Trailing Newline

Tab length

To change the default tab length to 4:

Settings > Editor > Tab Length: 4

Disable autocomplete

Ugh, can’t stand auto-complete, to disable:

Settings > Packages > “autocomplete-plus” : disable

Custom File Icons

The default set of file icons is pretty boring, so I like to install File Icons:

Settings > Install > “file-icons”

Project Manager

Optionally install Project Manager:

  1. Settings > Install > “project-manager”
  2. Shift+Cmd+P > Project Manager
  3. Save project as desired

Remote FTP

It took awhile to figure this one out. To enable Remote FTP:

  1. Settings > Install > “remote-ftp”
  2. Settings > Packages > “remote-ftp” > Settings > Auto Upload on Save : Never
  3. Shift+Cmd+P > Project Manager
  4. Open an existing project or create a new one (Atom Menu Bar > File > Open folder)
  5. Open remote-ftp sidebar (Atom Menu Bar > Packages > Remote-FTP > Toggle)
  6. Create a config file for your project (Atom Menu Bar > Packages > Remote-FTP > Create (S)FTP config file)
  7. Once connected you should be seeing the content of the remote server
  8. All basic commands (connect, disconnect, et al) are available from the sidebar context menu and the Command Palette
  9. Create .ftpconfig and place in root directory:
    "protocol": "sftp",
    "host": "",
    "port": 22,
    "user": "username",
    "pass": "password",
    "promptForPass": false,
    "remote": "/home/example/public_html",
    "secure": true,
    "secureOptions": null,
    "connTimeout": 10000,
    "pasvTimeout": 10000,
    "keepalive": 10000,
    "watch": []

Test thoroughly and protect your .ftpconfig file using the next technique.

Protect .ftpconfig

To use Atom for SFTP functionality, you need to keep a .ftpconfig file on the server. Unfortunately it contains your site’s FTP credentials, which would enable a hacker to destroy your site. So it is best to add a slice of .htaccess to protect the file from all public access.

<IfModule mod_rewrite.c>
	RewriteCond %{THE_REQUEST} \.ftpconfig [NC]
	RewriteRule .* - [F,L]
ErrorDocument 403 "<h1>Forbidden</h1><p>You don't have permission to access /.ftpconfig on this server.</p>

Alternately, you should be able to protect .ftpconfig by restricting it’s file permissions, but it’s not something I have tried. For me, it’s easier to just add the .htaccess code.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Banhammer: Protect your WordPress site against threats.

4 responses to “Tips for Atom Code Editor”

  1. Hi Jeff, just a quick thing I noticed: you don’t need to place the .ftpconfig file in the server, you can just leave it on your local folder and it’ll do the job.

  2. Jim S Smith 2017/07/09 11:41 am

    Just checked out the website for Atom,

    Looks pretty slick!

    I am used to using Geany, as that was one I was using on Windows (back in the day).

    I may have to check this one out, and I believe I also saw it listed in my distro’s APT repository. (On Linux, for those unfamiliar with the term(s). )

    – Jim

    • Yeah the more I use Atom, the more I like it. Currently using Coda for most dev work, but also use Atom for mobile development.

Comments are closed for this post. Something to add? Let me know.
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
The Tao of WordPress: Become your own WordPress guru.
Working on a new book :)
LinkedIn decided to replace my highly rated video course on WP security. For a limited time the course is still available to *logged-in* users via direct URL.
I enjoy listening to original Star Trek and NG episodes while working online. After a while it feels like I’m working on the ship as part of the crew, going on adventures.
New version (2.6) of my shapeSpace starter theme now available! Always free & open source for everyone :)
Finished updating all of my books! As always, book owners can download the latest versions for FREE :) has a very thorough list of accessibility tools.
The more you wake up, the more you realize you are still asleep.
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.