Despite the fact that the core application has already 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 the list of the extensions that my team cannot leave without:
1) VS Code – Debugger for Chrome
If you want to debug your AngularJs application and to define breakpoints in your VS Code rather than in Chrome Debugger console, you need this extensions.
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”,
And this is the configuration that we use to debug our Jasmine unit-tests via Karma:/p>
“name”: “Launch Chrome with gulp test:auto”,
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 */
A proper integration with Git is key as you develop.
GitLens provides you a rich toolbox of Git capabilities, such as navigation, insights, etc.
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 about all code lines that are not executed by your unit tests.
Of course, this list is not-exhaustive as there are also a lot of “Code-Snippet” extensions that are really useful according to the framework that you are using.