React Native Extensions in Visual Studio Code

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

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

👨‍🚀 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

• add 3 [JavaScripts Snippets](https://github.com/nathanchapman/vs code-javascript-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 vs code-expo-tools

• Check in app.json if the extension works (ctrl + space), you should have something like this :

👽 Bonus

• Install these fancy VS Code 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 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,

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

code --install-extension sdras.night-owl