@btrl/stylelint-config

Coding standards for all things style-related, specifically CSS & SCSS with vue3.

Installation

# Install the config as a dev dependency.
pnpm add -D @btrl/stylelint-config

Peer dependencies

You need to additionally install stylelint into your project.

# Install manually
pnpm add -D stylelint

Usage

Depends on your default module system configuration for Node.js, create a stylelint.config.cjs file using CommonJS OR create a stylelint.config.mjs file using ES module with the following contents:

// stylelint.config.cjs
module.exports = {
  extends: '@btrl/stylelint-config',
}

// stylelint.config.mjs
export default {
  extends: '@btrl/stylelint-config',
}

Config VS Code lint & auto fix

• Install the VS Code Stylelint extension.
• Add the following to your workspace settings in .vscode/settings.json:

{
  "prettier.enable": false,
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "stylelint.validate": [
    "css",
    "scss",
    "vue"
  ]
}

Script for linting style in package.json

For example:

{
  "scripts": {
    "lint:style": "stylelint src/**/*.{vue,css,scss} --fix"
  }
}

Extended configs

We've adopted the following list of shared configs that remain actively maintained by the broader developer community.

• stylelint-config-recommended-vue - The recommended shareable Vue config for Stylelint.
• stylelint-config-recommended-scss - The recommended shareable SCSS config for stylelint.
• stylelint-config-clean-order - A stylelint order config inspired by stylelint-order.

Recommended ESLint configuration

This project is heavily inspired by @antfu/eslint-config, which is an excellent project for eslint. The main goal of this project is to enhance the linting experience while developing Vue projects.

License

MIT License © 2023