chefkoch-stylelint-config

Configuration for stylelint

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
chefkoch-stylelint-config
011.0.35 years ago6 years agoMinified + gzip package size for chefkoch-stylelint-config in KB

Readme

Installation

Install the required dependencies into your project:
npm install --save-dev chefkoch-stylelint-config

Create a .stylelintrc configuration file in your project root directory with following content:
{
  "extends": "chefkoch-stylelint-config"
}

CLI Usage

You are now able to call the command line interface of stylelint:
node_modules/.bin/stylelint <path to sccs files>

Autofixer

With --fix option stylelint will fix as many errors as possible. The fixes are made to the actual source files. All unfixed errors will be reported.
Just add --fix to the CLI command.
node_modules/.bin/stylelint <path to sccs files> --fix

Integration into Gulp Process

You can use the gulp-stylelint plugin to integrate stylelint into your gulp build process.
npm install --save-dev gulp-stylelint

We recommend to create a separate linting task. This gives you the opportunity to place it in another composed task or to run in directly via CLI.
var stylelint = require('gulp-stylelint');

gulp.task('style-lint', function() {
    return gulp
        .src(<path to sass files>)
        .pipe(stylelint({
            reporters: [{
                console: true,
                failAfterError: true, // this could be an environment variable
                save: <path to report file>, // found errors will be saved here.
                formatter: 'string'
            }]
        }));
});

Usage with PHPStorm

PHPStorm provides built in functionality for stylelint. Just open PhpStorm => Preferences and check the following settings:
PhpStorm Settings PhpStorm Settings
After that is done you should see warnings in your styles, when these do not fit the defined linting rules.

Testing

If you change/update the linting rules, or update stylelint, please validate the changes by testing the rules with:
npm run test

More Information

You can find more information through the following links: - stylelint - stylelint cli - gulp-stylelint - real life example ramen Have fun!