React Native Extensions in Visual Studio Code

VS Code Logo

πŸ“‘ What you will learn

  • Install VS Code extensions.
  • Learn keyboard shorcuts to work at ligthning speed.

πŸ‘Ύ Before we start the exercise

There are 2 ways to install extentions on VS Code.

The manual way

  1. Launch VS Code 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

You can run a command from your terminal:

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

πŸ”­ Hint: if the code shortcut is not working it means you need to install the shell command in PATH.

  1. Launch VS Code Quick Open
  2. Type ">shell path"
install code in PATH gif

πŸ‘¨β€πŸš€ 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
  • On your new cheatcodes.md write down [React Native components shortcuts](https://github.com/dsznajder/vs code-es7-javascript-react-snippets#react-native-components) you prefer (Are you a const or a function person?)

πŸ”­ 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 vs code-expo-tools
  • Check in app.json if the extension works (ctrl + space), you should have something like this :
preview of vs code-expo plugin extension gif

πŸ‘½ Bonus

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

In your settings.json:

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

I use the theme [Night Owl](https://github.com/sdras/night-owl-vs code-theme)

code --install-extension sdras.night-owl