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"
}
You are now able to call the command line interface of stylelint:
node_modules/.bin/stylelint <path to sccs files>
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
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'
}]
}));
});
PHPStorm provides built in functionality for stylelint. Just open PhpStorm => Preferences and check the
following settings:
After that is done you should see warnings in your styles, when these do not fit the defined linting rules.
If you change/update the linting rules, or update stylelint, please validate the changes by testing the rules with:
npm run test
You can find more information through the following links:
Have fun!