• Packages
  • Themes
  • Documentation
  • Blog
  • Discuss
Sign in

bem-levels

Search and open BEM blocks and elements in order of levels.
  • #bem
  • #open
tenorok
169
0
  • Repo
  • Bugs
  • Versions
  • License
Flag as spam or malicious

Bem-levels package for Atom

apm

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.

I think this package is bad news.

Good catch. Let us know what about this package looks wrong to you, and we'll investigate right away.

  • Terms of Use
  • Privacy
  • Code of Conduct
  • Releases
  • FAQ
  • Contact
with by