Install Master CSS ESLint in Visual Studio Code

Guide to installing Master CSS ESLint in your Visual Studio Code.

Install ESLint extension

Install the VSCode ESLint in the Visual Studio Marketplace if you haven't already.

Install Master CSS ESLint

Install the Master CSS ESLint Config into your project via package managers.

npm install -D @master/eslint-config-css@rc eslint

Set up ESLint config

Create .eslintrc.json if you don't have one.

Add @master/css to the extends section.

{
    "extends": ["@master/css"]
}

Add VS Code settings

Create a .vscode/settings.json or set it in user settings.

Add @master/css/class-order to the eslint.codeActionsOnSave.rules section.
Add the language you want to lint to eslint.validate. The VSCode ESLint targets only javascript or javascriptreact files by default.

{
    "eslint.codeActionsOnSave.rules": [
        "@master/css/class-order"
    ],
    "eslint.validate": [
        "html",
        "php",
        "javascript",
        "typescript",
        "javascriptreact",
        "typescriptreact",
        "vue",
        "svelte",
        "rust",
        "astro",
        "markdown",
        "mdx"
    ]
}