Up your Text Editing Game

Ben Coleman
Jul 25, 2017 · 4 min read

Getting comfortable with your text editor and learning new shortcuts is a way to cut down development time, and to keep efficiency up. If you can save a few seconds off actions you do over and over again, the extra time adds up.

This post will mostly detail Sublime Text with small hints of Atom. The point is that getting familiar with whatever program you want to use can be a boost to productivity.

The Legend

If you’re a Mac novice like me, you don’t even know what the keys are. Here’s the rundown:

  • Command ⌘
  • Shift ⇧
  • Option ⌥
  • Control ⌃
  • Caps Lock ⇪
  • Fn (Function key in the lower left)

Package Control

Both Sublime Text and Atom allow you to install packages to add functionality and themes to your text editor. Atom’s package controller comes default, Sublime you’ll have to follow installation instructions here. Browse the Atom catalog here or the Sublime’s collection here. Go explore and find what you like. My advice is to not go overboard and use only what you need. Getting over-reliant on certain packages can be a bad thing, but finding the right few to improve your workflow are a welcome addition.

My Favorite Sublime Packages:

  • Sidebar Enhancements — Adds some much needed functionality to the sidebar in Sublime including things like deleting files, cut/paste, rename, refresh ect.
  • All Autocomplete — Checks all open files for autocompletion statements. E.g. If you had the ReallySpecificAndHardToTypeController open in the same window, Sublime would have the autocomplete ready when working in other files.
  • Bracket Highlighter — Pretty much does what it says. Highlights matching brackets for things like [], (), {}, “”, ‘’, #!xml <tag></tag>.
  • Git — Git commands within Sublime. Read more about functionality here.

Manipulating Text

A lot of times text is just in the wrong spot and you need to move it up or down within your code. Don’t cut and paste if you don’t have to, just move it up and down.

Move line up/down:⌃ + ⌘ + ↑/↓
Line Bubbling with ⌃ + ⌘ + Up/Down

As developers we try to be DRY (Don’t repeat yourself), but we pretty often almost repeat ourselves. Duplicating code is often useful. Save a few keystrokes off of a copy/paste.

Duplicate Code:⌘ + ⇧ + 'D'
Duplicate code instead of copy + paste

Joining lines together doesn’t have to be deleting lines and moving the cursor around. Very useful when combined with ⌘ + Click to create multiple cursors. This one is easy.

Join line:⌘ + 'J'
Join lines easily

Sometimes you want to change one word many times. A typo or a change of naming shouldn’t cost you too much time. Highlight the word you want to change and press ⌘ + ‘D’ for each instance you want to change.

Highlight multiple instances:⌘ + 'D'
Match text and replace

Layout/Navigation

You’re going to be working in many files at once. Divide and conquer by splitting your screen to show multiple files at once.

Split Panes:2 Columns: ⌘ + 2
3 Columns: ⌘ + 3
4 Columns: ⌘ + 4
2 x 2 grid: ⌘ + 5

Never lose a file. Sometimes you’re working with on a project and you want to quickly and easily get to the file you want without navigating the file tree. Sublime has the hookup with the Goto Anything.

Goto Anything:
⌘ + 'P'

Emmet/HTML editing

Many HTML-like coding can be repetitive and verbose, Emmet tries to alleviate that. Added to Sublime/Atom through a plugin, it comes with a host of CSS like abbreviations that can be expanded into HTML code. Definitely learn more through the official documentation but here are two quick examples.

Quick Rules:
- Nest with '>'
- Assign class with '.'
- Run multiple times with *
e.g. ul.player-awards>li.award*8 + tab to expand

When building out a page layout you’ll often need dummy text. Emmet can handle that quickly.

Dummy text generator:
lorem + tab will generate 30 filler words, can be passed a number.
e.g. lorem500 generates 500 words of dummy text.

Bonus: Style over Substance

Being a capable programmer often comes down to your text editor’s color scheme and font.

My setup from the gifs: Boxy Monokai Theme with Operator Sans Font.

Free Programming Fonts:

Themes:

Atom Color Schemes

Color Sublime

Ben Coleman

Written by

Aspiring developer, former designer, current Warriors hater http://benjamincoleman.me/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade