josundt/josundt-stylelint-config

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

@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
           }
         }
       },
       // ...
     ]
   }