stylelint-config-copilot

A copilot that helps you navigating through authoring styleesheets. Highly opinionated stylelint configurations.

⚠ Current Status: ⚠

This project is very much work-in-progress. Right now it's about testing out different rules, combinations and plugins

Collection of shareable configurations for Stylelint and Stylelint plugins.

The configs are separated into dedicated packages:

• base: Stylelint's built-in rules
• scss: Sass (scss syntax) specific rules
• plugins: rules from various Stylelint plugins
• order - order specific rules
• stylistic - stylistic rules in plugin form (previously built-in Stylelint rules)

Usage information are in the packages' documentations.

Usage

See the official documentation on configuration.

Example configuration to extend copilot-configs.

module.exports = {
  extends: [
    'stylelint-config-copilot-<package>',
  ],

  // enter files to ignore (e.g. dependencies, libs, styleguide styles)
  ignoreFiles: [
    '**/node_modules/**',
  ],
  
  // define severity level
  defaultSeverity: 'warning', 
  
  // custom-rules & overwrites
  rules: {
  },
};

The defaultSeverity is set to warning. Some rules are set to error.

Warnings are considered violations to coding guidelines while errors (may) cause defective code.

While only errors exit with an exit code, using a zero tolerance policy is recommended by setting --max-warnings 0 (--mw 0) in combination with a Git-Hook. To simplify the setup of hooks, consider using husky.

Linting your stylesheets automated via CLI or during build is great, but linting warnings & errors as soon as they happen is the most effective. Consider using editor plugins to get short feedback loops.

Using a linter for the first time or changed the config and it all turns into colorful warnings and errors? Don't worry - this is quite normal. Your code (and you) have to get used to the rules. Start small and adjust your code over time.

If you do not agree with a rule - change or disable it. When there are exceptions and the linter should be bypassed, disable them selectively within the stylesheet.

Using the formatter, a report can be generated to go through the potential violations step-by-step.

Development

Setup

npm install

Test

Test will run ESLint and find potentially unused Stylelint rules in the base config

npm test