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.

Run react-native-vscode-settings

npx react-native-vscode-settings

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
• Auto Close Tag
• Auto Complete Tag
• Auto Rename Tag
• Babel JavaScript
• Code Spellcheker
• Color Highlight
• Document This by oouo-diogo-perdigao
• ESLint
• Git Blame
• GitLens — Git supercharged
• Import Cost
• Indenticator
• Lorem ipsum
• markdownlist
• Output Colorizer
• Path Intellisense
• Peep
• Prettier - JavaScript formatter
• React-Native/React/Redux snippets for es6/es7
• TODO Highlight
• vscode-icons

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,
  // Set Prettier default as formatter
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 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,
    "LICENSE": false,
    "android/": false,
    "__tests__": 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

Contribute to this project by opening a pull request, providing suggestions, giving feedback, reporting issues, making a donation or any type of contribution will be very much appreciated.

Follow me on Twitter: @shukerullah

Support this Project

Your support helps keep this project going!

• PayPal: If you'd like to make a donation via PayPal:

• Buy Me a Coffee: Alternatively, you can also support this project by buying me a coffee!