bemlint

bemlint

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

Initiative cli code based on ESLint

Important

To use latest version of plugin update bemlint itself for 1.7.0 version!

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']'

• --errors/--error - Prints all messages as errors

bemlint test.html --errors

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>