Skip to content

Instantly share code, notes, and snippets.

@shukerullah
Last active October 4, 2023 15:10
Show Gist options
  • Save shukerullah/34329bad2f01010a8107674c780c1024 to your computer and use it in GitHub Desktop.
Save shukerullah/34329bad2f01010a8107674c780c1024 to your computer and use it in GitHub Desktop.
Visual Studio Code settings for React Native

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

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. shell-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: Donate on PayPal

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

    Buy Me A Coffee
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment