stylelint-config-rivet-scss v1.0.1
stylelint-config-rivet-scss
This package extends stylelint-config-standard-scss
(see stylelint documentation) with rules specific to creating projects within the Rivet extended universe. It is a Rivet-specific shareable SCSS
config for Stylelint
.
Because this configuration is SCSS
specific, it is assumed that you will be using Dart Sass.
Installation
You can include this package in your project by installing it via npm
:
npm install --save-dev stylelint-config-rivet-scss
Usage
Next you will need to setup the configuration for your project using one of the following options:
package.json
{
"stylelint": {
"extends": "stylelint-config-rivet-scss"
}
}
.stylelintrc
{
"extends": "stylelint-config-rivet-scss"
}
stylelint.config.js
module.exports = {
'extends': 'stylelint-config-rivet-scss'
}
Build tools
Gulp
Many traditional Rivet projects use Gulp
to handle their build processes. This stylelint
configuration is ideal for integrating with Gulp
.
First, you will need to make sure that Gulp
, Sass
, and the Gulp
build tools Gulp Sass
and Gulp Stylelint
are installed.
npm install --save-dev gulp gulp-stylelint gulp-sass sass
Next, you will need to incorporate this into your Gulp
setup. Below is an example gulpfile.js
, which shows how to include the build tool in your file and how to write the linting task.
const { src } = require("gulp");
const sass = require('gulp-sass')(require('sass'));
const stylelint = require('gulp-stylelint');
function lintSassWatch() {
return src("src/sass/**/*.scss")
.pipe(stylelint({
failAfterError: false,
reporters: [
{formatter: 'string', console: true}
]
}));
}
function lintSassBuild() {
return src("src/sass/**/*.scss")
.pipe(stylelint({
reporters: [
{formatter: 'string', console: true}
]
}));
}
We recommend writing separate functions for linting build
versus watch
tasks. For lint functions related to your watch
tasks we recommend including the failAfterError: false
option. This option defaults to true
, and will cause your watch process to fail if it encounters an error. While this functionality is desirable for a build
task, it can be more annoying than helpful for a watch
task.
webpack
Finally, there are a number of Rivet-based applications which rely on webpack
to bundle their code.
First, you will need to make sure that the stylelint
plugin for webpack
is installed.
npm install --save-dev stylelint-webpack-plugin
Next, you will need to setup stylelint
in your webpack
configuration. Below is an example webpack.config.js
file.
const stylelint = require('stylelint-webpack-plugin');
module.exports = {
// ...
plugins: [
new stylelint({ failOnError: true }),
],
// ...
}
It's important to note that when using transpilers (such as babel
) and linting tools, the order they are listed in usually matters as you want to ensure that your code is linted before being transpiled.
Additional integrations
Stylelint has integrations available for most of the major, modern code editors.