eslint-plugin-css is an ESLint plugin that provides rules to verify CSS definition objects.
This ESLint plugin provides linting rules to verify CSS definition objects.
- Find the wrong usage of CSS definition objects, and their hints.
- The plugin supports Vue and JSX (React).
You can check on the Online DEMO.
See documents.
npm install --save-dev eslint eslint-plugin-css
Requirements
- ESLint v7.0.0 and above
- Node.js v12.22.x, v14.17.x, v16.x and above
Add css
to the plugins section of your .eslintrc
configuration file (you can omit the eslint-plugin-
prefix)
and either use one of the two configurations available (recommended
or all
) or configure the rules you want:
The plugin:css/recommended
config enables a subset of the rules that should be most useful to most users.
See lib/configs/recommended.ts for more details.
// .eslintrc.js
module.exports = {
"plugins": [
"css"
],
"extends": [
// add more generic rulesets here, such as:
// 'eslint:recommended',
"plugin:css/recommended"
]
}
Override/add specific rules configurations. See also: http://eslint.org/docs/user-guide/configuring.
// .eslintrc.js
module.exports = {
"plugins": [
"css"
],
"rules": {
// Override/add rules settings here, such as:
"css/rule-name": "error"
}
}
The plugin:css/all
config enables all rules. It's meant for testing, not for production use because it changes with every minor and major version of the plugin. Use it at your own risk.
See lib/configs/all.ts for more details.
The --fix
option on the command line automatically fixes problems reported by rules which have a wrench 🔧 below.
The rules with the following star ⭐ are included in the plugin:css/recommended
config.
Rule ID | Description | |
---|---|---|
css/no-unknown-property | disallow unknown properties | ⭐ |
Rule ID | Description | |
---|---|---|
css/no-length-zero-unit | disallow units for zero lengths | 🔧 |
Rule ID | Description | |
---|---|---|
css/property-casing | enforce specific casing for CSS properties | 🔧 |
See Settings.
Welcome contributing!
Please use GitHub's Issues/PRs.
See CONTRIBUTING.md.
-
npm test
runs tests and measures coverage. -
npm run update
runs in order to update readme and recommended configuration. -
npm run new [new rule name]
runs to create the files needed for the new rule. -
npm run docs:watch
starts the website locally.
See the LICENSE file for license rights and limitations (MIT).