Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>Angular Development EssentialsNew to Visual Studio Code? Get it now.
Angular Development Essentials

Angular Development Essentials

Preview

Vishal Mahajan

|
650 installs
| (0) | Free
Curated set of angular extensions useful during development
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

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

  • Angular Inline - Improves editing experience of inline templates.
  • Angular Language Service - Improves editing experience of external templates
  • Angular Snippets- Angular snippets by John Papa
  • Bracket Pair Colorizer - Colorizing matching brackets
  • Browser Preview - Enables browser preview
  • Chrome Debugger - Enables Chrome debugging
  • Docker - Enables docker support
  • EditorConfig - Enables EditorConfig support
  • ESLint - Integrates ESLint
  • Git Lens - Improves Git capabilities
  • IntelliCode - AI assisted developer productivity
  • Material Icon Theme - Use material design icons in explorer
  • Night Owl - Theme for the night owls out there
  • Prettier - Enables Prettier support
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft