Create your own custom rules, using CSS selectors, to lint an HTML page and make sure it follows your HTML/CSS conventions (classes, attributes, tags, structure etc.)
go to your app's folder and run npm i layout-linter
- create a file containing your own custom linting rules as a json
- these linting rules are based on CSS selectors (read more about them here), and can be as simple as the name of a tag (e.g.
div) or very elaborate. - here is a guide on how to set up the contents of your json file:
{
"rules": [{
"selector": /*
a CSS selector indicating the element(s) that will be tested
as to whether they adhere to the rules below,
e.g. ".some-class"
*/
"is": /*
(rule)
a tag name indicating what type the element must be,
e.g. "img"
*/,
"direct": /*
(rule)
an array of CSS selectors indicating direct children the element must contain,
e.g. ["#id-x", ".class-b"]
*/,
"contains": /*
(rule)
an array of CSS selectors indicating children (direct or indirect, it doesn't matter)
the element must contain,
e.g. ["#id-x", ".class-b"]
*/,
"attrs": /*
(rule)
an array indicating attributes the element must have,
e.g. ['attr-a', 'attr-b="xx"']
*/,
"parent": /*
(rule)
a CSS selector indicating a direct parent that the linted element must have
e.g. '.some-parent'
*/,
"parents": /*
(rule)
an array of CSS selectors indicating a set of (direct or indirect) parents that the linted element must have
e.g. ['.some-parent-a', '.some-parent-b']
*/,
"siblings": /*
(rule)
an array of CSS selectors indicating a set of siblings that the linted element must have
e.g. ['.some-sibling-a', '.some-sibling-b']
*/,
"not": {
/*
any of the above rules (is, direct, contains, attrs, parent, parents, siblings), wrapped inside this `not`,
indicating that these must NOT be true this time
*/
}
}, {
"selector": "....",
/* rule */,
/* rule */,
.....
..
}]
}
- click here for a real example of such a file
- name the file
.layoutrc(recommended) or whatever you like
- require the linting function anywhere your like by doing
const lintLayout = require('layout-linter'); - use the function as follows:
const lintLayout = require('layout-linter');
let result = lintLayout({
/*
- optional
- [String]
- an absolute (or relative to the curret directory) path to a json file
containing the linting rules
- if omitted, the linter will look for a `.layoutrc` file in your app's
root folder only (it will not look for it in any of its subfolders)
*/
layoutrc: '/some/custom/rules.config',
/*
- optional
- refers to the CSS that will be used to style the linting errors that
will appear in the linted HTML
- [String]
- an absolute (or relative to the curret directory) path to a .css file
- will use the default CSS (provided by layout-linter internally) if omitted
- can alse be set to false, in which case no CSS will be used
*/
css: '/some/custom.css',
/*
- mandatory
- [String]
- an absolute (or relative to the curret directory) path to the .html file you want to lint
- OR a valid HTML string (e.g. "<div>....</div>" or "<html>....</html>" etc..) that you want to lint
*/
source: './source.html',
;
/*
- optional
- [Boolean]
- the `html` key, of the object returned by this function, will always consist of a complete HTML document,
as a string, whether the function is passed an HTML fragment or a complete HTML document
- if the function is passed an HTML fragment and this property is set to true,
the `html` key, of the object returned by this function, will consist of the linted HTML fragment (as a string)
and not of a complete HTML document containing that fragment
- if the function is passed a complete HTML document setting this property to true or false will have no effect
*/
fragment: true
});
The function will return an object containing the following keys:
{
html: /* the linted HTML as a string */,
errors: /* the total number of errors found in HTML */,
log: /*
an array of objects, each object consisting of:
- a string, indicating the problematic element
- an array of error messages for that element
e.g. [{
element: '<p class="this"></p>',
errors: ['this element has this error', 'this element has this other error', ...]
}, {
element: '<div class="that"></div>',
errors: ['that element has this error', 'that element has this other error', ...]
}]
*/
}
git clone git@github.com:peopledoc/layout-linter.git
cd ./layout-linter/
make install
Read how to write tests for your rules.
In layout-linter/ project directory, run:
make run-demo
You will see an HTML page linted using the following set of rules (based on the Bootstrap framework HTML rules).
ℹ️ You can use DEBUG=true to show more information.
DEBUG=true make run-demo
In layout-linter/ project directory, run:
make test
This project is licensed under the MIT License.