Bem-levels package for Atom

Handy search BEM-entities from project levels for Atom.

Atom is a text editor for development.

BEM is a component-based approach for web development.

Bem-levels in action

Features

Sorting files in the order of project levels.
Search any BEM-entities in any technologies.
Search BEM-entity in specified technology.
Autofilling search field by:
- name of current active file and highlighting it in the list;
- last search query when the current active file does not relate with project.
Support the groups (multiple sets of project levels).

Usage

Step 1: Install

› apm install bem-levels

Step 2: Configuring project levels

Unfortunately, now Atom has no built-in mechanism for per-project config settings. Because of this reason bem-levels use package local-config for store information about project levels.

Format of local config similar to the Atom global configuration settings.

Example of .atom.cson in project root:

'*':
  'bem-levels':
    'levels':
      'touch': [
        'lib1/common.blocks/'
        'lib1/touch.blocks/'
        'lib2/touch.blocks/'
        'common.blocks/'
        'touch.blocks/'
      ]

In example above specified that for any file (*), package bem-levels has group touch, which consists of levels list.

Step 3: Setting up key bindings

We already can use bem-levels by invoke command-palette with shift-cmd-p shortcut, then type "Bem Levels: Touch" and press enter. This sequence of actions each time can be tedious. Atom allows to customize key bindings.

Example of ~/.atom/keymap.cson:

'atom-workspace':
  'shift-cmd-i': 'bem-levels:touch'

Options

Schema of all options is stored in the property configSchema from package.json.

targetTechs

Sets target technologies of files for searching.

In fact it is regexp for match extensions (js, bemhtml.js, etc) of files.

Default: .*

Example of searching only *.js and *.bemhtml.js files:

'*':
  'bem-levels':
    'targetTechs': '^js|bemhtml.js'

Development details

Install

› git clone https://github.com/tenorok/atom-bem-levels.git
› cd atom-bem-levels
› npm install
› apm link

Used packages

Package @bem/walk used for work with BEM file structure. Packages @bem/naming and @bem/entity-name used for work with BEM entities.

Atom package file-icons used for create file icons to list.

For run tests used mocha and chai with assert style.

Also used flowtype with comment syntax for type checking on precommit hook.

bem-levels