React Native Extensions in Visual Studio Code

📡 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)

2. Type ">install extensions"
3. Search the name
4. 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

• On your new cheatcodes.md write down React Native components shortcuts 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

• add 3 JavaScripts Snippets to your cheatcodes.md.

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.

• Use tubo console log shortcut

• macOS (command + option + L)

• windows (ctrl + alt + L)

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 :

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

• Install these fancy VSCode extensions and let me know what do you think

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,

I use the theme Night Owl

code --install-extension sdras.night-owl