posthtml-bem-linter

Чистая функция и PostHTML-плагин для проверки BEM-разметки в HTML. Форк gulp-html-bemlinter с подсчётом предупреждений и AST в результате.

Установка

npm i -DE posthtml-bem-linter

PostHTML-плагин

Добавьте в posthtml.config.js:

import { getPosthtmlBemLinter } from 'posthtml-bem-linter';

export default {
	plugins: [
		getPosthtmlBemLinter({
			getSourceName: (filename) => filename,
		}),
	],
};

Функция lintBem

import { lintBem } from 'posthtml-bem-linter';

const { nodes, warningCount } = lintBem({
	content: '<div class="block"><div class="block__elem"></div></div>',
	name: 'page.html',
});

При наличии ошибок lintBem выводит ASCII-дерево разметки, устанавливает process.exitCode = 1 и возвращает warningCount > 0.

Правила BEM

| Сообщение | Описание | |-----------|----------| | Element of element! | Элемент внутри элемента (block__elem__sub) | | Element outside its block! | Элемент без родительского блока на предках | | Element mixed with its block! | Блок и его элемент на одном узле | | Modifier without modifiable! | Модификатор без базового класса | | Wrong element separator! | Одиночный _ вместо __ | | Wrong modifier value separator! | Неверный разделитель в значении модификатора |

Changelog

См. CHANGELOG.md (локальный файл; на GitHub Pages — тот же путь).