/josundt-stylelint-config

Stylelint packages and Ruleset for css and sass (scss) code style and linting

Primary LanguageJavaScript

@josundt/stylelint-config

Ruleset for css and sass (scss) code style and linting

Migrate from @josundt/sass-lint-config

If you have previously used @josundt/sass-lint-config, follow these instructions to remove:

  1. Uninstall @josundt/sass-lint-config, ensure dependency is removed from devDependencies

  2. Remove sasslintConfig property from package.json

  3. Remove all sass-lint-ignore* comments from scss files

  4. Remove npm script lint:sass (or similar) from package.json if exists

  5. Remove glen-84.sass-lint from recommended extensions .vscode\extensions.json.
    Uninstall exension from VSCode (optional).

Usage of @josundt/stylelint-config

  1. Make sure you have installed and set up the package @josundt/prettier-config first.

  2. Install this package

  3. Add a .stylelintrc file in the workspace root with the following content:

    {
      "extends": ["@josundt/stylelint-config"]
    }
  4. Add a .stylelintignore file in the workspace root with typically the following content:

    dist/**/*
    node_modules/**/*
    test.results/**/*
    test.coverage/**/*
    
  5. Add npm task in package.json

    {
      // ...
      "scripts": {
        // ...
        "lint:style": "stylelint **/*.{css,scss} -f unix --allow-empty-input"
        // ...
      }
      // ...
    }
  6. When using Visual Studio Code:

    a) Install the stylelint.vscode-stylelint VSCode extension.

    b) Add it as a workspace recommended workspace extension through .vscode/extensions.json file:

    {
      "recommendations": [
        // ...
        "stylelint.vscode-stylelint"
        // ...
      ]
      // ...
    }

    c) Configure the extension from b) by adding the following to the workspace .vscode/settings.json file:

    {
      // ...
      "scss.validate": false,
      "stylelint.validate": ["scss"]
      // ...
    }

    d) Add a task in .vscode/tasks.json to enable running stylelint as a VSCode task for the entire workspace:

    {
      "version": "2.0.0",
      "runner": "terminal",
      "tasks": [
        // ...
        {
          "label": "lint:style",
          "type": "shell",
          "command": "npx",
          "args": [
            "stylelint",
            "'**/*.{css,scss}'",
            "-f",
            "unix",
            "--allow-empty-input"
          ],
          "group": "build",
          "problemMatcher": {
            "fileLocation": "absolute",
            "owner": "Stylelint",
            "source": "Stylelint",
      
            "pattern": {
              "regexp": "^(.+):(\\d+):(\\d+): (.+ \\((.*)\\)) \\[(error|warning|info)\\]$",
              "file": 1,
              "line": 2,
              "column": 3,
              "message": 4,
              "code": 5,
              "severity": 6
            }
          }
        },
        // ...
      ]
    }