Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ota-meshi/stylelint-config-html
The shareable HTML config for Stylelint.
https://github.com/ota-meshi/stylelint-config-html
html linter-config stylelint
Last synced: 22 days ago
JSON representation
The shareable HTML config for Stylelint.
- Host: GitHub
- URL: https://github.com/ota-meshi/stylelint-config-html
- Owner: ota-meshi
- License: mit
- Created: 2021-10-19T07:21:37.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-28T23:31:27.000Z (4 months ago)
- Last Synced: 2024-10-04T11:53:37.737Z (about 1 month ago)
- Topics: html, linter-config, stylelint
- Language: JavaScript
- Homepage:
- Size: 48.8 KB
- Stars: 66
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# stylelint-config-html
[](https://www.npmjs.com/package/stylelint-config-html)
[](https://www.npmjs.com/package/stylelint-config-html)
[](http://www.npmtrends.com/stylelint-config-html)
[](http://www.npmtrends.com/stylelint-config-html)
[](https://github.com/ota-meshi/stylelint-config-html/actions?query=workflow%3ACI)
> The shareable HTML (and HTML-like) config for [Stylelint].
This config bundles the [`postcss-html` custom syntax](https://github.com/ota-meshi/postcss-html) and configures it.
If you use this config in your Stylelint config, HTML, XML, [Vue], [Svelte], [Astro], and [PHP] files will be parsable. The Stylelint rules you have configured will be able to check these files.
> **Requirements**
>
> - [Stylelint] v14.0.0 and above
> This config cannot be used with Stylelint v13 and below. Also, if you are using Stylelint v13, you do not need to use this config.
Stylelint v14 and above has been changed to not bundle non-CSS parsing such as HTML. The goal of this config is to make Stylelint v14 work with HTML (and HTML-like) files, like Stylelint v13.
To see this config, please read the [config itself](/index.js).
## :couple: Related Packages
### [stylelint-config-recommended-vue](https://github.com/ota-meshi/stylelint-config-recommended-vue) / [stylelint-config-standard-vue](https://github.com/ota-meshi/stylelint-config-standard-vue)
The shareable config for [Vue](https://v3.vuejs.org/).
If you want to check [Vue] files, consider using this as well. It is useful because it contains the config for [Vue](https://v3.vuejs.org/).
### [postcss-html](https://github.com/ota-meshi/postcss-html)
[PostCSS] syntax for parsing HTML (and HTML-like).
If you have problems with parses using this config, please open the new issue in that repository.
## :cd: Installation
```shell
npm install --save-dev postcss-html stylelint-config-html
```
## :book: Usage
Set your `stylelint` config to:
```json
{
"extends": "stylelint-config-html"
}
```
Note: This config enables HTML (and HTML-like) syntax parsing.
If you want to enable parsing for only specific language, use each language config as follows:
```json
{
"extends": [
"stylelint-config-html/html",
"stylelint-config-html/xml",
"stylelint-config-html/vue",
"stylelint-config-html/svelte",
"stylelint-config-html/astro",
"stylelint-config-html/php"
]
}
```
## :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 `.html`, `.vue`, `.svelte`, `.astro`, and HTML-like files, because the extension does not check the `*.html` and HTML-like file by default.
Example **.vscode/settings.json**:
```jsonc
{
"stylelint.validate": [
...,
// ↓ Add "html" language.
"html",
// ↓ Add "vue" language.
"vue",
// ↓ Add "svelte" language.
"svelte",
// ↓ Add "astro" language.
"astro",
]
```
## :lock: License
See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
[Stylelint]: https://stylelint.io/
[Vue]: https://v3.vuejs.org/guide/single-file-component.html
[Svelte]: https://svelte.dev/docs#Component_format
[Astro]: https://docs.astro.build/core-concepts/astro-components/
[PHP]: https://www.php.net/manual/en/intro-whatis.php
[PostCss]: https://github.com/postcss/postcss