Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robole/stylelint-config-roboleary
My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.
https://github.com/robole/stylelint-config-roboleary
css lint lint-css lint-scss linting prettier prettier-stylelint scss stylelint stylelint-prettier
Last synced: about 2 months ago
JSON representation
My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.
- Host: GitHub
- URL: https://github.com/robole/stylelint-config-roboleary
- Owner: robole
- Created: 2021-07-20T05:29:15.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-11-16T18:11:38.000Z (about 3 years ago)
- Last Synced: 2024-09-30T15:55:48.485Z (3 months ago)
- Topics: css, lint, lint-css, lint-scss, linting, prettier, prettier-stylelint, scss, stylelint, stylelint-prettier
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/stylelint-config-roboleary
- Size: 271 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: funding.yml
Awesome Lists containing this project
README
# stylelint-config-roboleary
My stylelint config for linting CSS and SCSS. You can use it along side Prettier without conflicts.
It includes the following:
- The [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) config gives a core collection of rules (extending [stylelint-config-recommended](https://github.com/stylelint/stylelint-config-recommended)). It is based on the common stylistic conventions found within a handful of CSS styleguides, including: The Idiomatic CSS Principles, Google's CSS Style Guide, Airbnb's Styleguide, and @mdo's Code Guide.
- The [stylelint-scss](https://github.com/kristerkari/stylelint-scss) plugin to add more specific rules for SCSS (stylelint supports SCSS syntax by default).
- The [stylelint-order](https://github.com/hudochenkov/stylelint-order) plugin to order properties into groups, used in conjunction with the rules contained in [stylelint-config-idiomatic-order](https://github.com/ream88/stylelint-config-idiomatic-order).
- The [stylelint-color-format](https://github.com/filipekiss/stylelint-color-format) plugin to format all colors as [HSLA](https://www.w3schools.com/csSref/func_hsla.asp). The color is set as HSL if opacity is 100%.
- The [stylelint-declaration-block-no-ignored-properties](https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties) checks for property values that are ignored due to another property value in the same rule e.g. using `display: inline` with `width` or `height`.
- The [stylelint-config-prettier](https://github.com/prettier/stylelint-config-prettier) to disable any conflicting rules with Prettier. This should always be the last referenced config, so that it's rules are not overwritten.
## Rules changed
### [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard)
- [`declaration-empty-line-before`](https://stylelint.io/user-guide/rules/list/declaration-empty-line-before/): Effectively turn off the rule through ignore option. This clears the way for the ordering plugin to add blank lines.
### [stylelint-color-format](https://github.com/filipekiss/stylelint-color-format)
- [`color-format/format`](https://github.com/filipekiss/stylelint-color-format#configuration-1): Convert HEX colors to either RGB or HSL formats. **Set to `hsla`**.
### [stylelint-declaration-block-no-ignored-properties](https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties)
- `plugin/declaration-block-no-ignored-properties`: This rule needs to be **set to `true` to enable the plugin**.
## Usage
1. Install this package along with *stylelint* `npm install --save-dev stylelint-config-roboleary stylelint` as *devDependencies*.
1. Create a stylelint config in your project directory e.g. *.stylelintrc*. Add the following to the file:
```json
{
"extends": ["stylelint-config-roboleary"]
}
```
1. You can add scripts to your _package.json_ to lint and fix your code from the command-line:
```json
{
"scripts": {
"lint": "stylelint **/*.{css,scss}",
"lint:fix": "npm run style-lint -- --fix",
}
}
```
1. Additionally, there are [integrations for code editors](https://stylelint.io/user-guide/integrations/editor). I use the [stylelint extension](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) for VS Code.
## Configuration in VS Code
If you want to use stylelint and Prettier in VS Code, I recommend installing these 3 extensions: [stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), and [Format Code Action](https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action&ssr=false#review-details) to enable Prettier to be run as a code action.
To format and lint CSS/SCSS code on save, you can update your user settings with the following:
```json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false,
"editor.codeActionsOnSave": [
"source.formatDocument",
"source.fixAll"
],
}
```
## Show gratitude
If this helped you, please [star the repo](https://github.com/robole/stylelint-config-roboleary/) to help others find it. 🌟
You can [make a donation](https://ko-fi.com/roboleary) to support me to make more great open-source software and tutorials. 🙏