Rhapsodic Stylelint Config

The shared Stylelint config for Rhapsodic projects.

Use it to lint CSS, SCSS, Vue, and HTML styles with the same rules across projects. To see the rules that this config uses, please read the configs.

Installation and usage

Add @rhapsodic/stylelint-config and stylelint itself to your project:

pnpm add -D @rhapsodic/stylelint-config stylelint

Requires Stylelint 17.

Set your stylelint.config.js to:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config'],
};

Add a lint script:

{
  "scripts": {
    "lint:style": "stylelint \"**/*.{css,scss,vue,html}\""
  }
}

Presets

The default preset includes base CSS rules, SCSS support, and Vue/HTML support:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config'],
};

You can choose a smaller preset if a project does not use SCSS or Vue:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config/base'],
};

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config/scss'],
};

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config/vue'],
};

Rule overrides

If the value of a rule does not suit you, specify that rule in the rules section with the value you want:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config'],
  rules: {
    '@stylistic/indentation': 'tab',
  },
};

You can turn off rules by setting their value to null.

For example:

/** @type {import('stylelint').Config} */
export default {
  extends: ['@rhapsodic/stylelint-config'],
  rules: {
    '@stylistic/max-line-length': null,
  },
};

Please refer to Stylelint docs for detailed info on using this linter.

License

MIT License