Spring Sale! Save 30% on all books w/ code: PLANET24
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.

Update! Atom retired Dec 15, 2022, but now is forked under the name Pulsar :)

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:
editor:
	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": "example.com",
    "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.

# PROTECT FTPCONFIG
<IfModule mod_rewrite.c>
	RewriteCond %{THE_REQUEST} \.ftpconfig [NC]
	RewriteRule .* - [F,L]
</IfModule>
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.

About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
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.
Welcome
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 »
Blackhole Pro: Trap bad bots in a virtual black hole.
Thoughts
I live right next door to the absolute loudest car in town. And the owner loves to drive it.
8G Firewall now out of beta testing, ready for use on production sites.
It's all about that ad revenue baby.
Note to self: encrypting 500 GB of data on my iMac takes around 8 hours.
Getting back into things after a bit of a break. Currently 7° F outside. Chillz.
2024 is going to make 2020 look like a vacation. Prepare accordingly.
First snow of the year :)
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.