Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/explooosion/stylelint-scss-config
This is a custom config for stylelint with scss.
https://github.com/explooosion/stylelint-scss-config
example general sample scss stylelint stylelint-config stylelint-order
Last synced: about 20 hours ago
JSON representation
This is a custom config for stylelint with scss.
- Host: GitHub
- URL: https://github.com/explooosion/stylelint-scss-config
- Owner: explooosion
- License: mit
- Created: 2018-09-29T12:24:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-06T10:14:41.000Z (over 3 years ago)
- Last Synced: 2024-11-25T00:12:10.737Z (2 months ago)
- Topics: example, general, sample, scss, stylelint, stylelint-config, stylelint-order
- Language: SCSS
- Size: 53.7 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# stylelint-scss-config
This is the general settings about [stylelint](https://github.com/stylelint/stylelint) for scss.
---
The rules include [stylelint-order](https://github.com/hudochenkov/stylelint-order/tree/master/rules/order), you can easily to order scss properties by stylelint with `--fix`.
## Run Sample
```bash
git clone https://github.com/explooosion/stylelint-scss-config.git
```
```bash
cd stylelint-scss-config && yarn # or npm install
```
```bash
yarn lint # or npm run lint
```
```bash
yarn lint:fix # with auto fix
```
## How To Use
### 1. Installation
Checkout the package.json and install the devDependencies.
#### npm
```bash
npm install -D stylelint stylelint-config-prettier stylelint-config-sass-guidelines stylelint-config-standard stylelint-order stylelint-scss pre-commit
```
#### yarn
```bash
yarn add -D stylelint stylelint-config-prettier stylelint-config-sass-guidelines stylelint-config-standard stylelint-order stylelint-scss pre-commit
```
### 2. Add Scripts and Precommit
Please add the following script to package.json.
```json
{
"scripts": {
"lint": "stylelint app/scss/**/**/**/*.scss --syntax scss",
"lint:fix": "stylelint app/scss/**/**/**/*.scss --syntax scss --fix"
},
"pre-commit": [
"lint"
],
}
```
### 3. Add .stylelintrc.json
Copy `.stylelintrc.json` into project root directory.
### 4. Install extensions
If your IDE is [vscode](https://code.visualstudio.com/), please install the following extensions:
- [stylelint](https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)
- [vscode-stylefmt](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-stylefmt)
- [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
### 5. Start Lint
Now you can check your scss with the following command:
```bash
yarn lint
```
## License
[MIT](http://opensource.org/licenses/MIT)