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 — тот же путь).