Visual Studio Code settings for React Native

VSCodeSettings.md

React Native VSCode Settings

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, Mac OSX, and Windows.

This module will install visual studio code essential extensions and settings for react-native.

Install

npm install --save-dev react-native-vscode-settings

or

yarn add react-native-vscode-settings --dev

On install it will automatically install all plugins configured in library.

Note:

• Copy your vscode settings defined in your .vscode/settings.json file before installing this package.
• If you are using MAC then please make your that you have install code command in PATH. Please refer Microsoft Blog for more details.
• All plugins are defined in package.json postinstall section.
• These prepacked plugins will definitely help developers of React & ReactNative community

Essential Extensions

• React Native Tools by Visual Studio Mobile Tools
• Auto Close Tag by Jun Han
• Auto Complete Tag by Jun Han
• Auto Rename Tag by Jun Han
• Babel ES6/ES7 by dzannotti
• Code Spellcheker by Street Side Software
• Color Highlight by Sergii Naumov
• Document This by Jeol Day
• ESLint by Drik Baeumer
• Flow Language Support by flowtype
• Git Blame by Wade Anderson
• Git Lens — git blame annotations, code lens, and more by Eric Amodio
• Indenticator by SirTori
• Lorem ipsum by Daniel Imms
• markdownlist by David Anson
• Output Colorizer by IBM
• Path Intellisense by Christian Kohler
• Peep by nwallace
• Prettier - JavaScript formatter by Esben Petersen
• Rainbow Brackets by 2gua
• React-Native/React/Redux snippets for es6/es7 by EQuimper
• SVG Viewer by cssho
• TODO Highlight by Wayou Liu
• vscode-icons by Roberto Huertas

Settings

To get to the user and workspace settings:

• On a Windows computer, click File > Preferences > Settings or Press CTRL + ,
• On a Mac, click Code > Preferences > Settings or Press ⌘ + ,

Paste following code with your design settings.

{
  // The number of spaces in a tab.
  "editor.tabSize": 2,
  // Specifies workbench icon theme.
  "workbench.iconTheme": "vscode-icons",
  // Format a file on save.
  "editor.formatOnSave": true,
  // Support using flow through your node_modules folder. (For Flow)
  "flow.useNPMPackagedFlow": true,
  // Enable/disable JavaScript validation. (For Flow)
  "javascript.validate.enable": false,
  // Enable/disable default JavaScript formatter. (For Prettier)
  "javascript.format.enable": false,
  // vscode-icons extension will restart automatically on project detection. (For vscode-icons)
  "vsicons.projectDetection.autoReload": true,
  // Controls how the editor should render whitespace characters.
  "editor.renderWhitespace": "boundary",
  // Quickly toggle between hiding and showing folders and files. (For Peep)
  // To quickly hide/show files execute the Peep Toggle in Command Palette.
  "files.exclude": {
    ".*": false,
    "ios/": false,
    "*.lo*": false,
    "*.json": false,
    "LICENSE": false,
    "android/": false,
    "__test__": false,
    "node_modules/": false
  }
}

Launching from the Command Line

You can also run VS Code from the terminal by typing code after adding it to the path:

• Launch VS Code.
• Open the Command Palette (⇧ + ⌘ + P)/(CRTL + SHIFT + P) and type shell command to find the Shell Command: Install code command in PATH command.
• Restart the terminal for the new $PATH value to take effect.

Use the command code /path/to/file/or/directory/you/want/to/open to open your file or code . to open the current directory in VS Code.

Contributions

Any type of contribution will be very much appreciated.

Follow me on Twitter: @shukerullah