New Bookstore! Save 20% on books with discount code: LAUNCH
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:
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.

Jeff Starr
About the Author
Jeff Starr = Web Developer. Book Author. Secretly Important.
Blackhole Pro: Trap bad bots in a virtual black hole.

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

    • Jeff Starr

      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 »
USP Pro: Unlimited front-end forms for user-submitted posts and more.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.