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.

Disable background tips

To disable background tips:

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

Disable Pending Pane items

To disable Pending Pane items:

Visit: Settings and uncheck Pending Pane items

Wrap at line length

To wrap code at line length:

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

Enable soft wrap

To enable soft wrapping:

  1. Open Your Config
  2. Add “softWrap: true” to editor, like so:
editor:
	fontSize: 13
	scrollPastEnd: true
	tabLength: 4
	softWrap: true

Change select/highlight color

Open Config Editor > styles.less:

atom-text-editor::shadow .selection .region {
	background-color: rgba(255,255,255,0.3);
}

Hide files

To hide any unwanted files:

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

Increase font size

To increase the default font-size:

Set font size setting > 18px

Disable newline

To disable auto-newline feature:

  • Packages > whitespace > settings
  • Uncheck Ensure Single Trailing Newline

Tab length

To change the default tab length to 4:

Settings > Tab Length: 4

Disable autocomplete

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

Packages > autocomplete-plus : disable

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.

Add custom themes

I like the following Atom themes:

  • UI Theme : Atom Material > Atom Light
  • Syntax Theme : Gruvbox > iplastic syntax

More infos:

Custom File Icons

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

Highlight Line

I like to highlight lines:

Highlight-Line settings > uncheck “Enable Selection Border”

Project Manager

Install Project Manager:

  1. 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 :

  1. Settings > Auto Upload on Save : Never
  2. Click package to toggle settings
  3. Shift+Cmd+P > Project Manager
  4. Open an existing project or create a new one (File > Open folder)
  5. Open remote-ftp sidebar (Packages > Remote-FTP > Toggle)
  6. Create a config file for your project (Packages > Remote-FTP > Create (S)FTP config file)
  7. Once connected you should be seeing the content of the remote connection
  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! :)