bemlint

bemlint

This linter checks attribute class in final html files for BEM naming conventions.

Initiative cli code based on ESLint

Installation

npm install -g bemlint

Usage

bemlint test.html test2.html [options]

Loading via require

var bemlint = require("bemlint");
var options = { //not necessary
  elem: '__',
  mod: '_',
  wordPattern: '[a-z0-9]+(?:-[a-z0-9]+)*',
  excludeRules: [], //rules ids
};

//get array of messages
bemlint.verify('<div class="b-dropdown b-dropdown__element"><div class="b-dropdown__element"></div></div>', options);

Sublime-Linter

You can use it with SublimeLinter-contrib-bemlint plugin.

Options

• --elem/--e - element delimeter, default:

bemlint test.html --elem='__'

• --mod/--m - modifier and value delimeter, default:

bemlint test.html --mod='_'

• --wordPattern/--wp - regex, defines proper names for blocks, default:

bemlint test.html --wp='[a-z0-9]+(?:-[a-z0-9]+)*'

• --bem-prefixes/--bp - array of block names prefix for lint, example:

bemlint test.html --bp='['b-', 'l-', 'helper-']'

• --format/--f - specific output format, default:

bemlint test.html --f='stylish'

Available: compact|checkstyle|html|json|table|tap|unix|visualstudio|junit|jslint-xml|html-template-message|html-template-page|html-template-result

• --exclude-rules/--er - Array of rules ids to exclude from lint:

bemlint test.html --er='['isBlockElementInBlock']'

• --no-ignore - Disable use of .bemlintignore

bemlint test.html --no-ignore

• --exclude-selectors/--es - Array of selectors, which will be removed from validating

bemlint test.html --exclude-selectors='['code *', '.no-bemname-validate']'

Rules

• dublicate - finds same classes in one attribute
• isBlockElementInBlock - Block and his element cannot be in one place, wrong => class="b-block b-block__element
• isBlockModNoBlock - Block mod should be paired with it's block, wrong => class="b-block_mod_val"
• isElemModNoElement - Element mod should be paired with it's element, wrong => class="b-block__element_mod"
• isBlockWrapElement - Element should be nested in it's block =>

//right
<div class="b-dropdown">
  <div class="b-dropdown__element"></div>
</div>

//wrong, b-dropdown__element is not in block b-dropdown
<div class="b-dropdown3">
  <div class="b-dropdown__element"></div>
</div>