HTML Lint

Overview #

This HTML linter is designed to help you reduce the most common syntax errors that people do when they work with the data binding.

It can catch errors caused by:

1. misspelled data binding attributes
2. wrong syntax of the data binding attributes
3. accessing a non-existent property from a data binding model

How it works #

It uses HTMLHint - an HTML linter and extends its rules. It can also detect if a property does not exist on a model. In order for this rule to work, you’ll need to provide an example of your model in a json format. The linter reads this example and uses it to check the existing properties. Similar to how TypeScript uses type definition files. The definitions are read from a specific folder located at the root of the project named Prysm-models. The name of the file must equal the name of the model. For example, if the model’s name is Game, the file must be Game.json.

How to Use #

1. First, you need to install the dependencies. To do so run:

npm i

in the root folder of the tool.

2. After that run

npm run lint

Rules #

You can turn them on and off by setting their value to true or false respectively.

curly-brackets checks if the value of a data-bind-* attribute has curly brackets:

// correct
data-bind-value="{{Model.value}}"

// wrong, will log an error:
data-bind-value="Model.value"
data-bind-value="{{Model.value"
data-bind-value="{Model.value}"

property-accessors checks if you correctly access model properties through the Prysm data-binding:

// correct
data-bind-value="{{Model.prop}}"
data-bind-value="{{Model}}.prop"
data-bind-value="{{Model}}.{{prop}}"
data-bind-value="{{Model}}"

// wrong, will log an error:
data-bind-value="{{Model.}}prop"
data-bind-value="{{Model.}}{{prop}}"
data-bind-value="{{Model['prop']}}"

spelling - check for typos in the data binding attributes

// correct
data-bind-value="{{}}"

// wrong, will log an error:
dta-bind-value="{{}}"

class-toggle - checks for errors in the syntax of data-bind-class-toggle specifically:

// correct
data-bind-class-toggle="class-name:{{myModel.property}}"

// wrong, will log an error:
data-bind-class-toggle="{{myModel.property}}"

bind-for - checks for errors in the syntax of data-bind-for specifically:

// correct
data-bind-for="player:{{myModel.player}}"
data-bind-for="index, player:{{myModel.player}}"

// wrong, will log an error:
data-bind-for="{{myModel.player}}"

model-properties - checks if a property exists on a model. Works only if the access is not broken by curly braces.

const Model = {
    players: [
        {
            name: 'John Doe'
        }
    ]
}

// will log an error:
data-bind-value="{{Model.players[0].age}}"

// will not log an error:
data-bind-value="{{Model.players[0]}}.age"

Configuration #

All rules are listed in the .cohtmllintrc file. The ones under the cohtml key are specifically for Prysm:

"cohtml": {
    "curly-brackets": true,
    "property-accessors": true,
    "spelling": true,
    "class-toggle": true,
    "bind-for": true,
    "model-properties": true
},

You can add more data binding attributes to the .cohtmllintrc file under the key customDataBindAttributes:

"customDataBindAttributes": [
    "data-bind-custom-attribute",
]