Security News
Fluent Assertions Faces Backlash After Abandoning Open Source Licensing
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
eslint-plugin-vue-scoped-css
Advanced tools
eslint-plugin-vue-scoped-css is ESLint plugin for Scoped CSS in Vue.js.
This ESLint plugin provides linting rules relate to better ways to help you avoid problems when using Scoped CSS in Vue.js.
<style lang="scss">
.<style lang="stylus">
.<style>
, <template>
and <script>
blocks.You can check on the Online DEMO.
See documents.
npm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser
Requirements
- ESLint v6.0.0 and above
- Node.js v12.22.x, v14.17.x, v16.x and above
eslint.config.js
)Use eslint.config.js
file to configure rules. See also: https://eslint.org/docs/latest/use/configure/configuration-files-new.
Example eslint.config.js:
import eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css';
export default [
// add more generic rule sets here, such as:
// js.configs.recommended,
...eslintPluginVueScopedCSS.configs['flat/recommended'],
{
rules: {
// override/add rules settings here, such as:
// 'vue-scoped-css/no-unused-selector': 'error'
}
}
];
.eslintrc
)Use .eslintrc.*
file to configure rules. See also: https://eslint.org/docs/latest/use/configure/.
Example .eslintrc.js:
module.exports = {
extends: [
// add more generic rulesets here, such as:
// 'eslint:recommended',
'plugin:vue-scoped-css/vue3-recommended'
],
rules: {
// override/add rules settings here, such as:
// 'vue-scoped-css/no-unused-selector': 'error'
}
}
This plugin provides some predefined configs:
eslint.config.js
)*.configs['flat/base']
- Settings and rules to enable this plugin*.configs['flat/recommended']
- /base
, plus rules for better ways to help you avoid problems for Vue.js 3.x*.configs['flat/vue2-recommended']
- /base
, plus rules for better ways to help you avoid problems for Vue.js 2.x*.configs['flat/all']
- All rules of this plugin are included.eslintrc
)plugin:vue-scoped-css/base
- Settings and rules to enable this pluginplugin:vue-scoped-css/recommended
- /base
, plus rules for better ways to help you avoid problems for Vue.js 2.xplugin:vue-scoped-css/vue3-recommended
- /base
, plus rules for better ways to help you avoid problems for Vue.js 3.xplugin:vue-scoped-css/all
- All rules of this plugin are includedThe --fix
option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
Enforce all the rules in this category with:
export default [
...eslintPluginVueScopedCSS.configs['flat/recommended'],
]
or
{
"extends": ["plugin:vue-scoped-css/vue3-recommended"]
}
Rule ID | Description | |
---|---|---|
vue-scoped-css/enforce-style-type | enforce the <style> tags to be plain or have the scoped or module attribute | |
vue-scoped-css/no-deprecated-deep-combinator | disallow using deprecated deep combinators | :wrench: |
vue-scoped-css/no-parent-of-v-global | disallow parent selector for ::v-global pseudo-element | |
vue-scoped-css/no-parsing-error | disallow parsing errors in <style> | |
vue-scoped-css/no-unused-keyframes | disallow @keyframes which don't use in Scoped CSS | |
vue-scoped-css/no-unused-selector | disallow selectors defined in Scoped CSS that don't use in <template> | |
vue-scoped-css/require-v-deep-argument | require selector argument to be passed to ::v-deep() | :wrench: |
vue-scoped-css/require-v-global-argument | require selector argument to be passed to ::v-global() | |
vue-scoped-css/require-v-slotted-argument | require selector argument to be passed to ::v-slotted() |
Enforce all the rules in this category with:
export default [
...eslintPluginVueScopedCSS.configs['flat/vue2-recommended'],
]
or
{
"extends": ["plugin:vue-scoped-css/recommended"]
}
Rule ID | Description | |
---|---|---|
vue-scoped-css/enforce-style-type | enforce the <style> tags to be plain or have the scoped or module attribute | |
vue-scoped-css/no-parsing-error | disallow parsing errors in <style> | |
vue-scoped-css/no-unused-keyframes | disallow @keyframes which don't use in Scoped CSS | |
vue-scoped-css/no-unused-selector | disallow selectors defined in Scoped CSS that don't use in <template> |
No preset enables the rules in this category. Please enable each rule if you want.
For example:
{
"rules": {
"vue-scoped-css/no-deprecated-v-enter-v-leave-class": "error"
}
}
Rule ID | Description | |
---|---|---|
vue-scoped-css/no-deprecated-v-enter-v-leave-class | disallow v-enter and v-leave classes. | |
vue-scoped-css/require-selector-used-inside | disallow selectors defined that is not used inside <template> | |
vue-scoped-css/v-deep-pseudo-style | enforce :deep() /::v-deep() style | :wrench: |
vue-scoped-css/v-global-pseudo-style | enforce :global() /::v-global() style | :wrench: |
vue-scoped-css/v-slotted-pseudo-style | enforce :slotted() /::v-slotted() style | :wrench: |
Rule ID | Replaced by |
---|---|
vue-scoped-css/require-scoped | vue-scoped-css/enforce-style-type |
Welcome contributing!
Please use GitHub's Issues/PRs.
npm test
runs tests and measures coverage.npm run update
runs in order to update readme and recommended configuration.See the LICENSE file for license rights and limitations (MIT).
FAQs
ESLint plugin for Scoped CSS in Vue.js
The npm package eslint-plugin-vue-scoped-css receives a total of 67,389 weekly downloads. As such, eslint-plugin-vue-scoped-css popularity was classified as popular.
We found that eslint-plugin-vue-scoped-css demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Fluent Assertions is facing backlash after dropping the Apache license for a commercial model, leaving users blindsided and questioning contributor rights.
Research
Security News
Socket researchers uncover the risks of a malicious Python package targeting Discord developers.
Security News
The UK is proposing a bold ban on ransomware payments by public entities to disrupt cybercrime, protect critical services, and lead global cybersecurity efforts.