This package extends stylelint-config-standard
(see stylelint documentation) with rules specific to creating projects within the Rivet extended universe.
You can include this package in your project by installing it via npm
:
npm install --save-dev stylelint-config-rivet
Next you will need to setup the configuration for your project using one of the following options:
package.json
{
"stylelint": {
"extends": "stylelint-config-rivet"
}
}
.stylelintrc
{
"extends": "stylelint-config-rivet"
}
stylelint.config.js
module.exports = {
'extends': 'stylelint-config-rivet'
}
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
and its stylelint
build tool are installed.
npm install --save-dev gulp gulp-stylelint
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 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.
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. There is a different stylelint-loader
available; however, it does not allow for @imports
, and will therefore only lint the main file for each require/entry
(see plugin documentation).
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.
Stylelint has integrations available for most of the major, modern code editors.