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

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

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

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

Snippets

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:

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

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:

Reverse Search

Better GitHub File Tree

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

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

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

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store