Shopify's stylelint rules and config
Clone or download
brendo Merge pull request #46 from Shopify/chore_bump-peer-dependency
Bump stylelint peerDependency to 9.4.0
Latest commit 923af9c Oct 12, 2018


Circle CI David-DM

Shopify's stylelint rules and config


Install stylelint and stylelint-config-shopify:

With Yarn

yarn add --dev stylelint stylelint-config-shopify

With npm

npm install stylelint stylelint-config-shopify --save-dev


Shopify’s stylelint rules come bundled in stylelint-config-shopify. To enable these rules, add a stylelint property in your package.json. See the stylelint configuration docs for more details.

"stylelint": {
  "extends": ["stylelint-config-shopify"]

Now you can run stylelint by adding the following linting script to your package.json. See the stylelint CLI docs for more details.

"scripts": {
  "stylelint": "stylelint 'src/**/*.scss'"

Run it:

With Yarn

yarn run stylelint

With npm

npm run stylelint


This config also includes a prettier config which can be extended to format .scss. Using the stylelint-prettier plugin, prettier changes are exposed as stylelint rule violations.

Install prettier:

$ yarn add --dev prettier

Extend the config in your package.json:

"stylelint": {
  "extends": [

Add a prettier config in package.json:

"prettier": {
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": false

Prettier fixes shall be reported when you run stylelint **/*.css and shall be autofixed when you run stylelint --fix **/*.scss.