Linting HTML with Sublime Text 3, SublimeLinter, HTML Tidy for Windows, and SublimeLinter HTML Tidy on Windows

Linting is the process of running a program that will analyse code for potential errors.

In this article we will be Sublime Text 3, SublimeLinter, SublimeLinter HTML Tidy, and HTML Tidy for Windows to lint some HTML code.

  1. Install Sublime Text 3
  2. Install SublimeLinter
  3. Install HTML Tidy for Windows
  4. Install SublimeLinter HTML Tidy

Install Sublime Text 3

Sublime Text 3 is a sophisticated text editor for code, markup, and prose.

This is a free software to try and the trial period doesn’t stop but it does have a pop up every so often that reminds to you play fair. Purcase the software like I did. It is a solid investment if you are going to do any coding.

Install SublimeLinter

SublimeLinter is a plugin for Sublime Text that provides a framework for linting code.

  1. With Sublime Text 3 open hold CTRL + SHIFT + P and type install
  2. Select Package Control: Install Package
  3. Type SublimeLinter
  4. Select SublimeLinter
  5. You will get a Package Control Message that says the package is installed

Install HTML Tidy for Windows

HTML Tidy for Windows is a binary that is needed by the SublimeLinter HTML Tidy plugin. It allows you to run Tidy on Windows.

  1. Navigate to the HTML Tidy for Windows website
  2. Select the tidy.zip link to download
  3. Extract the tidy.exe file to a place that SublimeLinter will have access to it
    1. For example C:\Users\Username\tidy

Install SublimeLinter HTML Tidy

SublimeLinter HTML Tidy

  1. With Sublime Text 3 open hold CTRL + SHIFT + P and type install
  2. Select Package Control: Install Package
  3. Type Sublimelinter-html-tidy
  4. Select Sublimelinter-html-tidy
  5. You will get a Package Control Message that says the package is installed
  6. To use tidy you have to point SublimeLinter to the tidy.exe file
    1. In Sublime Text 3 navigate to Preferences > Package Settings > SublimeLinter > Settings

    2. In the new window scroll down to paths

    3. Copy that section to the tab on the right

      "paths": {
          "linux": [],
          "osx": [],
          "windows": []
      },
      
    4. Enter your path to tidy.exe in the windows option

      {
        "paths": {
            "linux": [],
            "osx": [],
            "windows": ["~/tidy"]
        },
      }
      

      Note: You need to use forward slashes.

    5. Save the setting with CTRL + S

    6. Close the window

  7. Now open a HTML document and errors in your HTML will be displayed