Why we use it
It is free on every platform, the standard editor for React Native, and has the extensions below that catch mistakes before you run the app.
Install the extensions in one go
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension usernamehw.errorlens
code --install-extension expo.vscode-expo-tools
code --install-extension msjsdiag.vscode-react-native
code --install-extension eamodio.gitlens
code --install-extension dsznajder.es7-react-js-snippets
code --install-extension bradlc.vscode-tailwindcssRecommended settings
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}Shortcuts
| Action | Windows / Linux | macOS |
|---|---|---|
| Command palette | Ctrl + Shift + P | Cmd + Shift + P |
| Open terminal | Ctrl + ` | Cmd + ` |
| Quick open file | Ctrl + P | Cmd + P |
Useful extensions
- ESLint
- Flags likely bugs as you type (unused variables, wrong hook usage). Required.
- Prettier
- Formats your code on save.
- Error Lens
- Shows errors inline, at the end of the line that caused them.
- Expo Tools
- Autocomplete and validation for app.json.
- React Native Tools
- Debugging and IntelliSense for React Native.
- GitLens
- Shows who changed each line and when.
- ES7+ React/React-Native snippets
- Type
rnfe+ Tab to get a full component. - Tailwind CSS IntelliSense
- Autocompletes NativeWind class names.
Common problems
Formatting does nothing on save
Fix
Set Prettier as the default formatter and enable "Format On Save".
'code' command not found
Fix
Command Palette → "Shell Command: Install 'code' command in PATH".