Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
stylelint-config-recommended-vue
Advanced tools
The recommended shareable Vue config for Stylelint.
The stylelint-config-recommended-vue package provides a set of recommended rules for Stylelint to lint Vue.js single-file components (SFCs). It helps enforce consistent styling and best practices in Vue.js projects.
Basic Linting for Vue SFCs
This configuration extends the recommended rules for linting Vue single-file components, ensuring that your styles adhere to best practices and common standards.
{"extends":["stylelint-config-recommended-vue"]}
Integration with Stylelint
You can integrate stylelint-config-recommended-vue with your project's Stylelint setup to lint all Vue files. This script will check all .vue files in your project for style issues.
{"scripts":{"lint:css":"stylelint '**/*.vue'"}}
Customizable Rules
You can customize the rules provided by stylelint-config-recommended-vue to fit your project's specific needs. This example shows how to enable additional rules like 'color-no-invalid-hex' and 'block-no-empty'.
{"extends":["stylelint-config-recommended-vue"],"rules":{"color-no-invalid-hex":true,"block-no-empty":true}}
The stylelint-config-standard package provides a standard set of rules for Stylelint, which can be used for any CSS project, not just Vue.js. It is more general-purpose compared to stylelint-config-recommended-vue, which is specifically tailored for Vue single-file components.
The stylelint-config-recommended package offers a minimal set of rules to catch common errors in CSS. While it is not specific to Vue.js, it can be used as a base configuration for any project, including those using Vue.
The stylelint-config-prettier package turns off all Stylelint rules that are unnecessary or might conflict with Prettier. This package is useful if you are using Prettier for code formatting in addition to Stylelint for linting, but it does not provide Vue-specific rules like stylelint-config-recommended-vue.
The recommended shareable Vue config for Stylelint.
This config:
stylelint-config-recommended
shared config and configures its rules for Vuepostcss-html
custom syntax and configures itRequirements
- 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.
npm install --save-dev postcss-html stylelint-config-recommended-vue
Set your stylelint
config to:
{
"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.
{
"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)
.
Install stylelint-config-recommended-scss
:
npm install --save-dev stylelint-config-recommended-scss
Set your stylelint
config to:
{
"extends": "stylelint-config-recommended-vue/scss"
}
When used with stylelint-config-standard-scss
:
{
"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 instead.
Simply add a "rules"
key to your config, then add your overrides and additions there.
For example, to add the unit-allowed-list
rule:
{
"extends": "stylelint-config-recommended-vue",
"overrides": [
{
"files": ["*.vue", "**/*.vue"],
"rules": {
"unit-allowed-list": ["em", "rem", "s"]
}
}
]
}
Use the 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:
{
"stylelint.validate": [
...,
// ↓ Add "vue" language.
"vue"
]
See the LICENSE file for license rights and limitations (MIT).
FAQs
The recommended shareable Vue config for Stylelint.
The npm package stylelint-config-recommended-vue receives a total of 210,801 weekly downloads. As such, stylelint-config-recommended-vue popularity was classified as popular.
We found that stylelint-config-recommended-vue demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.