jshint in msbuild

I recently had to add build time Javascript validation to an ASP.NET project. It took me quite a while to figure out how to do so in a (reasonably) maintainable, understandable way.

I’m using Visual Studio 2010, and the project targets .NET 3.5. The same approach would work fine if the project was targeting .NET 4.0.

I’m using NuGet to manage dependencies. The first thing I did was add node-jshint as a dependency of the project.

I opened the project’s file (something.csproj). I added a target:

<Target Name=”jshint”>
<ItemGroup>
<JavaScript Include=”@(Content)” Condition=”%(Extension) == ‘.js’” />
</ItemGroup>
<PropertyGroup>
<node-jshint>$(PackagesDir)\node-jshint.0.5.5</node-jshint>
</PropertyGroup>
<Exec Command=”&quot;$(node-jshint)\tools\jshint.bat&quot; &quot;%(JavaScript.FullPath)&quot; –reporter &quot;$(node-jshint)\tools\lib\vs_reporter.js&quot; –config &quot;$(MSBuildProjectDirectory)\jshintrc.json&quot;” ContinueOnError=”true” />
</Target>

Make BeforeBuild depend on jshint:

<Target Name=”BeforeBuild” DependsOnTargets=”jshint”>

Add a new text file to the root of project called “jshintrc.json” If the file is included in the Visual Studio project, make sure the build action is “None” so Visual Studio doesn’t try to do anything with it. The file contents should look like this. The latest available version of node-json at this time, 0.5.5, doesn’t deal with a Byte Order Markers (BOM) in the jshintrc.json file, so when saving it, be sure the BOM isn’t included.

Now whenever Visual Studio builds the project, JSHint errors will appear in the VS error list just like all other types of errors. It runs JSHint on all .js files included in your project as content (the way .js should be included in your project).

This article has been cross-posted to my personal blog – please comment there.

More News

| 14th Jan 2021

CES 2021 Loves Stay-at-Home Customer Experiences

Maybe it’s time to rebrand CES as the Consumer Experience Show. What we’re seeing from the 2021 CES is the emergence of connected consumer experiences powering the stay-at-home economy. 

| 12th Jan 2021

TikTok, TikTok: Why 2021 is the Year of Live Commerce

The pandemic accelerated a shift to e-commerce by five years, so live commerce is having a moment. And 2021 is barely under way.

| 7th Jan 2021

Brace Yourselves: 2021 Will Change Everything about Digital Creative

If 2020 was about brands trying to win a race to create the best digital experience possible, 2021 is about rethinking the digital experience completely.