This is my VSCode extensions list
Tags: vscode, javascript, angular
Published: 2019-08-23 23:07:56

_Image by <a href="https://pixabay.com/users/rawpixel-4283981/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3656074">rawpixel</a> from <a href="https://pixabay.com/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=3656074">Pixabay</a>_

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](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.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](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.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](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) 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](https://marketplace.visualstudio.com/items?itemName=kisstkondoros.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](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens) 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](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode) Improve your coding with IA powered suggestions.

## Javascript/Typescript
- [JS Parameter Annotations](https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations) Annotations for parameters in your JS / TS Files to mimic named parameters.

## Angular

- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template) 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](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics) A better way to use the Angular CLI, directly from VSCode.
- [Angular Support](https://marketplace.visualstudio.com/items?itemName=vismalietuva.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](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
- [Sass](https://marketplace.visualstudio.com/items?itemName=Syler.sass-indented)

# 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](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge)

# Testing

- [Jest Snippets](https://marketplace.visualstudio.com/items?-itemName=andys8.jest-snippets)
- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-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](https://github.com/just-jeb/angular-builders/tree/master/packages/jest).

In your settings:

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

In your `launch.json`

```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](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)

# Customization

- [Panda Theme](https://marketplace.visualstudio.com/items?itemName=tinkertrain.theme-panda)
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)

# Others

- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)