Javascript code refactoring with Visual Studio 17

As we have seen in the previous post, Visual Studio 2017 have introduced a lot of  code refactoring tools for C# and other languages like javascript. We can customize these options as we prefer and, for some aspects, define the rules for Javascript formatting is most important than with C# because with the first one the probability to do some mistakes is higher. So if we don’t like to waste time to refresh the web page, check the error, go back to Visual Studio and fix, we should spend some time to check the formatting and helper options.

Code style options

Under Tools > Options > Text Editor we can find the section Javascript/Typescript with the formatting options:

These options will help us on writing javascript code better and faster. Another important section is linting, where we can choose what are our preferences about bugs/errors checks and if we want to enable/disable it:

The second option introduced in Visual Studio 15.8, is very important and could impact to the Visual Studio performances, we can say to Visual Studio if we want to check only the opened javascript files or all the files in the solution. From my experience, the check of all javascript files in the solution could be very long and usually, check only the opened files is recommended. A compromise could be to run the first time the linting process on all the solution, fix the bugs/errors and then disable the option and leaving the check only for the opened files.

We can customize the linting preferences in the .eslintrc file in our windows user local directory:

{
/* See all the pre-defined configs here: https://www.npmjs.com/package/eslint-config-defaults */
"extends": "defaults/configurations/eslint",
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"plugins": [
"react"
],
"env": {
"amd": true,
"browser": true,
"jquery": true,
"node": true,
"es6": true,
"worker": true
},
"rules": {
"eqeqeq": 2,
"comma-dangle": 1,
"no-console": 1,
"no-debugger": 1,
"no-extra-semi": 1,
"no-extra-parens": 1,
"no-irregular-whitespace": 1,
"no-undef": 1,
"no-unused-vars": 2,
"semi": 1,
"semi-spacing": 1,
"valid-jsdoc": [
2,
{ "requireReturn": false }
],
.....

Live code analysis

We can now open a javascript file and see what Visual Studio can do for us.

Once the file is opened, we can click on the bottom left Ready icon, Visual Studio will show us the running operation:

This means that, in order to see the errors/warnings on the file, we’ll have to wait until Visual Studio will end this operation. Anyway it will not take too much time:

Now we can see that the $http parameter injected in the factory is no longer used and we can remove that. This is one of the example of how we can give benefits from Visual Studio linting and make better and cleaner Javascript code.

Summary

We have see how Visual Studio 2017 has improved the Javascript code refactoring and the linting process and how we can give benefist from it. We can choose if we want to analyze all the Javascript files in the solution (recommended the first time, not later) or only the opened files.

We can customize the linting options as well and choose ones to enable or disable. Then the live code analysis will help us to find errors, unused variables/parameters and warnings of our Javascript files.