# @laozhu/stylelint-config

> Shareable @stylelint config of @laozhu

Latest version **1.1.0** (published 2019-08-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @laozhu/stylelint-config
pnpm add @laozhu/stylelint-config
yarn add @laozhu/stylelint-config
bun add @laozhu/stylelint-config
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-08-10 |
| First published | 2019-08-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.16.2 |
| Dependencies | 7 |
| Unpacked size | 13.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ritchie Zhu |
| Maintainers | shiaohoo |
| Keywords | laozhu, linter, stylelint, stylelint-config |

## Links

- npm: https://www.npmjs.com/package/@laozhu/stylelint-config
- Repository: https://github.com/laozhu/codelens
- Homepage: https://npm.im/@laozhu/stylelint-config
- Issues: https://github.com/laozhu/codelens/issues
- npm.io page: https://npm.io/package/@laozhu/stylelint-config

## Dependencies (7)

- [stylelint-scss](https://npm.io/package/stylelint-scss.md) ^3.9.2
- [stylelint-order](https://npm.io/package/stylelint-order.md) ^3.0.1
- [stylelint-config-prettier](https://npm.io/package/stylelint-config-prettier.md) ^5.2.0
- [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^18.3.0
- [stylelint-config-styled-components](https://npm.io/package/stylelint-config-styled-components.md) ^0.1.1
- [stylelint-no-unsupported-browser-features](https://npm.io/package/stylelint-no-unsupported-browser-features.md) ^3.0.2
- [stylelint-declaration-block-no-ignored-properties](https://npm.io/package/stylelint-declaration-block-no-ignored-properties.md) ^2.1.0

## Alternatives

- [eslint-plugin-sonarjs](https://npm.io/package/eslint-plugin-sonarjs.md) — 2.9M weekly downloads
- [eslint-config-expo](https://npm.io/package/eslint-config-expo.md) — 1.5M weekly downloads
- [@matter/protocol](https://npm.io/package/@matter/protocol.md) — 63.5K weekly downloads
- [@eventcatalog/linter](https://npm.io/package/@eventcatalog/linter.md) — 24.8K weekly downloads
- [@inrupt/eslint-config-base](https://npm.io/package/@inrupt/eslint-config-base.md) — 4.5K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2019-08-10
- 1.0.0 — 2019-08-10

## README

# @laozhu/stylelint-config

[![Version](https://img.shields.io/npm/v/@laozhu/stylelint-config.svg)](https://npm.im/@laozhu/stylelint-config) [![Weekly Downloads](https://img.shields.io/npm/dw/@laozhu/stylelint-config.svg)](https://npm.im/@laozhu/stylelint-config)

Shareable @stylelint config of @laozhu.

## Installation

Use npx to install peerdeps automatically or install peerDependencies with npm/yarn manually.

```bash
# Install with npx
$ npx install-peerdeps --dev @laozhu/stylelint-config

# Install with NPM
$ npm i -D stylelint prettier @laozhu/stylelint-config

# Install with yarn
$ yarn add --dev stylelint prettier @laozhu/stylelint-config
```

## Features

- Extend from [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
- Support css modules syntax
- Support `scss`, `less`, `wxss` and `css-in-js` syntax
- Maintains consistent property order with [stylelint-order](https://github.com/hudochenkov/stylelint-order)
- Support unsupported browser features linter
- Works well with [prettier](https://prettier.io/) together
- Open for further extension

## Usage

After installation, you have two methods to use this configuration.

### The first method

Create a `.stylelintrc.js` or `stylelint.config.js` file in your project root, then require this package in the file.

#### Default

For project which using `css`, `postcss`, `scss` or `less`.

```javascript
module.exports = {
  extends: ['@laozhu/stylelint-config'],
};
```

#### CSS-in-JS

For project using `css-in-js`, e.g. [styled-components](https://www.styled-components.com/) and [emotion](https://github.com/emotion-js/emotion).

```javascript
module.exports = {
  extends: ['@laozhu/stylelint-config/styled'],
};
```

#### miniProgram (微信小程序)

For wechat miniProgram project.

```javascript
module.exports = {
  extends: ['@laozhu/stylelint-config/wxapp'],
};
```

### The second method

If your project have a `package.json` file, add "stylelint" key in your this file.

```json
{
  "name": "my-cool-project-name",
  "version": "1.0.0",
  "stylelint": {
    "extends": ["@laozhu/stylelint-config"]
  }
}
```

## Browser compatibility linter

First, add browsers that we support in your `package.json` or config file that [browserslist](https://github.com/browserslist/browserslist) supports.

```json
{
  "browserslist": ["> 0.5%", "last 2 versions", "Firefox ESR", "not ie <= 9", "not op_mini all"]
}
```

Second, stylelint will linter your code with predefined browserslist automatically. It will shot an warning message to tell you which feature have not be well supported by these browsers (e.g. [css-grid](https://caniuse.com/#feat=css-grid) and [css-animation](https://caniuse.com/#feat=css-animation)):

```javascript
const whiteListFeatures = ['flexbox', 'object-fit'];

module.exports = {
  extends: ['@laozhu/stylelint-config'],
  rules: {
    'plugin/no-unsupported-browser-features': [
      true,
      { severity: 'warning', ignore: whiteListFeatures },
    ],
  },
};
```

_This shareable config setted `flexbox` as default ignore._

## Ignore files

You can create `.stylelintignore` file or add ignoreFiles entry in `stylelint.config.js` file.

## NPM Scripts

Add stylelint scripts in your `package.json`, then you can run `yarn lint:css` from CLI.

```json
{
  "name": "my-cool-project-name",
  "version": "1.0.0",
  "scripts": {
    "lint:css": "stylelint 'src/**/*.css'",
    "lint:scss": "stylelint 'src/**/*.scss'",
    "lint:less": "stylelint 'src/**/*.less'",
    "lint:wxapp": "stylelint 'src/**/*.wxss'",
    "lint:styled": "stylelint 'src/**/*.{jsx,tsx}'",
    "stylelint": "stylelint 'src/**/*.{css,scss,less,jsx,tsx}'",
    "stylelint:fix": "stylelint 'src/**/*.{css,scss,less,jsx,tsx}' --fix"
  }
}
```

## Work with VS Code

If you are using vscode with [vscode-stylelint](https://github.com/shinnn/vscode-stylelint) extension, this is my vscode config for stylelint (with [vscode-prettier](https://github.com/prettier/prettier-vscode) extension installed).

```jsonc
{
  "editor.formatOnSave": true,

  // Stylelint
  // https://github.com/shinnn/vscode-stylelint#optional-but-recommended-setup
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,

  // Prettier
  "prettier.stylelintIntegration": true
}
```

With settings above, vscode will automatically sort your css properties and fix some fixable stylelint rules while saving `css`, `scss`, `less` and `wxss` files.

## Extend

You can override any rules with your own prefs.

## License

MIT

---
_Source: https://npm.io/package/@laozhu/stylelint-config · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._