Andrés Villenas Blog

Passion for programming

Installing JSHint and JSCS in Visual Studio Code

In order to improve the quality of the code produced by you and your team, there are some tools that can help to enforce standards, conventions and code style.

JSHint is a tool that allows to detect potential errors and to define code standards and conventions. This tool cal help a team to define the standards that everyone should follow when they are writing JavaScript code.

On the other hand, JSCS allows to define conventions about code style. For instance, you can define that a space is required after the 'if' keyword, or also that a semicolon is required after statement.

In Visual Studio Code those tools are not enable by default like in other code editors. However, you can add them manually following the next steps.

  1. Download and install the latest version of Node.js
  2. Check the installed version of Node.js using
    node -v
  3. Use npm (installed with Node.js) to install JSHint (option -g is to install it globally so you don't need to do it in every project)
    npm install -g jshint
  4. Use npm to install JSCS
    npm install -g jscs
  5. Open Visual Studio Code and press F1
  6. Enter the following command to install JSHint
    ext install (enter) 
    jshint
  7. Enter the following command to install JSCS
    ext install (enter) 
    jscs
  8. JSHint and JSCS are installed

Once, you have installed these extensions, you will see some alerts if the code does not meet the default rules.

In the following screens you can see the alerts from JSCS and JSHint.

These alerts are not only to show the code has something wrong but also that can be integrated with an automated task (using Gulp for example) that is added in your workflow prior to release the code to quality assurance and production environments. But that is a different topic that I would show in another post.

That's it for today.

See you soon in the digital neighborhood!

Comments (5) -

  • mumba

    3/26/2017 6:34:40 PM | Reply

    Thanks for your guide!

    • Andrés Villenas

      6/13/2017 8:06:39 PM | Reply

      You are welcome

  • Alexandru

    4/26/2017 10:12:16 AM | Reply

    Hello,

    I followed the steps described in your article

    I created an  app.js file in a folder, then I entered your code

    However I am not able to reproduce the  warning below

    type 'string ' is not assignable to type 'number'

    Could you please mention which JSHint or JSCS setting causes this warning to appear ?

    I use

    VS Code 1.11.2
    JSHint 0.10.15
    JSCS Linting 0.1.9


  • Alexandru

    5/2/2017 3:05:20 AM | Reply

    What settings have you made to get the error below in your app.js file ?
    type 'string' is not assignable to type 'number'

    JSHint and JSCS do not show it on my computer

    • Andrés Villenas

      6/13/2017 8:12:05 PM | Reply

      Hi Alexandru,

      None, I just installed JSHint and JSCS with the default settings and it worked as expected since the beginning.

      Maybe you have another extension that is causing incompatibility issues with JSHint?

Add comment

Loading