Skip to content

Latest commit

 

History

History
115 lines (79 loc) · 5.39 KB

README.md

File metadata and controls

115 lines (79 loc) · 5.39 KB

stylelint-config-spaceninja

NPM version Build Status Renovate

A sharable stylelint config object that enforces Space Ninja's CSS Standards

Installation

Install stylelint and stylelint-config-spaceninja:

npm install stylelint stylelint-config-spaceninja --save-dev

Usage

If you've installed stylelint-config-spaceninja locally within your project, just set your stylelint config to:

{
  "extends": "stylelint-config-spaceninja"
}

You'll probably also want to add a script to your package.json file to make it easier to run Stylelint with this config:

"scripts": {
  "lint:css": "stylelint '**/*.css'"
}

Using with Prettier

It's common to pair Stylelint with Prettier. If you're going to use both, you'll want to add stylelint-config-prettier, which is a config that disables any Stylelint rules that conflict with Prettier.

npm install stylelint-config-prettier --save-dev

Then add it to your Stylelint config. It'll need to be the last item in the extends array so it can override other configs.

{
  extends: ["stylelint-config-spaceninja", "stylelint-config-prettier"],
}

Then you can update your package.json script to run Prettier as well as Stylelint:

"scripts": {
  "lint:css": "prettier --list-different '**/*.css' && stylelint '**/*.css'"
}

Extending the config

Simply add a "rules" key to your config, then add your overrides and additions there.

For example, to change the at-rule-no-unknown rule to use its ignoreAtRules option, change the indentation to tabs, turn off the number-leading-zero rule,and add the unit-whitelist rule:

{
  "extends": "stylelint-config-spaceninja",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "ignores"
      ]
    }],
    "indentation": "tab",
    "number-leading-zero": null,
    "unit-whitelist": ["em", "rem", "s"]
  }
}

Documentation

Extends

Plugins

Configured Lints

This is a list of the lints turned on in this configuration (beyond the ones that come from stylelint-config-standard-scss), and what they do.

Declaration