Where can I find the CSS properties order used by Stylelint?

Question

Using Stylelint, I have the CSS order option activated.
I haven't been able to set up Visual Studio Code to show the errors.
Where can I find the used declaration/property order?

Here is my .stylelintrc.js :

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-concentric-order'],
  rules: {
    'at-rule-no-unknown': [
      true,
      { ignoreAtRules: ['mixin', 'if', 'else', 'include', 'extend'] },
    ],
    'max-nesting-depth': 4,
    indentation: 4,
    'selector-pseudo-element-no-unknown': [
      true,
      { ignorePseudoElements: ['v-deep'] },
    ],
  },
};

Answer 1

You are extending the stylelint-config-concentric-order community config. This config includes and configures the stylelint-order community plugin. You can find the order of the properties in the repo on GitHub.

You can see Stylelint errors in VS Code using the official Stylelint extension.

And you can have the extension automatically fix problems on save, which will include the order of your properties, using the editor.codeActionsOnSave configuration property:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": ["css", "postcss","scss"],
  "css.validate": false,
  "scss.validate": false
}

Alternatively, you can run npx stylelint "**/*.scss" --fix" on the command line to automatically fix problems.