Are you looking to speed up your development in React Native? Look at following 10 must have extension for VSCode that you can use today! For any extension installation you can either use the installation steps located at bottom of this page.
This VS Code extension provides a development environment for React Native projects. Using this extension, you can debug your code and quickly run react-native commands from the command palette.
https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native
This extension allows matching brackets to be identified with colours. The user can define which tokens to match, and which colours to use.
Installation Link
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
Preview
Note
Although it has been deprecated in favour of built in VSCode extension, you can enable the bundled extension by going to command pallet and searching for color bracket
and set the flag value to true.
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary
Installation Link
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Preview
Automatically add closing tag when you type in the closing bracket of the opening tag After closing tag is inserted, the cursor is between the opening and closing tag Set the tag list that would not be auto closed Automatically close self-closing tag Support auto close tag as Sublime Text 3 Use Keyboard Shortcut or Command Palette to add close tag manually
Installation Link
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Preview
This extension styles css/web colors found in your document.
Installation Link
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Preview
A basic spell checker that works well with camelCase code.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.
Installation Link
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
Preview
JavaScript and React/Redux snippets in ES7+ with Babel plugin features for VS Code
Installation Link
https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets
Preview
Integrates ESLint JavaScript into VS Code. Find and fix problems in your JavaScript code
ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:
Installation Link
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Preview
Make your VSCode look pretty and recognize type of files at a glance with those nice icons
Installation Link
https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Preview
The Better Comments extension will help you create more human-friendly comments in your code. With this extension, you will be able to categorise your annotations into:
Installation Link
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
Preview
You need add the VSCode in path to run following commands
Unix
code --install-extension ms-vscode.cpptools
Windowscode --install-extension ms-vscode.cpptools
Maccode --install-extension ms-vscode.cpptools
Simply run following on your terminal/cmd prompt and you will get super charged VSCode for react native.
code --install-extension aaron-bond.better-comments code --install-extension andys8.jest-snippets code --install-extension BriteSnow.vscode-toggle-quotes code --install-extension burkeholland.simple-react-snippets code --install-extension christian-kohler.npm-intellisense code --install-extension christian-kohler.path-intellisense code --install-extension CoenraadS.bracket-pair-colorizer-2 code --install-extension cssho.vscode-svgviewer code --install-extension DavidAnson.vscode-markdownlint code --install-extension dbaeumer.vscode-eslint code --install-extension dsznajder.es7-react-js-snippets code --install-extension eamodio.gitlens code --install-extension eg2.vscode-npm-script code --install-extension esbenp.prettier-vscode code --install-extension flowtype.flow-for-vscode code --install-extension formulahendry.auto-close-tag code --install-extension fosshaas.fontsize-shortcuts code --install-extension fwcd.kotlin code --install-extension jasonnutter.search-node-modules code --install-extension jundat95.react-native-snippet code --install-extension kelset.rn-full-pack code --install-extension kumar-harsh.graphql-for-vscode code --install-extension mathiasfrohlich.Kotlin code --install-extension mgmcdermott.vscode-language-babel code --install-extension mikestead.dotenv code --install-extension mkxml.vscode-filesize code --install-extension msjsdiag.vscode-react-native code --install-extension naumovs.color-highlight code --install-extension nickytonline.gatsby-extension-pack code --install-extension nickytonline.vscode-gatsby-snippets code --install-extension npxms.hide-gitignored code --install-extension Orta.vscode-jest code --install-extension PKief.material-icon-theme code --install-extension Shan.code-settings-sync code --install-extension silvenon.mdx code --install-extension streetsidesoftware.code-spell-checker code --install-extension tht13.html-preview-vscode code --install-extension vscode-icons-team.vscode-icons code --install-extension waderyan.gitblame code --install-extension wayou.vscode-todo-highlight code --install-extension wmaurer.change-case code --install-extension xyc.vscode-mdx-preview code --install-extension Zignd.html-css-class-completion
Quick Links
Legal Stuff