Zeus + Bootlint

Post by **jussij** » Thu Jan 14, 2016 4:43 pm

The Bootlint utility checks for common HTML mistakes in webpages using Bootstrap and it possible to configure Zeus so that Bootlint is run from inside Zeus.

Below are the steps needed to do this configuration.

1. Since Bootlint requires Node.js, if you don't have Node.js installed, you will need to do that first of all.

You can download the Node.js installer from here: https://nodejs.org/en/download/

2. Run the installer and make sure you select the option to add it to the PATH.

3. Start a new Zeus instance and use the Tools, Dos Command Line to open up a command prompt.

Run this command:

Code: Select all

npm install -g bootlint

That should result in the following output:

Code: Select all

d:\Temp>npm install -g bootlint
C:\Users\<Current User>\AppData\Roaming\npm\bootlint -> C:\Users\Jussi Jumppanen.DESKTOP-IJ5MA3N\AppData\Roaming\npm\node_modules\bootlint\src\cli-main.js
bootlint@0.14.2 C:\Users\Jussi Jumppanen.DESKTOP-IJ5MA3N\AppData\Roaming\npm\node_modules\bootlint
+-- binary-search@1.2.0
+-- void-elements@2.0.1
+-- semver@5.1.0
+-- bluebird@3.1.1
+-- commander@2.9.0 (graceful-readlink@1.0.1)
+-- debug@2.2.0 (ms@0.7.1)
+-- glob@6.0.4 (path-is-absolute@1.0.0, inherits@2.0.1, once@1.3.3, inflight@1.0.4, minimatch@3.0.0)
+-- morgan@1.6.1 (on-headers@1.0.1, basic-auth@1.0.3, depd@1.0.1, on-finished@2.3.0)
+-- chalk@1.1.1 (escape-string-regexp@1.0.4, ansi-styles@2.1.0, supports-color@2.0.0, strip-ansi@3.0.0, has-ansi@2.0.0)
+-- cheerio@0.19.0 (entities@1.1.1, dom-serializer@0.1.0, lodash@3.10.1, css-select@1.0.0, htmlparser2@3.8.3)
+-- express@4.13.3 (escape-html@1.0.2, merge-descriptors@1.0.0, array-flatten@1.1.1, cookie@0.1.3, content-type@1.0.1, vary@1.0.1, utils-merge@1.0.0, methods@1.1.1, cookie-signature@1.0.6, etag@1.7.0, content-disposition@0.5.0, fresh@0.3.0, range-parser@1.0.3, path-to-regexp@0.1.7, serve-static@1.10.0, parseurl@1.3.0, depd@1.0.1, qs@4.0.0, on-finished@2.3.0, finalhandler@0.4.0, send@0.13.0, proxy-addr@1.0.10, accepts@1.2.13, type-is@1.6.10)
+-- body-parser@1.14.2 (content-type@1.0.1, bytes@2.2.0, depd@1.1.0, qs@5.2.0, iconv-lite@0.4.13, on-finished@2.3.0, raw-body@2.1.5, http-errors@1.3.1, type-is@1.6.10)

If you fail to see that output it means your Node.js installation is incorrect or it is not in the PATH.

4. Use the Zeus Options, Document Types menu to edit the HTML document type.

5. Move to the Compiler section of the document type and make the following changes.

Change the Command Line to this:

Code: Select all

bootlint "$fn"

Change the Errors Regex to be this:

Code: Select all

:[0-9]+:[0-9]+

Note: More Bootlint command line options can be found here: https://github.com/twbs/bootlint/

That is all that is required as per the configuration. To check that everything is working run the following test.

1. Create a test.html file containing the following code:

Code: Select all

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Test</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <button class="btn btn-default">Is this correct Bootstrap markup, Bootlint?</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
  </body>
</html>

2. With the test.html file as the active document use the Zeus Compiler, Compile menu to check the file for Bootstrap issues.

This should result in the following error output being displayed:

: bootstrap_error.png (11.16 KiB) Viewed 27559 times

Click on the error shown above and you will be returned to the line at fault in the test.html file.

Cheers Jussi.