10/01/2018 momyx01

5 Must-have Visual Studio Code Extensions for Enterprise AngularJS projects

Despite the fact that Visual Studio Code already has some great features, it has a huge ecosystem of extensions and some of them are a must-have.

VS Code is by now the de-facto standard IDE for front-end development.

Here is a list of extensions that my team cannot live without:

1) VS Code – Debugger for Chrome

If you want to debug your AngularJs application and define breakpoints in your VS Code rather than in Chrome Debugger console, you need this extension.

To use this extension, you need to define your own debug configuration.

This is an example if you run the application via gulp serve

{
"name": "Launch Chrome with gulp serve",
"type": "chrome",
"request": "launch",
"runtimeArgs": [
"--remote-debugging-port=9222"
],
"url": "http://localhost:3000/#",
"webRoot": "${workspaceRoot}/src"
},

And this is the configuration that we use to debug our Jasmine unit-tests via Karma:/p>
{
"name": "Launch Chrome with gulp test:auto",
"type": "chrome",
"request": "launch",
"url": "http://localhost:9876/debug.html",
"webRoot": "${workspaceRoot}"
}

2) ES Lint

It’s really important in a team to use the same standards and conventions. This is the reason why you can use ES Lint to guarantee your code quality.

Do not forget to define your own configuration file with your own conventions in the file “.eslintrc” in the project root.

You can disable ES-LINT if needed with a comment line at the bottom of the file, e.g.

/* eslint eqeqeq: 0, curly: 2, no-undef:0, angular/log:0, no-console:0, angular/definedundefined:0 */

3) GitLens

A proper integration with Git is key as you develop.

GitLens provides you a rich toolbox of Git capabilities, such as navigation, insights, etc.

4) Beautify

A consistent formatting across the project is really important, especially to avoid annoying space changes in the code-reviews.

Beautify formats your file and you can define a configuration file for your project “.jsbeautifyrc”

5) Coverage Gutters

Test coverage is unfortunately quite often underestimated in front-end development.

I found this extension fantastic as it can give you a clear view of all code lines that are not executed by your unit tests.

Of course, this list is non exhaustive as there are a lot of “Code-Snippet” extensions that are really useful according to the framework that you are using.

,

Leave a Reply

Your email address will not be published. Required fields are marked *