Curated set of Visual Studio Code extensions to improve your development experience in React
.
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"
}
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
- ESLint - Integrate ESLint JavaScript into VS Code
- React snippets - React, Redux and Graphql in JS/TS with ES7 syntax
- IntelliCode - AI assisted developer productivity
- Git Lens - Improves Git capabilities
- Prettier - Enables Prettier support
- EditorConfig - Enables EditorConfig support
- Material Icon Theme - Use material design icons in explorer
- Oceanic Next - Ocenaic Next theme
- Bracket Pair Colorizer - Colorizing matching brackets
- Chrome Debugger - Enables Chrome debugging
- Docker - Enables docker support
- Browser Preview - Enables browser preview