https://github.com/leedomjs/stylelint-config
🎀「Stylelint配置预设」Leedom's Stylelint config presets
https://github.com/leedomjs/stylelint-config
Last synced: 7 months ago
JSON representation
🎀「Stylelint配置预设」Leedom's Stylelint config presets
- Host: GitHub
- URL: https://github.com/leedomjs/stylelint-config
- Owner: leedomjs
- License: mit
- Created: 2024-04-17T13:08:30.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-11T16:11:04.000Z (10 months ago)
- Last Synced: 2024-11-08T05:44:06.465Z (8 months ago)
- Language: JavaScript
- Size: 125 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @leedomjs/stylelint-config
[](https://www.npmjs.com/package/@leedomjs/stylelint-config)
- css, sass, scss, Vue out-of-box
- Single quotes
- Also lint for acss, wxss (`css of mini-program`)
- Auto fix for formatting
- Only one-line of config
## Usage
### Install
```bash
pnpm add -D stylelint @leedomjs/stylelint-config
```
### Config `.stylelintrc`
```json
{
"extends": "@leedomjs/stylelint-config"
}
````
### Add scripts for `package.json`
For example:
```json
{
"scripts": {
"lint:style": "stylelint **/*.{css,scss,sass,acss,wxss,vue}",
"lint:style-fix": "stylelint **/*.{css,scss,sass,acss,wxss,vue} --fix"
}
}
```
### VS Code support (auto fix)
Install [VS Code Stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)
Add the following settings to your `settings.json`:
```jsonc
{
"editor.formatOnSave": false,
"editor.codeActionsOnSave": {
"source.fixAll.stylelint": true,
},
// The following is optional.
// It's better to put under project setting `.vscode/settings.json`
// to avoid conflicts with working with different stylelint configs.
"stylelint.validate": [
"css",
"sass",
"scss",
"acss",
"wxss",
"vue",
]
}
```
### Lint and auto-fix before every commit
If you want to apply lint and auto-fix before every commit, you could do this:
#### 1. [husky](https://github.com/typicode/husky) + [`lint-staged`](https://github.com/okonet/lint-staged)
```bash
pnpm dlx husky-init && pnpm install -D husky lint-staged
```
and add the following to your `package.json`:
```jsonc
{
"scripts": {
// This script will be added automatically when husky is installed successfully.
"prepare": "husky install"
},
"lint-staged": {
"**/*.{css,scss,sass,acss,wxss,vue}": "stylelint --fix"
}
}
```
then add the following to your `pre-commit`:
> .husky/pre-commit
```sh
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
# remove the default script
# npx test
# add this script
npx lint-staged
```
#### 2. [simple-git-hooks](https://github.com/toplenboren/simple-git-hooks) + [`lint-staged`](https://github.com/okonet/lint-staged)
If your project is small-sized, and you need quickly set up hooks and forget about it, `simple-git-hook` will be a good choice.
```bash
pnpm install -D simple-git-hooks lint-staged
```
and add the following to your `package.json`:
```jsonc
{
"simple-git-hooks": {
"pre-commit": "npx lint-staged"
},
"lint-staged": {
"**/*.{css,scss,sass,acss,wxss,vue}": "stylelint --fix"
}
}
```
then run the CLI script to update the git hooks with the commands from the config:
```bash
# [Optional] These 2 steps can be skipped for non-husky users
git config core.hooksPath .git/hooks/
rm -rf .git/hooks
# Update ./git/hooks
npx simple-git-hooks
```
## Tips
You can override the rules in your `.stylelintrc` file.
```jsonc
{
"extends": "@leedomjs/stylelint-config",
"rules": {
// your rules...
}
}
```
## License
[MIT](https://github.com/leedomjs/stylelint-config/blob/main/LICENSE) License © 2024-present [Leedom](https://github.com/leedom92)