stylelint-config-vi

This package provides a Stylelint shareable config for the VI Company's Sass coding style.

Installation

To make use of this config, install Stylelint and this package as a development dependency of your project:

npm i stylelint stylelint-config-vi -D

Usage

Create a .stylelintrc.js config file in the root of the project:

.stylelintrc.js

module.exports = {
  extends: 'stylelint-config-vi'
};

Migration to Stylelint 14.0.0

If you use Stylelint to lint anything other than CSS files, you will need to install and configure these syntaxes.

SCSS

Install the PostCSS SCSS Syntax:

npm i postcss postcss-scss -D

Update your .stylelintrc.js file

.stylelintrc.js

module.exports = {
  extends: 'stylelint-config-vi',
  overrides: [
    {
      files: ['**/*.scss'],
      customSyntax: 'postcss-scss',
    },
  ],
};

Add the language identifiers you want to validate using the stylelint.validate option:

1. To the Workspace Settings: Ctrl+Shift+P and select Preferences: Open Workspace Settings (JSON)
2. Or User settings: Ctrl+Shift+P and select Preferences: Open Settings (JSON)`

Example VS Code config

{
  "stylelint.validate": ["css", "postcss", "scss"]
}

Vue.js

Install the PostCSS HTML Syntax:

npm i postcss-html -D

Update your .stylelintrc.js file

.stylelintrc.js

module.exports = {
  extends: 'stylelint-config-vi',
  overrides: [
    {
      files: ['**/*.vue'],
      customSyntax: 'postcss-html',
    },
  ],
};

Add the language identifiers you want to validate using the stylelint.validate option:

1. To the Workspace Settings: Ctrl+Shift+P and select Preferences: Open Workspace Settings (JSON)
2. Or User settings: Ctrl+Shift+P and select Preferences: Open Settings (JSON)

Example VS Code config

{
  "stylelint.validate": ["css", "postcss", "vue"]
}

References

• Stylelint migration guide to 14.0.0
• vscode-stylelint migration guide

License

MIT © VI Company