Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vishal423/vscode-react-development-essentials
Curated set of react extensions useful during development
https://github.com/vishal423/vscode-react-development-essentials
Last synced: about 1 month ago
JSON representation
Curated set of react extensions useful during development
- Host: GitHub
- URL: https://github.com/vishal423/vscode-react-development-essentials
- Owner: vishal423
- License: mit
- Created: 2019-04-16T07:41:40.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2019-04-16T07:43:45.000Z (almost 6 years ago)
- Last Synced: 2024-10-19T21:18:24.658Z (4 months ago)
- Size: 6.84 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Development Essentials
Curated set of Visual Studio Code extensions to improve your development experience in `React`.
## Editor Settings
This pack contributes following language specific editor settings as default. You can override these in `User` or `Workspace` Settings.
```
"[scss]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[css]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[html]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": false,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[yaml]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[javascript]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[typescript]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[json]": {
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[javascriptreact]": {
"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 18,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
## Other Recommended settings
Add following in `User` or `Workspace` settings to improve your development experience in `React`.
```
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Oceanic Next",
"breadcrumbs.enabled": true,
"files.associations": {
".huskyrc": "json",
},
"files.exclude": {
"**/.git": true
},
"gitlens.views.repositories.files.layout": "tree",
"javascript.updateImportsOnFileMove.enabled": "always",
"prettier.singleQuote": true,
"prettier.printWidth": 100
```
## Extensions
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) - Integrate ESLint JavaScript into VS Code
- [React snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets) - React, Redux and Graphql in JS/TS with ES7 syntax
- [IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) - AI assisted developer productivity
- [Git Lens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) - Improves Git capabilities
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Enables Prettier support
- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) - Enables EditorConfig support
- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme) - Use material design icons in explorer
- [Oceanic Next](https://marketplace.visualstudio.com/items?itemName=mhartington.Oceanic-Next) - Ocenaic Next theme
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer) - Colorizing matching brackets
- [Chrome Debugger](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) - Enables Chrome debugging
- [Docker](https://marketplace.visualstudio.com/items?itemName=PeterJausovec.vscode-docker) - Enables docker support
- [Browser Preview](https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview) - Enables browser preview