React Native Extensions in Visual Studio Code

VSCode Logo

📡 What you will learn

  • Install VSCode extensions to code Like A Boss
  • Learn keyboard shorcuts to work at ligthning speed

👾 Before we start the exercise

There are 2 ways to install extentions on VSCode.

The manual way

  1. Launch VSCode Quick Open
  • macOS (cmd + shift + p)
  • windows (ctrl + shift + p)
  1. Type ">install extensions"
  2. Search the name
  3. Click on "install"

The automated way

  • open your terminal and run
code --install-extension dbaeumer.vscode-eslint esbenp.prettier-vscode

👨‍🚀 Exercise 1

The objective of this challenge is to install a bunch of extensions and then write a small documentation you can refer to in the future.

If you are not familiar, you should read the art of writing good markdown for documentation that sparks joy ✨

  • Create a cheatcodes.md file to remember the snippets.

Example:

# CHEATCODES FOR AWESOMENESS

## tsrnfs + tab

... paste an example result here

## tsrnfe + tab

... paste an example result here

Feel free to copy/paste some React Native snippets from this list.

React Native Snippets

  • Install "ES7+ React/Redux/React-Native/JS snippets"
code --install-extension dsznajder.es7-react-js-snippets

Hint: Using ts before rn** wil automatically add typescript definitions 🚀

JavaScript snippets

  • Install "JavaScript snippets"
code --install-extension nathanchapman.javascriptsnippets

Hint: I use map⇥ and filter⇥ all the time.

Turbo console.log()

  • Install "Turbo Console Log"
code --install-extension chakrounanas.turbo-console-log

This plugin makes debugging much easier by automating the operation of writing meaningful log message.

Expo Tools

  • Install "Expo Tools"
code --install-extension vscode-expo-tools
  • Check in app.json if the extension works (ctrl + space), you should have something like this :
preview of vscode-expo plugin extension gif

ESLint and Prettier

  • Install "ESlint" and "Prettier - Code formatter"
code --install-extension dbaeumer.vscode-eslint esbenp.prettier-vscode

There is nothing to do here, we are going how to use them in the next challenge.

👽 Bonus

code --install-extension naumovs.color-highlight formulahendry.auto-close-tag vincaslt.highlight-matching-tag formulahendry.auto-rename-tag
  • Let VSCode switch automatically from a light to a dark theme

In your settings.json:

"workbench.preferredDarkColorTheme": "",
"workbench.preferredHighContrastColorTheme": "",
"workbench.preferredHighContrastLightColorTheme": "",
"workbench.preferredLightColorTheme": "",
"window.autoDetectColorScheme": true,
VSCode theme for light and dark mode

I use the theme Night Owl

code --install-extension sdras.night-owl