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
