DEV Community

Cover image for This is my VSCode extensions list
Michael De Abreu
Michael De Abreu

Posted on • Updated on

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

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 }}"
Enter fullscreen mode Exit fullscreen mode

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"
}
Enter fullscreen mode Exit fullscreen mode

Linting / Formatting

Customization

Others

Top comments (2)

Collapse
 
dzhavat profile image
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.

Collapse
 
michaeljota profile image
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.