https://github.com/shukerullah/react-native-vscode-settings
Visual Studio Code settings for React Native
https://github.com/shukerullah/react-native-vscode-settings
Last synced: 3 months ago
JSON representation
Visual Studio Code settings for React Native
- Host: GitHub
- URL: https://github.com/shukerullah/react-native-vscode-settings
- Owner: shukerullah
- License: mit
- Created: 2018-01-09T12:32:08.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-10-04T15:06:33.000Z (over 1 year ago)
- Last Synced: 2024-08-09T18:57:42.378Z (10 months ago)
- Language: JavaScript
- Size: 14.6 KB
- Stars: 14
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Native VSCode Settings
[Visual Studio Code](https://code.visualstudio.com/) 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
```shell
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](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line) for more details.
> - All plugins are defined in package.json `postinstall` section.
> - These prepacked plugins will definitely help developers of [React](https://github.com/facebook/react) & [ReactNative](https://github.com/facebook/react-native) community
## Essential Extensions
- [React Native Tools](https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native)
- [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
- [Auto Complete Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag)
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [Babel JavaScript](https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel)
- [Code Spellcheker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
- [Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)
- [Document This _by oouo-diogo-perdigao_](https://marketplace.visualstudio.com/items?itemName=oouo-diogo-perdigao.docthis)
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)
- [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
- [Indenticator](https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator)
- [Lorem ipsum](https://marketplace.visualstudio.com/items?itemName=Tyriar.lorem-ipsum)
- [markdownlist](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)
- [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
- [Peep](https://marketplace.visualstudio.com/items?itemName=nwallace.peep)
- [Prettier - JavaScript formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [React-Native/React/Redux snippets for es6/es7](https://marketplace.visualstudio.com/items?itemName=EQuimper.react-native-react-redux)
- [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.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.
```json
{
// 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](https://twitter.com/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!
