eslint-plugin-no-inline-styles

1.0.5 verified Sat Apr 25 auth: no javascript abandoned

ESLint plugin (v1.0.5) that disallows inline styles in React JSX by flagging the style attribute. This is a minimal plugin with a single rule and no active maintenance; the last release dates from 2019. It offers no configuration beyond enabling/disabling and uses a simple regex check, which can be bypassed by using string literal style objects. Not recommended for production use; consider alternatives like eslint-plugin-react or stylelint.

Common errors

error ESLint encountered an error while loading plugin 'no-inline-styles'. ↓

cause Plugin is incompatible with current ESLint version (7+).

fix

Uninstall this plugin and use a supported alternative.

error Cannot find module 'eslint-plugin-no-inline-styles' ↓

cause Plugin not installed or not in node_modules.

fix

npm install --save-dev eslint-plugin-no-inline-styles

error Rule 'no-inline-styles/no-inline-styles' was not found ↓

cause Plugin not correctly configured in plugins field.

fix

Add "no-inline-styles" to the plugins array in .eslintrc.

Warnings

deprecated Package is deprecated; no updates since 2019 and no support for modern ESLint versions. ↓

fix Use alternative rules like 'react/forbid-component-props' or 'react/jsx-no-style'.

gotcha The rule can be bypassed by using string literals for styles: <div style={{ "width": "100%" }}> passes the check. ↓

fix Add additional custom rule or use a more robust plugin that also checks string literals.

breaking The plugin does not work with ESLint 7+ due to changes in ESLint plugin API; compatible only with ESLint 6.x and below. ↓

fix Downgrade ESLint to 6.x or use a maintained plugin.

Install

npm install eslint-plugin-no-inline-styles

yarn add eslint-plugin-no-inline-styles

pnpm add eslint-plugin-no-inline-styles

Imports

eslint-plugin-no-inline-styles
wrong
```
require('eslint-plugin-no-inline-styles')
```
correct
```
// In .eslintrc: {"plugins": ["no-inline-styles"]}
```
ESLint plugins are configured in config files, not imported directly.
no-inline-styles/no-inline-styles
wrong
```
"inline-styles": "error"
```
correct
```
// In .eslintrc rules: {"no-inline-styles/no-inline-styles": "error"}
```
The rule name includes the plugin namespace; omitting it will not work.

plugin

wrong

import noInlineStyles from 'eslint-plugin-no-inline-styles'

correct

// ESM: import plugin from 'eslint-plugin-no-inline-styles' does NOT work; use plugins array in config.

This package does not export a usable module; it's purely a config-based ESLint plugin.

Quickstart

Install the plugin and configure ESLint to disallow inline styles in JSX.

// Install
npm install --save-dev eslint eslint-plugin-no-inline-styles

// .eslintrc.json
{
  "plugins": ["no-inline-styles"],
  "rules": {
    "no-inline-styles/no-inline-styles": "error"
  }
}

// Example of violation: <div style={{ color: 'red' }} />