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
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.
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"
}
Top comments (2)
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.
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.