Angular Development Essentials
Curated set of Visual Studio Code extensions to improve your development experience in Angular.
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": "'Victor Mono', 'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[html]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Victor Mono', 'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.formatOnSave": false,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[yaml]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Victor Mono', 'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[javascript]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Victor Mono', 'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[typescript]": {
"editor.autoIndent": true,
"editor.fontFamily": "'Victor Mono', 'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.renderWhitespace": "boundary",
"editor.minimap.enabled": false,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
"[json]": {
"editor.fontFamily": "'Victor Mono', 'Fira Code', 'Droid Sans Mono', 'monospace', 'Droid Sans Fallback'",
"editor.fontLigatures": true,
"editor.fontSize": 16,
"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 Angular.
"workbench.iconTheme": "material-icon-theme",
"workbench.colorTheme": "Night Owl",
"breadcrumbs.enabled": true,
"files.associations": {
".huskyrc": "json",
},
"files.exclude": {
"**/.git": true
},
"gitlens.views.repositories.files.layout": "tree",
"prettier.singleQuote": true,
"prettier.printWidth": 120
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact"
],
"javascript.updateImportsOnFileMove.enabled": "always",
Extensions
