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.
- Provides linting rules for Scoped CSS.
- Supports CSS syntax including level 4 selectors.
- Supports
<style lang="scss">. - Supports
<style lang="stylus">. - Parses
<style>,<template>and<script>blocks.
You can check on the Online DEMO.
See documents.
npm install --save-dev eslint eslint-plugin-vue-scoped-cssRequirements
- ESLint v5.0.0 and above
- Node.js v8.10.0 and above
Create .eslintrc.* file to configure rules. See also: http://eslint.org/docs/user-guide/configuring.
Example .eslintrc.js:
module.exports = { extends: [ // add more generic rulesets here, such as: // 'eslint:recommended', 'plugin:vue-scoped-css/recommended' ], rules: { // override/add rules settings here, such as: // 'vue-scoped-css/no-unused-selector': 'error' } }This plugin provides 3 predefined configs:
plugin:vue-scoped-css/base- Settings and rules to enable this pluginplugin:vue-scoped-css/recommended- Above, plus rules for better ways to help you avoid problemsplugin:vue-scoped-css/all- All rules of this plugin are included
The --fix option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.
Enforce all the rules in this category with:
{ "extends": "plugin:vue-scoped-css/recommended" }| Rule ID | Description | |
|---|---|---|
| vue-scoped-css/no-parsing-error | Disallow parsing errors in <style> | |
| vue-scoped-css/no-unused-keyframes | Reports the @keyframes is not used in Scoped CSS. | |
| vue-scoped-css/no-unused-selector | Reports selectors defined in Scoped CSS not used in <template>. | |
| vue-scoped-css/require-scoped | Enforce the <style> tags to has the scoped attribute. |
No preset enables the rules in this category. Please enable each rule if you want.
For example:
{ "rules": { "vue-scoped-css/require-selector-used-inside": "error" } }| Rule ID | Description | |
|---|---|---|
| vue-scoped-css/require-selector-used-inside | Reports the defined selectors is not used inside <template>. |
Welcome contributing!
Please use GitHub's Issues/PRs.
npm testruns tests and measures coverage.npm run updateruns in order to update readme and recommended configuration.
See the LICENSE file for license rights and limitations (MIT).