VSCode Tools recommendations from senior developer

14 April 2022

Photo by

Like Abraham Lincoln said

Give me six hours to chop down a tree and I will spend the first four sharpening the axe.

From my perspective, you need to sharpen your tools like Lincoln. I recently was invited as a guest to the React Native Live Show on Twitch. With Jamon, we talked about our VSCode setup when you are working on a JavaScript stack.

In this article, we are going to see which extensions you should install on Visual studio code, to become more productive with your React Native codebase.

Pimp your terminal

On average I spend 150 hours a year working with a terminal. That's one of my main tool —because I don't like the integrated terminal in VSCode.

iTerm2 is a terminal emulator for macOS. I am using it for 3 reasons:

  1. Splitting windows horizontally or vertically
  2. Automatic copies into the clipboard when you select text
  3. "smart selection" to highlight URLs, email addresses, filenames, ...

and many more other terminal features that make my life easier.

OhMyZSH is a toolchain for your shell. It's a powerful configuration that allows you to customize your terminal experience with tons of shortcuts and colors that sparks joy ✨

After publishing this article @bmichotte mentioned to me that he is using hyper terminal with fish shell. It's another option available on all platforms Windows, Linux, and macOS.

Install VSCode from the terminal

Note: if you want to test this setup on a "fresh" setup, you can install VSCode Insiders —the beta version of the software

brew update
brew install --cask visual-studio-code
# or
brew install --cask visual-studio-code-insiders

Quokka.js

Quokka.js for VSCode is a JavaScript and TypeScript playground in your editor.

code --install-extension WallabyJs.quokka-vscode
# or
code-insiders --install-extension WallabyJs.quokka-vscode

es7-react-js-snippets

JavaScript/Typescript snippets for React, React Native and Redux in ES7+

code --install-extension dsznajder.es7-react-js-snippets

Turbo console.log

Make debugging faster by automating the operation of writing meaningful log messages.

code --install-extension chakrounanas.turbo-console-log

expo-tools

Autocomplete and validation for your app.json or app.config.js manifest.

code --install-extension byCedric.vscode-expo

Linter

dbaeumer.vscode-eslint

ESLint will help you on catching bug and useless code.

code --install-extension dbaeumer.vscode-eslint

esbenp.prettier-vscode

prettier is a codeformatter and will helps to have the same coding style across projects.

code --install-extension esbenp.prettier-vscode
  1. type `format` on the search input
  2. ✅ Editor: Format on save
  3. Optional sometimes you have conflicts with other formatters. If it's not working just force the usage with `Prettier - code formatter`

format > format on save

If you are looking for a strict set of rules you should Install custom config from William eslint-config-react-native-wcandillon

Bonus: Sublime-keybindings

Sublime-keybindings is a set of keybindings for VSCode.

code --install-extension ms-vscode.sublime-keybindings
Gravatar for dleuliette@gmail.com

Hi, I’m David, a french freelance developer working remotely. I’m the author of this blog, nice to meet you!

Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills across every touch point.