[Configure Stylelint + Prettier for SASS/SCSS] #javascript #prettier #stylelint #sass #scss #masscode

notes.md

Instructions for Visual Studio Code

1. Be sure you run yarn install to intall any needed dependency.
2. Install extension: https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint
3. Set "prettier.stylelintIntegration": true in general or Workspace settings.
4. Set "editor.formatOnSave": true, in general or Workspace settings.

package.json

{
  "name": "svod-fe-website",
  "version": "0.1.0",
  "devDependencies": {
    "prettier": "^1.13.4",
    "prettier-stylelint": "^0.4.2",
    "stylelint": "^9.3.0",
    "stylelint-config-sass-guidelines": "^5.0.0",
  }
}

stylelint.rc

{
  "extends": [
    "stylelint-config-sass-guidelines",
    "./node_modules/prettier-stylelint/config.js"
  ],
  "rules": {
    "color-hex-case": "upper",
    "color-hex-length": "long",
    "max-nesting-depth": 3,
    "declaration-block-single-line-max-declarations": 1,
    "declaration-block-semicolon-newline-after": "always-multi-line",
    "number-leading-zero": "never",
    "declaration-property-value-whitelist": {
      "color": ["/^\\$|initial|inherit|transparent/"]
    },
    "order/order": [
      [
        {
          "type": "at-rule",
          "name": "include",
          "hasBlock": false
        },
        "dollar-variables",
        "custom-properties",
        {
          "type": "at-rule",
          "name": "extend"
        },
        "declarations",
        {
          "type": "at-rule",
          "name": "include",
          "hasBlock": true
        },
        {
          "type": "at-rule",
          "name": "include",
          "parameter": "breakpoint",
          "hasBlock": true
        },
        "rules"
      ]
    ]
  }
}

@yuceltoluyag These notes are quite old now. I don't know if the extension URL changed or this is a complete new extension but I'm now using the extension you mentioned.

my mistake, I commented by looking at the activity part :D