Using Travis CI and webhint

Travis CI is a CI/CD service you can use to run webhint to test your website.

Source code analysis

You can integrate webhint by adding it to the package.json of a Node project as shown in the “For Node projects” section below. If you are not using Node or don’t want to modify your project’s package.json, you can use the instructions in the “For other project types” section.

For Node projects

In your project, run:

npm install hint --save--dev

In the file package.json add a new script test-hint:

...
"scripts": {
    ...
    "test-hint": "hint ./" // ./ or the path where the files to test are.
  }
...

Add a .travis.yml file to your project:

language: node_js
node_js:
- 10.16.2

script:
  - npm install
  - npm run test-hint

Note: By default, hint will use configuration-development if a .hintrc file is not present.

For other project types

If your project is not a Node project or you don’t want to modify your package.json, you can

add a .travis.yml file to your project:

language: python

before_install:
- nvm install node

script:
  - npm install hint --no-save
  - node node_modules/hint/dist/src/bin/hint.js ./ # ./ or the path where the files to test are.

Travis CI includes nodejs and npm by default, but it is recommended to install them manually via the nvm install node command to ensure you are using the latest versions.

As in the previous example, the default configuration will be configuration-development.

Live site analysis

For Node projects

In your project, run:

npm install hint --save--dev

In the file package.json add a new script test-hint:

...
"scripts": {
    ...
    "test-hint": "hint https://url-to-your-project" // ideally, this url will be to your staging/preproduction environment.
}
...

Add a .travis.yml file to your project:

language: node_js
node_js:
- 10.16.2

addons:
  chrome: stable

script:
  - npm install
  - npm run test

Note: By default, hint will use configuration-web-recommended if a .hintrc file is not present.

Note: By default, configuration-web-recommended uses the puppeteer connector, which requires a Chromium browser to work. We install Chrome in our test environment by adding chrome to addons.

For other project types

If your project is not a Node project or you don’t want to modify your package.json, you can add a .travis.yml file to your project:

language: python

addons:
  chrome: stable

before_install:
- nvm install node

script:
   # Add the necessary steps to deploy your website.
  - npm install hint --no-save
  - node node_modules/hint/dist/src/bin/hint.js https://url-to-your-project

The default configuration in this case will be configuration-web-recommended.

In this case, we are telling to Travis CI to install chrome and nodejs.

Common

Further configuration

In order to change the output, severity of the hints, etc. you will have to use your own .hintrc file. Please check the configuring webhint section for more details.