Text editing techniques every Front-End developer should know
Any Front-end developer is going to spend a lot of time typing and manipulating code. It pays to know how to ‘drive’ your editor to get the best performance.
Following are what I consider some of the most useful or perhaps underused techniques. They are techniques I think it pays to know about and that hopefully you are able to perform with fluidly in your editor or IDE of choice.
I’m using Sublime Text and Code for the examples here but nearly all of these techniques are possible in VS Code, Atom, Brackets, Vim, Emacs etc.
Important: Don’t get hung up on the shortcut keys being used here. They differ from editor to editor and I’ve changed some I use from the editors default. I want to show you some techniques you may not have used or had forgotten about. Not necessarily how to perform them.
Let’s begin.
Transpose
You have two lumps of code and you want them to switch positions. Select the two sections, hit your short-cut and hey presto! They are transposed.
Commit
Most of us use Git. You should have a straightforward way to add, commit and push changes. For day to day tasks, doing it in the editor saves context switching into a terminal. In Sublime I use the ‘Git’ plug-in for Sublime. Great Git tools are baked into VS Code.
Start/stop task runner
Much like the Git point above, if you use a task runner or build tool such as Gulp it’s beneficial if you don’t need to break out of your current environment to interact with it. VS Code has a great task running tool built in. In Sublime I use sublime-gulp.
Open/Close files list
This is pretty basic but know the short-cut for opening and closing your sidebar! I don’t want to see you reaching for that mouse!
Line bubbling
I’m still amazed that developers (sorry Søren) are amazed when they see this. You have a line or X lines of code and you need to shift it/them up or down. Select the text, use your short-cut and move them up or down. Bonus points to VS Code here as it auto-indents as it does this.
Split selection to lines
Say you want to turn a bunch of lines into individual items. Grab the text, hit the relevant short-cut and you have each line selected. You can then jump to the beginning/end of each line with ease!
Ragged line select
This is an alternative to splitting selection to lines. Here hold down the relevant key and use your mouse to move down the ragged edges of the text and provide a cursor point at each.
Select all occurrences
You find a selection and then want to do something with every instance of the selection. Useful for renaming a method or any other file wide change.
Select next occurrence and skip an occurrence
Suppose you have found a word and want to find the next instance. You should know the short-cut that gets you to the next but you should also know that if you go to far you can back-up and if you want to skip an occurrence you can and move on to the next. I don’t use this as often and regularly forget the shortcut but it’s good to know you can should you need to.
Find symbol in project
Almost every editor apart from Sublime fails at this. The VS Code team don’t seem so bothered about implementing it for CSS which is a shame because it is a KILLER feature for any devs that spend a decent amount of time working with CSS. Suppose you have a class and you want to edit what the properties of that class declaration in your codebase. A global find is for wimps. What you need is ‘find symbol in project’. Hit the shortcut, type/paste in your class name (or other language symbol), and jump straight to the file and position in that file you want.
Jump to line
Dev tools tells you there is an error on line 234. Sure you can scroll but you should be able to jump straight there with a few key presses.
Select line
Pretty obvious this but if you are still selecting lines with your mouse you need to have a quiet word with yourself.
Expand selection
You’re in a word but you want the whole paragraph. Or you want to expand a selection out to the next set of braces. You should know how to do that with a short-cut.
Indent block
Ordinarily this seems too obvious to point out but I’ve seen people indenting their CSS property/values or JS function bodies one line at a time and it is a little painful to watch. You should know you can select a block (preferably using Expand Selction from prior tip) and then indent.
BUT!! With the advent of Prettier I’d argue that even doing this a block at a time is a little redundant.
AceJump/QuickJump
This one is rarely baked into editors and I’ve known the plug-in by other names than AceJump in other editors (“QuickJump” for example) but this principle is the same. You type a shortcut and it tokenizes and labels your text. You then type the relevant keys to jump straight to that label point on the page.
Clipboard History
Going back and re-copying something because you have copied something else to your clipboard is incredibly inefficient. Sublime/Vim/Emacs has a clipboard history built in. Others like Code can have the functionality added via a plugin. Better still, use something like Alfred which is program agnostic so you have your clipboard history available to paste in any application.
Quick Switch Project
It should be very quick to switch from one project to another. It shouldn’t require a visit to the menus with a mouse.
Emmet
Need to create 100 divs with the same or incrementing class? Don’t even consider doing that one at a time. Learn to do it with Emmet.
Time spent learning Emmet is worth the investment, as it is transportable skill. There are plug-ins for all editors and external services like Codepen support it too.
.myClass-${Hi}*100
Summary
That’s it for now, if you have any great features you think deserve a mention, pop it in the comments.
It’s a great time for Text Editors with so many good choices. It’s important to know what these tools can do for you so you can invest a little time honing your skills. If most of your day is spent in a text editor, it’s surely worth driving it (or trying to) like you mean it.
This is great information. Any chance to list the shortcut keys? It is hard to know what keys with the video going so fast. Thanks