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 Gameface-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.

  1. 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 Gameface 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 Gameface:

"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",
]
← Grapesjs
Immediate Layout →