Search code examples
csseslintstylelint

Align values of css attributes with eslint or stylelint

.backend-layout {
  background-image:       linear-gradient(to bottom, white, #ccc);
  display:                grid;
  grid-template-columns:  auto;
  grid-template-rows:     0 40px minmax(40vh, 100vh) 40px;
  height: 100vh;
}

is it possible to align height value with other attributes of the class automatically (--fix option) via eslint or stylelint?

Dmitry

Solution

  • is it possible to align height value with other attributes of the class automatically (--fix option) via eslint or stylelint?

    There isn't a built-in rule in stylelint to do this.

    I don't believe ESLint can do this either as it is used to lint JavaScript, rather than CSS.

    However, stylelint is extensible via its plugin system. You can create a plugin for this specific use case.

    As per this discussion in the stylelint issue tracker, you could call your plugin stylelint-declaration-block-no-misaligned-values. It would ensure that all the values within a declaration block beginning at the same column number.