ESLinting to avoid inline styles
Installation
You'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.
Usage
Add eslint-plugin-no-inline-styles
to the plugins section of your .eslintrc
configuration file. You can omit the eslint-plugin-
prefix:
Then configure the rules you want to use under the rules section.
You can change rule from 2 to 1 which is worning or you can disable with zero.
Checks inline styles for React app
@no-inline-styles
This is a rule to dissallow inline styling.
Rule Details
This rule aims to dissallow inline styling where it appear in style attribute in react app.
Examples oforf incorrect code for this rule:
Component { <div> <span =>I am having style attribute</span> </div>; }
Examples for correct code for this rule:
Component { <div> <span ="classname">I have style attribute</span> </div>; }
Examples for hack the rule: use the string literals
Component { <div> <span =>I am having style attribute but I can render now</span> </div>; }