stylelint-config-roboleary

    0.3.2 • Public • Published

    stylelint-config-roboleary

    My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.

    It includes the following:

    Rules changed

    stylelint-config-standard

    • declaration-empty-line-before: Effectively turn off the rule through ignore option. This clears the way for the ordering plugin to add blank lines.

    stylelint-color-format

    stylelint-a11y

    • a11y/media-prefers-reduced-motion: Require that an animation or transition has an accompanying media prefers-reduced-motion media query that disables it (Autofixable). Turned off, being autofixable is more disruptive than useful unfortunately.

    stylelint-declaration-block-no-ignored-properties

    • plugin/declaration-block-no-ignored-properties: This rule needs to be set to true to enable the plugin.

    stylelint-a11y

    Usage

    1. Install this package along with stylelint npm install --save-dev stylelint-config-roboleary stylelint as devDependencies.

    2. Create a stylelint config in your project directory e.g. .stylelintrc. Add the following to the file:

      {
        "extends": ["stylelint-config-roboleary"]
      }
    3. You can add scripts to your package.json to lint and fix your code from the command-line:

      {
           "scripts": {
             "lint": "stylelint **/*.{css,scss}",
             "lint:fix": "npm run style-lint -- --fix",
           }
      }
    4. Additionally, there are integrations for code editors. I use the stylelint extension for VS Code.

    Configuration in VS Code

    If you want to use stylelint and Prettier in VS Code, I recommend installing these 3 extensions: stylelint, Prettier, and Format Code Action to enable Prettier to be run as a code action.

    To format and lint CSS/SCSS code on save, you can update your user settings with the following:

    {
      "editor.defaultFormatter": "esbenp.prettier-vscode",
      "editor.formatOnSave": false,
      "editor.codeActionsOnSave": [
        "source.formatDocument",
        "source.fixAll"
      ],
    }

    Show gratitude

    If this helped you, please star the repo to help others find it. 🌟

    You can make a donation to enable me to make more great open-source software and tutorials. 🙏

    Install

    npm i stylelint-config-roboleary

    DownloadsWeekly Downloads

    13

    Version

    0.3.2

    License

    ISC

    Unpacked Size

    7.57 kB

    Total Files

    4

    Last publish

    Collaborators

    • robjoeol