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
- Launch VSCode Quick Open
- macOS (
cmd
+shift
+p
) - windows (
ctrl
+shift
+p
)
- Type ">install extensions"
- Search the name
- 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 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 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 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