https://github.com/valantic/stylelint-config-valantic

Default valantic configuration for stylelint.
https://github.com/valantic/stylelint-config-valantic

css scss stylelint stylelint-config valantic

Last synced: 8 days ago
JSON representation

Default valantic configuration for stylelint.

• Host: GitHub
• URL: https://github.com/valantic/stylelint-config-valantic
• Owner: valantic
• License: mit
• Created: 2018-03-12T09:55:11.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-01T01:32:01.000Z (3 months ago)
• Last Synced: 2024-09-15T18:15:23.705Z (2 months ago)
• Topics: css, scss, stylelint, stylelint-config, valantic
• Language: SCSS
• Size: 524 KB
• Stars: 1
• Watchers: 8
• Forks: 0
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGES.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# valantic stylelint configuration

To ensure a high an consistent code quality for SCSS/CSS we use stylelint.

[https://stylelint.io/](https://stylelint.io/)

## Version

Our config is currently optimized for Stylelint 13.0.0 To check for updates, see [https://github.com/stylelint/stylelint/releases](https://github.com/stylelint/stylelint/releases)

**Note that Stylelint is not backwards compatible and linting will fail if the configuration contains settings, which are not known to the current version!**

## Installing stylelint-config-valantic package

```shell

npm install stylelint-config-valantic stylelint --save-dev

```

### Create config

In the root of your project add a `.stylelintrc.js` file and add the following content to enable the valantic config for your project.

```js

module.exports = {

  "extends": "stylelint-config-valantic",

  "rules": {

    // Project related rules

  }

}

```

### Create --fix config

It is recommended to have a separate `--fix` config, that uses some additional rules (e.g. for property order) to hide non-blocking issues from the user but auto apply them on git hooks.

1. Create an additional `.stylelintrc.fix.js` file

```js

module.exports = {

  extends: [

    'stylelint-config-valantic/fix',

    './.stylelintrc.js'

  ],

};

```

**NOTE: using `--config` in the fix command will disable the auto-merging of nested stylelint configurations.** It therefore is recommended to move folder specific conigurations to the `overrides` section of the base configuration.

```js

module.exports = {

  overrides: [

    {

      files: ['src/styleguide/routes/**/*.*'],

      rules: {

        'selector-class-pattern': null,

      }

    }

  ]

};

```

2. Add a `package.json` script, if you want to test manually.

```json

{

  "stylelint": "stylelint --cache 'src/**/*.?(vue|scss)'",

  "stylelint:fix": "npm run stylelint -- --cache=false --config .stylelintrc.fix.js --fix"

}

```

3. Assign the `--fix` config for `lint-staged`.

```json

{

  "lint-staged": {

    "*.{css,vue,scss}": [

      "stylelint --config .stylelintrc.fix.js --fix"

    ]

  }

}

```

## Use

Now you're ready to enable Stylelint in your editor or use it on the command line!

### PhpStorm

Go to `PhpStorm > Preferences` and search for Stylelint or navigate to `Languages & Frameworks > Stylesheets > Stylelint` and enable it.

### Console

You can also lint your code from the console. To do this, add a script to your `package.json`.

```

"scripts": {

  "stylelint": "stylelint 'app/**/*.scss' --config .stylelintrc; exit 0"

}

```

Now you can execute the linter with the following command.

```

$ npm run stylelint

```

## Know issues

### Undefined rule

In case you get errors like "Undefined rule ..." you may have a version conflict between Stylelint and this configuration. Make sure you're using the above mentioned Stylelint version.