Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
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 56,002 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
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.