This is part 2 to my last post, which you’ll want to read first since I’m going to assume some of your gruntfile.js has some necessary settings.

 

Using Grunt to JSHint (Code Quality) and jscs (Code Style checker) your JavaScript code.

 

In this post, I'm going to show you how to get Gruntjs to check your JavaScript Code for quality in Visual Studio 2015.

 

Add this to your package.json file.

 

"grunt-jscs": "latest",
"grunt-contrib-jshint": "latest"

 

This will add JSCS and JSHint to your node_modules folder and let us run our tasks.

 

Add

 

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-jscs');

 

to gruntfile.js at the bottom with the rest of your loadNpmTasks

 

Add

 

jshint: {
	all: [
		'Gruntfile.js', 'Scripts/app/*.js'
	],
	options: {
		'browser': true,
		'node': true,
		'jquery': true,
		'boss': false,
		'curly': true,
		'debug': false,
		'devel': false,
		'eqeqeq': true,
		'bitwise': true,
		'eqnull': true,
		'evil': false,
		'forin': true,
		'immed': false,
		'laxbreak': false,
		'newcap': true,
		'noarg': true,
		'noempty': false,
		'nonew': false,
		'onevar': true,
		'plusplus': false,
		'regexp': false,
		'undef': true,
		'sub': true,
		'strict': true,
		'unused': false,
		'white': true,
		'es3': true,
		'camelcase': true,
		'quotmark': 'single',
		'globals': {
			'define': false,
			'describe': false,
			'xdescribe': false,
			'expect': false,
			'it': false,
			'xit': false,
			'spyOn': false,
			'beforeEach': false,
			'afterEach': false
		}
	}
},
jscs: {
	all: [
		'Gruntfile.js', 'scripts/app/*.js'
	],
	options: {
		config: '.jscs.json'
	}
},

 

in grunt.initConfig

 

And add

 

grunt.registerTask('build', ['jshint', 'jscs', 'uglify', 'less']);

 

under

grunt.registerTask('default', ['bower:install']);

 

At the top of the file change, set or add

 

/// <binding BeforeBuild='build' />

 

This is a change from Part 1. I’ve rolled all the other tasks from Part 1 into the one build task so that each grunt task in the array will be run at Build.

 

You’ll also need a .jscs.json file. This file was quite annoying to add from VS since it won’t allow you to create .* files in solutions that are not vNext. Create the file with command line, the package manager console, or create a javascript file and rename.

 

Add this to your newly created jscs file

{
    "requireCurlyBraces": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "try",
        "catch"
    ],
    "requireSpaceAfterKeywords": [
        "if",
        "else",
        "for",
        "while",
        "do",
        "switch",
        "return",
        "try",
        "catch"
    ],
    "requireSpaceBeforeBlockStatements": true,
    "requireParenthesesAroundIIFE": true,
    "requireSpacesInConditionalExpression": true,
    "requireSpacesInAnonymousFunctionExpression": {
        "beforeOpeningRoundBrace": true,
        "beforeOpeningCurlyBrace": true
    },
    "requireSpacesInNamedFunctionExpression": {
        "beforeOpeningCurlyBrace": true
    },
    "disallowSpacesInNamedFunctionExpression": {
        "beforeOpeningRoundBrace": true
    },
    "requireMultipleVarDecl": "onevar",
    "requireBlocksOnNewline": true,
    "disallowPaddingNewlinesInBlocks": true,
    "disallowEmptyBlocks": true,
    "disallowSpacesInsideObjectBrackets": true,
    "disallowSpacesInsideArrayBrackets": true,
    "disallowSpacesInsideParentheses": true,
    "requireCommaBeforeLineBreak": true,
    "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
    "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
    "requireSpaceBeforeBinaryOperators": [
        "=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
        "&=", "|=", "^=",

        "+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
        "|", "^", "&&", "||", "===", "==", ">=",
        "<=", "<", ">", "!=", "!=="
    ],
    "requireSpaceAfterBinaryOperators": true,
    "requireCamelCaseOrUpperCaseIdentifiers": "ignoreProperties",
    "disallowKeywords": ["with"],
    "disallowMultipleLineStrings": true,
    "validateIndentation": 4,
    "disallowTrailingWhitespace": true,
    "disallowTrailingComma": true,
    "requireLineFeedAtFileEnd": true,
    "requireCapitalizedConstructors": true,
    "excludeFiles": ["**/*.min.js", "**/*.debug.js", "**/*.intellisense.js", "**/*-vsdoc.js"]
}

 

Of course you can customize all of these configurations to your liking. You’ll likely find out what “to your liking” means once you start coding and run into an issue with one of the code style rules that keeps you from working.

 

While some rules can be annoying if it’s not a normal practice for you, I’d highly recommend sticking to them. I firmly believe clean code makes a better programmer.

 

The excludeFiles in the previous block is an important rule to add as it won’t check minified files or some of VS’s out of the box files.

 

Because of the way NuGet works, which doesn’t allow you to customize where vendor scripts and such goes, I’ve found it easier to move all of my javascript files into /scripts/app/ or some other directory. This allows your jshint and jscs tasks to be run on your own code and not get build errors from less carefully written vendor scripts.

 

According to Mads Kristensen using these build tasks is supposed to keep the project from building if it fails to pass the jslint or jscs build.

 

So there you have it. These task services provide powerful tools to get things done and keep you on the coding straight and narrow.

 

Since Gulp (similar to Gruntjs) is the default in vNext projects, I’m going to be looking into setting both of these parts in Gulp. Stay tuned to Part 3!