Stylelint

Stylelint is a widely adopted linter, mainly for style files.

Installation

You have to install Stylelint first. Currently Stylelint v16 is supported.

npm

npm install stylelint -D

yarn

yarn add stylelint -D

pnpm

pnpm install stylelint -D

bun(experimental)

bun install stylelint -d

Configuration

ESM

// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { stylelint } from '@modyqyw/fabric';
// or
// import { stylelint } from '@modyqyw/fabric/stylelint';

export default stylelint();

CJS

// stylelint.config.cjs
// or stylelint.config.js without "type": "module" in package.json
const { stylelint } = require('@modyqyw/fabric');
// or
// const { stylelint } = require('@modyqyw/fabric/stylelint');

module.exports = stylelint();

CLI

Update your package.json and add lint:stylelint script.

{
  "scripts": {
    "lint:stylelint": "stylelint \"./**/*.{css,scss,vue}\" --fix --cache --aei --ignore-path=.gitignore"
  }
}

Customization

Parameters

Passing parameters to the exported stylelint method can customize, and the stylelint method takes two parameters.

The first parameter is used for basic customization, you can pass either undefined or an object. To explicitly enable or disable a plugin, you need to explicitly set the boolean value in the passed object.

The following plugins are currently supported:

• order - Based on stylelint-config-recess-order. Sort CSS properties. Enabled by default.
• scss - Based on stylelint-scss. Support SCSS. Enabled by default if you have sass installed.
• style - What style of configuration to use. By default 'recommended' and can be 'standard'.

// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { hasScss, stylelint } from '@modyqyw/fabric';

export default stylelint({
  // based on stylelint-config-recess-order
  // enabled by default
  order: true,
  // based on stylelint-scss
  // enabled by default if you have sass installed
  scss: hasScss,
  // what style of configuration to use
  // by default `'recommended'`
  // can be `'standard'`
  style: 'recommended',
});

Potential conflicts

1. stylelint-config-recess-order may conflict with prettier-plugin-css-order and prettier-plugin-css-order is disabled by default. If you want to enable prettier-plugin-css-order, see Prettier chapter Customization section and disabled stylelint-config-recess-order.

The second parameter is used for further customization, you can pass an object to override the generated configuration.

// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { stylelint } from '@modyqyw/fabric';

export default stylelint(undefined, {
  rules: {
    // rules that require customization
  },
});

If you wish to add customization to the default configuration (e.g., support for LESS), you can do so as follows (you will need to install the dependencies yourself):

// stylelint.config.mjs
// or stylelint.config.js with "type": "module" in package.json
import { stylelint } from '@modyqyw/fabric';

const defaultConfig = stylelint();

export default {
  ...defaultConfig,
  rules: {
    ...defaultConfig.rules,
    // rules that require customization
  },
};

Potential conflicts

The configuration supports Vue, TailwindCSS and Module CSS by default. When customizing the rules, please adjust them carefully to avoid overriding them and causing errors.

Integration

VSC

Install the corresponding Stylelint plugin first.

Update user settings or workspace settings as appropriate.

{
  // Disable the built-in CSS linter.
  "css.validate": false,

  // Disable the built-in LESS linter.
  "less.validate": false,

  // Disable the built-in SCSS linter.
  "scss.validate": false,

  // Languages that enable Stylelint snippets.
  "stylelint.snippet": ["css", "scss", "vue"],

  // Languages that ESLint validates.
  "stylelint.validate": ["css", "scss", "vue"],

  // Stylelint auto-fix after CSS, SCSS manual save.
  "[css][scss]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit",
    },
  },

  // Stylelint auto-fix after Vue manual save.
  "[vue]": {
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit",
    },
  },
}

WebStorm

WebStorm comes with Prettier, see VSC to tweak it yourself.

lint-staged

If you are using the lint-staged configuration provided by the package, see the lint-staged chapter.

If you are not, you can refer to the following configuration.

// lint-staged.config.mjs
// or lint-staged.config.js with "type": "module" in package.json
export default {
  '*.{css,scss,vue}': 'stylelint --fix --cache --aei --ignore-path=.gitignore',
};