Lumirelle's StyleLint config. Easy to use, customizable, and works with CSS, SCSS, Vue, and Tailwind CSS.
npm install -D @lumirelle/stylelint-configor
pnpm add -D @lumirelle/stylelint-configUse the exported helper function called lumirelle to construct your StyleLint configuration:
stylelint.config.js
import { lumirelle } from '@lumirelle/stylelint-config' export default lumirelle( /** * Options for generating StyleLint configuration. */ { /** * Files to ignore, same as `.stylelintignore`. * * Notice that, StyleLint use `micromatch` to match the files, the behavior is different from another widely used glob * package `tinyglobby`. * * @default GLOB_EXCLUDE * @see [micromatch](https://github.com/micromatch/micromatch) * @see [tinyglobby](https://github.com/SuperchupuDev/tinyglobby) * @see [GLOB_EXCLUDE](https://github.com/lumirelle/stylelint-config/blob/main/src/globs.ts#L6) */ ignoreFiles: [ 'your-ignore-files' ], /** * Stylistic configuration. Powered by `stylelint-stylistic`. * * If set to `true`, it will use the default stylistic config as below. * * If you want to use `prettier` as the formatter, you can set it to `false` to disable the stylistic config. * * @default * { * indent: 2, * quotes: 'single', * maxLineLength: 120, * } */ stylistic: { indent: 2, quotes: 'single', maxLineLength: 120, }, /** * Core rules. Can't be disabled. */ css: true, /** * Enable SCSS support. * * As StyleLint doesn't support both SCSS and LESS in the same file (e.g. in a single `.vue` file), if you enable both * SCSS and LESS, only SCSS will take effect. * * @default auto-detect based on the dependencies if both SCSS and LESS are not enabled manually */ scss: true, /** * Enable Less support. * * Requires peer dependencies: * * - `postcss-less` * - `stylelint-less` * * As StyleLint doesn't support both SCSS and LESS in the same file (e.g. in a single `.vue` file), if you enable both * SCSS and LESS, only SCSS will take effect. * * @default false */ less: false, /** * Enable Tailwind CSS support. * * If enabled, StyleLint will not validate Tailwind CSS specific at-rules. * * @default false */ tailwindcss: false, /** * Enable HTML support. * * @default true */ html: true, /** * Enable Vue support. * * @default auto-detect based on the dependencies */ vue: true, /** * Whether to order the stylesheet properties. Powered by `stylelint-config-recess-order`. * * @see https://github.com/stormwarning/stylelint-config-recess-order * @default true */ ordered: true, /** * Disable some opinionated rules to standard preference. * * You can also specify which category of rules to disable by providing an object with the category names as keys. * * Rules affected: * * - Symbol "pattern" rules: * - `selector-class-pattern` * - `selector-id-pattern` * - Code "maintainability" rules: * - `no-descending-specificity` * * @default false */ lessOpinionated: { /** * Whether to disable pattern rules. */ pattern: true, /** * Whether to disable maintainability rules. */ maintainability: true, } }, /** * Additional user-defined StyleLint configuration objects to mix. * * Both general and file-specific configuration objects are supported. * * @see [general config](https://stylelint.io/user-guide/configure) * @see [file-specific config](https://stylelint.io/user-guide/configure#overrides) */ { // This is a general configuration object, which will be mixed into the final config directly. rules: { 'selector-class-pattern': null, }, }, { // This is a file-specific configuration object, which will be mixed into the `overrides` section of the final config. files: ['**/*.scss'], rules: { 'scss/at-if-closing-brace-space-after': null, }, } // This just equivalent to passing the config objects to the `lumirelle` function like above. ).mix({ rules: { 'selector-class-pattern': null, }, })