{"id":13437877,"url":"https://github.com/future-architect/eslint-plugin-vue-scoped-css","last_synced_at":"2025-05-15T15:06:01.476Z","repository":{"id":36132398,"uuid":"218275454","full_name":"future-architect/eslint-plugin-vue-scoped-css","owner":"future-architect","description":"ESLint plugin for Scoped CSS in Vue.js","archived":false,"fork":false,"pushed_at":"2024-10-29T04:02:27.000Z","size":2677,"stargazers_count":98,"open_issues_count":13,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-29T17:22:48.528Z","etag":null,"topics":["css","eslint","eslint-plugin","npm","npm-package","scoped-css","scss","static-analysis","stylus","vue"],"latest_commit_sha":null,"homepage":"https://future-architect.github.io/eslint-plugin-vue-scoped-css/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/future-architect.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ota-meshi"}},"created_at":"2019-10-29T11:53:25.000Z","updated_at":"2024-10-29T04:01:42.000Z","dependencies_parsed_at":"2024-11-05T20:27:57.397Z","dependency_job_id":null,"html_url":"https://github.com/future-architect/eslint-plugin-vue-scoped-css","commit_stats":{"total_commits":290,"total_committers":8,"mean_commits":36.25,"dds":0.5724137931034483,"last_synced_commit":"2a87d7ae99127c34a4aeab24804c721ab04db279"},"previous_names":[],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-architect%2Feslint-plugin-vue-scoped-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-architect%2Feslint-plugin-vue-scoped-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-architect%2Feslint-plugin-vue-scoped-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/future-architect%2Feslint-plugin-vue-scoped-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/future-architect","download_url":"https://codeload.github.com/future-architect/eslint-plugin-vue-scoped-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247721898,"owners_count":20985084,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","eslint","eslint-plugin","npm","npm-package","scoped-css","scss","static-analysis","stylus","vue"],"created_at":"2024-07-31T03:01:00.886Z","updated_at":"2025-04-07T20:10:24.347Z","avatar_url":"https://github.com/future-architect.png","language":"TypeScript","funding_links":["https://github.com/sponsors/ota-meshi"],"categories":["HarmonyOS","Plugins"],"sub_categories":["Windows Manager","Frameworks"],"readme":"# eslint-plugin-vue-scoped-css\n\n[eslint-plugin-vue-scoped-css](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css) is ESLint plugin for [Scoped CSS in Vue.js].\n\n[![NPM license](https://img.shields.io/npm/l/eslint-plugin-vue-scoped-css.svg)](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css)\n[![NPM version](https://img.shields.io/npm/v/eslint-plugin-vue-scoped-css.svg)](https://www.npmjs.com/package/eslint-plugin-vue-scoped-css)\n[![NPM downloads](https://img.shields.io/badge/dynamic/json.svg?label=downloads\u0026colorB=green\u0026suffix=/day\u0026query=$.downloads\u0026uri=https://api.npmjs.org//downloads/point/last-day/eslint-plugin-vue-scoped-css\u0026maxAge=3600)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)\n[![NPM downloads](https://img.shields.io/npm/dw/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)\n[![NPM downloads](https://img.shields.io/npm/dm/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)\n[![NPM downloads](https://img.shields.io/npm/dy/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)\n[![NPM downloads](https://img.shields.io/npm/dt/eslint-plugin-vue-scoped-css.svg)](http://www.npmtrends.com/eslint-plugin-vue-scoped-css)\n[![Build Status](https://github.com/future-architect/eslint-plugin-vue-scoped-css/workflows/CI/badge.svg?branch=master)](https://github.com/future-architect/eslint-plugin-vue-scoped-css/actions?query=workflow%3ACI)\n[![Coverage Status](https://coveralls.io/repos/github/future-architect/eslint-plugin-vue-scoped-css/badge.svg?branch=master)](https://coveralls.io/github/future-architect/eslint-plugin-vue-scoped-css?branch=master)\n\u003c!--\n[![Greenkeeper badge](https://badges.greenkeeper.io/future-architect/eslint-plugin-vue-scoped-css.svg)](https://greenkeeper.io/)\n--\u003e\n\n## Features\n\nThis ESLint plugin provides linting rules relate to better ways to help you avoid problems when using [Scoped CSS in Vue.js].\n\n- Provides linting rules for Scoped CSS.\n- Supports CSS syntax including level 4 selectors.\n- Supports `\u003cstyle lang=\"scss\"\u003e`.\n- Supports `\u003cstyle lang=\"stylus\"\u003e`.\n- Parses `\u003cstyle\u003e`, `\u003ctemplate\u003e` and `\u003cscript\u003e` blocks.\n\nYou can check on the [Online DEMO](https://future-architect.github.io/eslint-plugin-vue-scoped-css/playground/).\n\n\u003c!--DOCS_IGNORE_START--\u003e\n\n## Documentation\n\nSee [documents](https://future-architect.github.io/eslint-plugin-vue-scoped-css/).\n\n## Installation\n\n```bash\nnpm install --save-dev eslint eslint-plugin-vue-scoped-css vue-eslint-parser\n```\n\n\u003e **Requirements**\n\u003e\n\u003e - ESLint v6.0.0 and above\n\u003e - Node.js v12.22.x, v14.17.x, v16.x and above\n\n\u003c!--DOCS_IGNORE_END--\u003e\n\n## Usage\n\n\u003c!--USAGE_SECTION_START--\u003e\n\u003c!--USAGE_GUIDE_START--\u003e\n\n### New Config (`eslint.config.js`)\n\nUse `eslint.config.js` file to configure rules. See also: \u003chttps://eslint.org/docs/latest/use/configure/configuration-files-new\u003e.\n\nExample **eslint.config.js**:\n\n```js\nimport eslintPluginVueScopedCSS from 'eslint-plugin-vue-scoped-css';\nexport default [\n  // add more generic rule sets here, such as:\n  // js.configs.recommended,\n  ...eslintPluginVueScopedCSS.configs['flat/recommended'],\n  {\n    rules: {\n      // override/add rules settings here, such as:\n      // 'vue-scoped-css/no-unused-selector': 'error'\n    }\n  }\n];\n```\n\n### Legacy Config (`.eslintrc`)\n\nUse `.eslintrc.*` file to configure rules. See also: \u003chttps://eslint.org/docs/latest/use/configure/\u003e.\n\nExample **.eslintrc.js**:\n\n```js\nmodule.exports = {\n  extends: [\n    // add more generic rulesets here, such as:\n    // 'eslint:recommended',\n    'plugin:vue-scoped-css/vue3-recommended'\n  ],\n  rules: {\n    // override/add rules settings here, such as:\n    // 'vue-scoped-css/no-unused-selector': 'error'\n  }\n}\n```\n\n## Configs\n\nThis plugin provides some predefined configs:\n\n### New Config (`eslint.config.js`)\n\n- `*.configs['flat/base']` - Settings and rules to enable this plugin\n- `*.configs['flat/recommended']` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 3.x\n- `*.configs['flat/vue2-recommended']` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 2.x\n- `*.configs['flat/all']` - All rules of this plugin are included\n\n### Legacy Config (`.eslintrc`)\n\n- `plugin:vue-scoped-css/base` - Settings and rules to enable this plugin\n- `plugin:vue-scoped-css/recommended` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 2.x\n- `plugin:vue-scoped-css/vue3-recommended` - `/base`, plus rules for better ways to help you avoid problems for Vue.js 3.x\n- `plugin:vue-scoped-css/all` - All rules of this plugin are included\n\n\u003c!--USAGE_GUIDE_END--\u003e\n\u003c!--USAGE_SECTION_END--\u003e\n\n## Rules\n\n\u003c!--RULES_SECTION_START--\u003e\n\nThe `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) automatically fixes problems reported by rules which have a wrench :wrench: below.\n\n\u003c!--RULES_TABLE_START--\u003e\n\n## Recommended for Vue.js 3.x\n\nEnforce all the rules in this category with:\n\n```js\nexport default [\n  ...eslintPluginVueScopedCSS.configs['flat/recommended'],\n]\n```\n\nor\n\n```json\n{\n  \"extends\": [\"plugin:vue-scoped-css/vue3-recommended\"]\n}\n```\n\n| Rule ID | Description |    |\n|:--------|:------------|:---|\n| [vue-scoped-css/enforce-style-type](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/enforce-style-type.html) | enforce the `\u003cstyle\u003e` tags to be plain or have the `scoped` or `module` attribute |  |\n| [vue-scoped-css/no-deprecated-deep-combinator](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-deprecated-deep-combinator.html) | disallow using deprecated deep combinators | :wrench: |\n| [vue-scoped-css/no-parent-of-v-global](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parent-of-v-global.html) | disallow parent selector for `::v-global` pseudo-element |  |\n| [vue-scoped-css/no-parsing-error](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parsing-error.html) | disallow parsing errors in `\u003cstyle\u003e` |  |\n| [vue-scoped-css/no-unused-keyframes](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-keyframes.html) | disallow `@keyframes` which don't use in Scoped CSS |  |\n| [vue-scoped-css/no-unused-selector](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-selector.html) | disallow selectors defined in Scoped CSS that don't use in `\u003ctemplate\u003e` |  |\n| [vue-scoped-css/require-v-deep-argument](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-deep-argument.html) | require selector argument to be passed to `::v-deep()` | :wrench: |\n| [vue-scoped-css/require-v-global-argument](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-global-argument.html) | require selector argument to be passed to `::v-global()` |  |\n| [vue-scoped-css/require-v-slotted-argument](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-v-slotted-argument.html) | require selector argument to be passed to `::v-slotted()` |  |\n\n## Recommended for Vue.js 2.x\n\nEnforce all the rules in this category with:\n\n```js\nexport default [\n  ...eslintPluginVueScopedCSS.configs['flat/vue2-recommended'],\n]\n```\n\nor\n\n```json\n{\n  \"extends\": [\"plugin:vue-scoped-css/recommended\"]\n}\n```\n\n| Rule ID | Description |    |\n|:--------|:------------|:---|\n| [vue-scoped-css/enforce-style-type](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/enforce-style-type.html) | enforce the `\u003cstyle\u003e` tags to be plain or have the `scoped` or `module` attribute |  |\n| [vue-scoped-css/no-parsing-error](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-parsing-error.html) | disallow parsing errors in `\u003cstyle\u003e` |  |\n| [vue-scoped-css/no-unused-keyframes](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-keyframes.html) | disallow `@keyframes` which don't use in Scoped CSS |  |\n| [vue-scoped-css/no-unused-selector](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-unused-selector.html) | disallow selectors defined in Scoped CSS that don't use in `\u003ctemplate\u003e` |  |\n\n## Uncategorized\n\nNo preset enables the rules in this category.\nPlease enable each rule if you want.\n\nFor example:\n\n```json\n{\n  \"rules\": {\n    \"vue-scoped-css/no-deprecated-v-enter-v-leave-class\": \"error\"\n  }\n}\n```\n\n| Rule ID | Description |    |\n|:--------|:------------|:---|\n| [vue-scoped-css/no-deprecated-v-enter-v-leave-class](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/no-deprecated-v-enter-v-leave-class.html) | disallow v-enter and v-leave classes. |  |\n| [vue-scoped-css/require-selector-used-inside](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-selector-used-inside.html) | disallow selectors defined that is not used inside `\u003ctemplate\u003e` |  |\n| [vue-scoped-css/v-deep-pseudo-style](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-deep-pseudo-style.html) | enforce `:deep()`/`::v-deep()` style | :wrench: |\n| [vue-scoped-css/v-global-pseudo-style](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-global-pseudo-style.html) | enforce `:global()`/`::v-global()` style | :wrench: |\n| [vue-scoped-css/v-slotted-pseudo-style](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/v-slotted-pseudo-style.html) | enforce `:slotted()`/`::v-slotted()` style | :wrench: |\n\n## Deprecated\n\n- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.\n- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.\n\n| Rule ID | Replaced by |\n|:--------|:------------|\n| [vue-scoped-css/require-scoped](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/require-scoped.html) | [vue-scoped-css/enforce-style-type](https://future-architect.github.io/eslint-plugin-vue-scoped-css/rules/enforce-style-type.html.md) |\n\n\u003c!--RULES_TABLE_END--\u003e\n\u003c!--RULES_SECTION_END--\u003e\n\n\u003c!--DOCS_IGNORE_START--\u003e\n\n## Contributing\n\nWelcome contributing!\n\nPlease use GitHub's Issues/PRs.\n\n### Development Tools\n\n- `npm test` runs tests and measures coverage.  \n- `npm run update` runs in order to update readme and recommended configuration.  \n\n\u003c!--DOCS_IGNORE_END--\u003e\n\n## License\n\nSee the [LICENSE](LICENSE) file for license rights and limitations (MIT).\n\n[Scoped CSS in Vue.js]: https://vue-loader.vuejs.org/guide/scoped-css.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-architect%2Feslint-plugin-vue-scoped-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffuture-architect%2Feslint-plugin-vue-scoped-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffuture-architect%2Feslint-plugin-vue-scoped-css/lists"}