This is my VSCode extensions list

Image by rawpixel from Pixabay

I'm an Angular developer, and I use VSCode everyday. This list of extensions happens to be to my future self, if I ever need it, but I hope it can be useful for others as well. Keep in mind, that the list it's really focused on Angular extensions, but it also have several that are language-less.

IDE Experience

General

• Code Spell Checker This one I use to verify that I always write correctly. It have another extensions to enable other languages beside american english.
• EditorConfig for VS Code
• Git Graph I'm loving this one so far. I been using Source Tree for a while now, but I've found that I only use it to do basic things, like pull, push, commit, rebase, and see the git tree graph. VSCode already have pull, push and commit, and with this I can easily rebase and also it draws an interactive git graph.
• GitLens — Git supercharged This is another extensions to power git users. It adds so many options inside VSCode, like git blame, history, and easy picking of diff.
• TypeLens This one I search because C# extension have this. It shows the references of a variable, classes, types, almost everything. Really useful.
• Version Lens This shows information as the one above, but for dependencies. I've only use it with npm package files, but I think it supports other kind of dependency managers.
• Visual Studio IntelliCode Improve your coding with IA powered suggestions.

Javascript/Typescript

• JS Parameter Annotations Annotations for parameters in your JS / TS Files to mimic named parameters.

Angular

• Angular Language Service Powered by the Angular Team, this extensions allows you to edit the HTML of a component making verifications, and suggestions about the properties and methods that you are using.
• Angular Schematics A better way to use the Angular CLI, directly from VSCode.
• Angular Support Adds support for Go To/Peek to interpolations, variables, files definitions, and others.

CSS/SCSS

• IntelliSense for CSS class names in HTML
• Sass

Debug

I'm trying the new Edge based on Chrome. So far, so good. So, I'm only using that for now. Before this, I used regular Chrome, with the regular Chrome extension.

• Debugger for Edge

Testing

• Jest Snippets
• Jest This run the all the tests you have with Jest,and give you a report directly in the editor, with a little ball aside each test, green if it passed, red if it fails. Also, allows you to select and debug a test when they fail.

You have to configure Jest to work if you are using something like @angular-builders/jest.

In your settings:

"jest.pathToJest": "ng test {{ your angular project name }}"

In your launch.json

{
  "type": "node",
  "request": "launch",
  "name": "vscode-jest-tests",
  "program": "${workspaceFolder}/node_modules/@angular/cli/bin/ng",
  "args": [
    "test",
    "{{ your angular project name }}",
    "--runInBand",
    "--testPathPattern"
  ],
  "console": "integratedTerminal",
  "internalConsoleOptions": "neverOpen"
}

Linting / Formatting

• Prettier - Code formatter
• TSLint

Customization

• Panda Theme
• vscode-icons

Others

• Live Server
• Polacode

Comments

[Dzhavat Ushev]

Nice list of extensions! I see you work with Angular. I do as well. It’s nice meeting fellow Angular developers. For how long have you been working with it? :)

If you also work with CSS, I’ve recently released two simple extensions that I hope you’ll find useful.

[Michael De Abreu]

I just notice I forgot to reply to you. I've working with Angular since AngularJS, so quite a while. Thanks for sharing. I hope you were the one that introduce those changes into VSCode itself.