ESLint for no inline styles allowed
npm install eslint-plugin-no-inline-stylesYou'll first need to install ESLint:
``
$ npm i eslint --save-dev
Next, install npm i eslint-plugin-no-inline-styles:
`
$ npm install eslint-plugin-no-inline-styles --save-dev
Note: If you installed ESLint globally (using the -g flag) then you must also install npm i eslint-plugin-no-inline-styles globally.
Add eslint-plugin-no-inline-styles to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:
`json`
{
"plugins": [
"eslint-plugin-no-inline-styles"
]
}
Then configure the rules you want to use under the rules section.
`json`
{
"rules": {
"no-inline-styles/no-inline-styles": 2
}
}
You can change rule from 2 to 1 which is worning or you can disable with zero.
@no-inline-styles
This is a rule to dissallow inline styling.
This rule aims to dissallow inline styling where it appear in style attribute in react app.
Examples oforf incorrect code for this rule:
`jsx`
class Component extends React.Component {
render() {
;
I am having style attribute
}
}
Examples for correct code for this rule:
`jsx`
class Component extends React.Component {
render() {
;
I don't have style attribute
}
}
Examples for hack the rule: use the string literals
`jsx``
class Component extends React.Component {
render() {
;
I am having style attribute but I can render now
}
}