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
- Launch VS Code Quick Open
- macOS (
cmd
+shift
+p
) - windows (
ctrl
+shift
+p
)
- Type ">install extensions"
- Search the name
- 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
.
- Launch VS Code Quick Open
- 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 aconst
or afunction
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.
-
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