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.

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 = Designer. Developer. Producer. Writer. Editor. Etc.