Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ota-meshi/stylelint-config-recommended-vue
The recommended shareable Vue config for Stylelint.
https://github.com/ota-meshi/stylelint-config-recommended-vue
linter-config stylelint vue
Last synced: 24 days ago
JSON representation
The recommended shareable Vue config for Stylelint.
- Host: GitHub
- URL: https://github.com/ota-meshi/stylelint-config-recommended-vue
- Owner: ota-meshi
- License: mit
- Created: 2021-10-19T00:54:26.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-09T10:35:44.000Z (6 months ago)
- Last Synced: 2024-10-04T11:15:01.546Z (about 1 month ago)
- Topics: linter-config, stylelint, vue
- Language: JavaScript
- Homepage:
- Size: 64.5 KB
- Stars: 100
- Watchers: 4
- Forks: 5
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-config-recommended-vue
[](https://www.npmjs.com/package/stylelint-config-recommended-vue)
[](https://www.npmjs.com/package/stylelint-config-recommended-vue)
[](http://www.npmtrends.com/stylelint-config-recommended-vue)
[](http://www.npmtrends.com/stylelint-config-recommended-vue)
[](https://github.com/ota-meshi/stylelint-config-recommended-vue/actions?query=workflow%3ACI)
> The recommended shareable Vue config for [Stylelint].
This config:
- extends the [`stylelint-config-recommended` shared config](https://github.com/stylelint/stylelint-config-recommended) and configures its rules for Vue
- bundles the [`postcss-html` custom syntax](https://github.com/ota-meshi/postcss-html) and configures it
> **Requirements**
>
> - [Stylelint] v14.0.0 and above
> It cannot be used with Stylelint v13 and below.
To see the rules that this config uses, please read the [config itself](/lib/index.js).
## :cd: Installation
```shell
npm install --save-dev postcss-html stylelint-config-recommended-vue
```
## :book: Usage
Set your `stylelint` config to:
```json
{
"extends": "stylelint-config-recommended-vue"
}
```
Note: This config enables rules for only `.vue` files.
If you don't want the rules to be overridden (If you want to enable only the parser.), please use [stylelint-config-html](https://github.com/ota-meshi/stylelint-config-html).
```json
{
"extends": "stylelint-config-html/vue"
}
```
Since this package configure `customSyntax` option to allow parsing Vue files, be sure it is the **LAST** item into the `extends` array, in case more than one configuration is applied.
Not complying to this rule may result in broken Vue files parsing, generating confusing errors like `Unknown word (CssSyntaxError)`.
### With SCSS
Install `stylelint-config-recommended-scss`:
```shell
npm install --save-dev stylelint-config-recommended-scss
```
Set your `stylelint` config to:
```json
{
"extends": "stylelint-config-recommended-vue/scss"
}
```
When used with `stylelint-config-standard-scss`:
```json
{
"extends": [
"stylelint-config-standard-scss",
"stylelint-config-recommended-vue/scss"
]
}
```
However, some stylistic rules may not work well with Vue. We recommend that you install [stylelint-config-standard-vue](https://github.com/ota-meshi/stylelint-config-standard-vue) instead.
### Extending the config
Simply add a `"rules"` key to your config, then add your overrides and additions there.
For example, to add the `unit-allowed-list` rule:
```json
{
"extends": "stylelint-config-recommended-vue",
"overrides": [
{
"files": ["*.vue", "**/*.vue"],
"rules": {
"unit-allowed-list": ["em", "rem", "s"]
}
}
]
}
```
## :computer: Editor integrations
### Visual Studio Code
Use the [stylelint.vscode-stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) extension that [Stylelint] provides officially.
You have to configure the `stylelint.validate` option of the extension to check `.vue` files, because the extension does not check the `*.vue` file by default.
Example **.vscode/settings.json**:
```jsonc
{
"stylelint.validate": [
...,
// ↓ Add "vue" language.
"vue"
]
```
## :lock: License
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
[Stylelint]: https://stylelint.io/