@tofrankie/stylelint

Shared Stylelint configuration.

[!IMPORTANT] Before 1.0.0, releases may include breaking changes. Read the CHANGELOG before upgrading.

Quick Start

Install dependencies:

$ pnpm add stylelint @tofrankie/stylelint -D

ESM (stylelint.config.mjs):

export default {
  extends: ['@tofrankie/stylelint'],
}

CJS (stylelint.config.cjs):

module.exports = {
  extends: ['@tofrankie/stylelint'],
}

@tofrankie/stylelint exports the base preset by default.

Presets

Use one or more presets in extends. Later entries in extends override earlier ones.

Base

Base preset with HTML support and CSS property ordering.

export default {
  extends: ['@tofrankie/stylelint'],
}

Visual Studio Code: use stylelint.vscode-stylelint and merge the snippet below into settings.json to enable linting for .html:

{
  "stylelint.validate": ["html"]
}

SCSS

SCSS preset.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/scss'],
}

Vue

Vue preset.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue'],
}

Visual Studio Code: merge the snippet below into settings.json to enable linting for .vue:

{
  "stylelint.validate": ["vue"]
}

Vue + SCSS

Vue + SCSS preset.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue-scss'],
}

Do not use both vue and vue-scss; vue-scss already includes the Vue preset.

Miniprogram

Miniprogram preset with WXSS and WXML support.

WXSS parsing is powered by PostCSS, and WXML parsing is powered by @tofrankie/postcss-wxml.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/miniprogram'],
}

Visual Studio Code: merge the snippet below into settings.json to enable linting for .wxss and .wxml:

{
  "stylelint.validate": ["wxss", "wxml"]
}

uni-app

uni-app preset.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue', '@tofrankie/stylelint/uniapp'],
}

With SCSS, use vue-scss and then uniapp:

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/vue-scss', '@tofrankie/stylelint/uniapp'],
}

pxtorem

pxtorem addon preset for projects using postcss-pxtorem.

export default {
  extends: ['@tofrankie/stylelint/base', '@tofrankie/stylelint/pxtorem'],
}

Use this addon preset when you need to allow 1Px or 1PX to survive conversion.

WeChat SVG

WeChat SVG preset.

export default {
  extends: ['@tofrankie/stylelint', '@tofrankie/stylelint/wechat-svg'],
}

Merging languageOptions

When you extend multiple presets, later entries usually replace earlier languageOptions instead of deep-merging them, so some syntax settings can be dropped.

This package ships preset languageOptions for common cases, and exports mergeLanguageOptions plus preset objects so you can combine or override them safely.

Provided preset language options:

• BASE_LANGUAGE_OPTIONS
• MINIPROGRAM_LANGUAGE_OPTIONS

Example:

import { BASE_LANGUAGE_OPTIONS, mergeLanguageOptions } from '@tofrankie/stylelint'

const languageOptions = mergeLanguageOptions(
  BASE_LANGUAGE_OPTIONS,
  // your overrides...
  {
    syntax: {
      // ...
    },
  }
)

export default {
  extends: ['@tofrankie/stylelint'],
  languageOptions,
}