Using Tools, Shortcuts and Tricks with creativity to be more productive (coding wise)

There are tools that can help you accomplish things by increasing your agency and some of the tools you already use have a lot of potential that you might not know.

Bruno Leonardo Michels
7 min readJul 12, 2020

--

In this post I’m going to talk about some tools that can help you get things done faster and some tricks and creative ways to accomplish things.

Shortcuts & Tricks

Go to File

You can jump to a file really quickly with:

  • Windows: Ctrl + P
  • MAC: ⌘ + P

Rename references (F2)

References

  • Alt+F12 Peek Definition
  • F12 Go to Definition
  • Shift+F12 Show References

Quick Fix

  • Ctrl+. Quick Fix

Sort Lines Ascending

Sort Lines Ascending: allows you to sort lines

— You can use this to sort a list of names

— You can also use it to sort CSS styles

Multi-cursor

Allows you to selected multiple lines at the same time.

Shortcut:

  • Windows: Ctrl + Alt + Down
  • MAC: ⌘ + Alt + Shift + Down

Using multiple cursors it’s easy to convert a list of names (in plain text) into an array in JavaScript:

You can even put the names in an array of objects:

You can use multiple cursors to copy parts of multiple lines.

Combining the mouse cursor with the multi cursor feature you can select parts of multiple lines even if they’re apart. Hold Alt and click on the lines.

You can select instances of a word by using:

  • Windows: Ctrl + D
  • MAC: ⌘ + D

This allows you do, for example, get a cursor at the end of each name in the list (as they’re not all aligned):

You can use it to handle some more complex refactors:

You can select all instances of a word at once by using:

  • Windows: Ctrl + Shift + L
  • MAC: ⌘ + Shift + L

This allows you to change all words at once:

Code Navigation

You can open the menu in a mode that searches for code blocks by using:

  • Windows: Ctrl + Shift + O
  • MAC: ⌘ + Shift + O

This allows you to see a list of functions/methods you have in your file, and it’s easier to navigate.

Git commands

You can find a source control tab under this icon

And in the menu you can find a lot of git commands so you don’t have to write by hand every time.

Software that can make you more productive

Here are some tools that can help you do things you do everyday but faster. Downloads are at the end of this post.

Greenshot

Greenshot is a software that allows you to take screenshots in many different ways and it gives you many different options on what to do with the images. It’s free on Windows and $1.99 on Mac.

It’s specially useful to explain features, report bugs and things of that sort.

The following image shows the different capture methods and keyboard shortcuts to execute them. These are my settings:

After you take a screenshot you are presented with many options:

You can:

  • Save as: asks where you want to save
  • Save directly: save on the folder you configured in the preferences without prompting for any information
  • Open in image editor: gives you many tools to highlight and edit the screenshot
  • Copy to clipboard
  • MS Paint: opens image in MS Paint
  • Upload to Imgur: automatically uploads the screenshot to Imgur and copies the image link to your clipoard

LICEcap

LiceCAP allows you to record a part of a window and generated an animated image. Really useful to demo stuff.

inception

Noise Cancelling App

A noise cancelling app is a software that cancels noise, so anything other than human speech is canceled out (music, vacuum cleaner, etc). They can allow you to cancel incoming/outgoing audio .

Windows: NVIDIA RTX Voice
You don’t need a GeForce RTX to run it, it’s possible to install if you have a GTX 10-series or better. This is 100% free.

Krisp
It doesn’t have a noise suppression bar, but it allows you to toggle “Remove Noise”. It’s free for 120min/week or $5 a month for unlimited (there’s a trial).

Copy & Paste Tools

Here are some tools that can help you manage your clipboard.

For Windows
On Windows press ⊞ + V, it’ll open a window showing you all the things you copied during you session:

You can click on any of the items above to paste them. And you can notice that the last element is an image, that works too.

Clicking on will give you a few options: PIN, delete, clear all. Pinning will make it stay even after a clear all.

There’s another tool that I saw people mention called Ditto.

For MAC
There isn’t a built-in solution, but there are many apps. Copy’em Paste seems like a good one.

VS Code Extensions

Bookmarks: allows you to keep a list of points in code that you can jump back to very easily. Very useful to code in complex, nested code.

Change Case: allows you to change the case from the selected text.

Compare Folders: allows you to see what are files that exist in one directory but not in the other and shows the differences between files that exist in both.

GitHub Pull Requests and Issues: review PRs from within VS Code, using all its tools to show changes/differences.

GitLens — Git supercharged: shows commit information for the selected line and adds a lot of tools to manage git.

JSON to TS: allows you to convert JSON to TypeScript interfaces, super useful for creating types for data returned from an API.

Path Intellisense: auto-complete paths for link, img, require, import…

Prettier — Code formatter: formats code. You must have this otherwise don’t talk to me.

REST Client: make API calls from VSCode using HTTP syntax

Sort Tabs/Open Editors by name: automatically sort files you open so it’s easier to find

Tier Lists

What I think is essential and more frequently used by me.

Software

Extensions

Resources

Shortcuts

Software

Extensions

--

--