Simple Tricks To Speed Up Your Development

There are a lot of simple tricks that can massively speed you up as a developer and save a lot of keystrokes.

Here are a few hidden gems that many programmers I meet aren’t aware of. Many are aimed at beginners but a few of these will help experienced developers too. If there are any you’d think should be added to the list please leave a comment, I would love to learn more!

git push

You don’t need to write git push origin branch_name each time. You can get git push to do the same thing for you automatically.

To get this working, run the following command in your terminal:

git config —-global push.default current

From now on, you can just git push. (If you’d like to see what your current git settings are before running the above command take a look at: ~/.gitconfig).

git pull will also work as is when using this setting.

aliases

Shorten commands using aliases. Instead of writing git push 100 times over, write gp instead.

To do this on a Mac, open up your ~/.bash_profile and add the following to it:

alias gp=’git push’

Then run source ~/.bash_profile and try running gp.

Some other useful ones include:

alias gs='git status'
alias ga='git add .'
alias gc='git commit -m' # requires you to type a commit message
alias gp='git push'
alias gl='git pull'
alias gcb='git checkout -b'

Now you can simply run gc “my commit” to commit.

If there are commands you run a lot I recommend creating an alias for them.

For example, one I added recently was ys for yarn start. I ran that command a few times a day. ys saves me a bunch of keystrokes.

Some other yarn related aliases I have set up are:

alias ys='yarn start'
alias ya='yarn add'
alias yd='yarn add -D'
function yt() {
  yarn add -D "@types/${1}"
}

The last one is a function. I use a function instead of an alias so that it doesn’t add the space. To add typescript types I can run yt lodash and it will run the command yarn add -D @types/lodash for me without a space after types/.

On the topic of being efficient with git, I would also look at using your editor’s built in git support. VS Code has a nice git side panel that will help you commit and review the files you want with a few button clicks.

Multiple cursors

If you’re a VS Code/Atom/Sublime user this simple trick will save you so much time. Many other editors likely have this functionality too.

You can select multiple pieces of text using command-d (on a Mac at least. I believe the Windows command is ctrl-d).

It’s often useful where search and replace would be useful within a single file. So if you want to change all your console.log(XYZ) lines to console.warn(XYZ). You’d select console.log, hit command-d a few times and then delete log and replace it with warn. All of them will be updated together.

The actual example I gave is pretty useless. I’ve never had to update log to warn, but I’m sure you get the idea. You’ll figure out smarter ways to use this command. In my opinion, it’s by far the most powerful and useful feature of modern text editors.

This is one trick your editor can do, but there are many more. I highly recommend spending 15 minutes investigating what other tricks your editor can do that will save you a tonne of time.

Here’s a video on VS Code tricks that I have not watched myself, but will likely help. (Watching similar videos on Sublime a few years back massively sped up my development process):

Jump to File

In VS Code and other editors you can jump to a file using command-p. (This one may actually be even more useful than the command-d I raved about above. Both are super handy though.)

Snippets

All the modern text editors support code snippets. This is similar to the aliases that I mentioned above.

If you’re a VS Code user you probably know that you can find a lot of ready-built snippets by looking at the extensions panel. For example, if you have the React snippets installed you can write something like rcc to generate a React class component.

Something less well known is that it’s very easy to build your own snippet library.

I highly recommend this online snippet generator tool for VS Code, Atom and Sublime Editor:

snippet generator

You can enter something like this:

console.log(“$1”, $1)

With a shortcut you’d like to use for it (e.g. clg).

You then paste it into VS Code and it will be available for you to use as a snippet. (To add a snippet to VS Code, type command-shift-p and then type “Configure User Snippet” and paste into the next screen that shows up).

This is a short list of snippets I like to use:

VS Code Snippets

Turbo Console Log

This is a VS Code extension I recently discovered. Very handy for quickly logging your variables (something I do a lot of).

To use it, highlight a variable (or many) and then press Control-Alt-L. You can easily delete all logs quickly too. See more in the extension’s short documentation:

Turbo Console Log

Reverse Search

If you’d like to find a command you ran in the command line in the past, you can use reverse search with ctrl-r to find it. The alternative is hitting the up button till you find the command you’re after. With ctrl-r you can jump straight to it by starting to type the command. If you’d like to jump to a previous result you can hit ctrl-r again. When you hit enter it will run the command you’ve found.

Better GitHub File Tree

Jumping through files on GitHub can be annoying. Each time you click a new folder it leads to a page refresh which takes a second or two to load and the item you’re after may not even exist in that folder.

Octotree is here to rescue and makes it much easier to traverse folders on GitHub:

Octotree

Octotree adds an expandable tree to the side of your browser window that will significantly speed things up for you. Jumping through files will be as quick as on a regular machine and you’ll be able to get an overview of a projects structure quickly too.

Generate Types From JSON

You often need to convert between different systems. There are some great online tools that will do this for you automatically. I like transform.tools:

https://transform.tools/json-to-typescript

If you’d like to generate TypeScript types from a JSON object it can do that:

JSON to TypeScript

Or if you’d like to convert JSON to a GraphQL schema:

It can handle lots of other cases too. For example, Flow to TypeScript, or JSON to Mobx-State-Tree and many more.

Generating types from a JSON object is especially useful when dealing with third party APIs. All you need is a sample API response and you can generate types for it.

Easier Terminal Folder Navigation

You can use z to jump to common folders faster when using your shell.

Install it on a Mac with: brew install z.

Once installed type z followed by the folder name you’d like to jump to and it will take you straight there. You don’t need to type the full name. For example z myco will take you to myCoolProject folder even if it’s in a distant directory. It’s basically a much more efficient version of the cd command.

Oh My Zsh

I mentioned aliases above but if you use zsh shell (instead of bash) you can get a lot of these items out the box using Oh My Zsh. If you’re worried about moving over from bash it shouldn’t be too much work. zsh is also the new default shell for macs anyway.

These are the Oh My Zsh plugins I currently use:

plugins=(git z zsh-autosuggestions yarn-completion)

• git — gives you git shortcuts (although I mostly rely on my own git shortcuts that I’m already used to).
• z — another way to add z functionality that was mentioned previously.
• yarn-completion — type yarn run and then hit the tab button and it will show you all the options for you to run in your package.json. Type yarn run test and it will give you the options to complete that.
• zsh-autosuggestions — this one is super cool and enough of a reason for me to finally move over to zsh. It will autocomplete commands based on your history. The image below is what autosuggestions looks like in practice (I typed yarn s and the rest is auto-suggested which I can select by pressing the right arrow key):

If you’d like to make your terminal look like that you can install Powerlevel10k.

I hope you enjoyed this short list. It’s slowly being expanded over time.

Many of these tricks will be well known by experienced developers, but I hope at least one of them taught you something new or helped you think of more efficient ways of working.

About Me

I work as a full stack freelance developer. If you’d like to read more articles like this in the future follow me on Twitter @elie2222.