@laozhu/stylelint-config v1.1.0
@laozhu/stylelint-config
Shareable @stylelint config of @laozhu.
Installation
Use npx to install peerdeps automatically or install peerDependencies with npm/yarn manually.
# 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
- Support css modules syntax
- Support
scss
,less
,wxss
andcss-in-js
syntax - Maintains consistent property order with stylelint-order
- Support unsupported browser features linter
- Works well with prettier 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
.
module.exports = {
extends: ['@laozhu/stylelint-config'],
};
CSS-in-JS
For project using css-in-js
, e.g. styled-components and emotion.
module.exports = {
extends: ['@laozhu/stylelint-config/styled'],
};
miniProgram (微信小程序)
For wechat miniProgram project.
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.
{
"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 supports.
{
"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 and css-animation):
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.
{
"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 extension, this is my vscode config for stylelint (with vscode-prettier extension installed).
{
"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