{"id":19850,"library":"eslint-plugin-no-inline-styles","title":"eslint-plugin-no-inline-styles","description":"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.","status":"abandoned","version":"1.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/nmanthena18/eslint-no-inline-styles","tags":["javascript","eslint","eslintplugin","eslint-plugin","inline","styles","inline-styles"],"install":[{"cmd":"npm install eslint-plugin-no-inline-styles","lang":"bash","label":"npm"},{"cmd":"yarn add eslint-plugin-no-inline-styles","lang":"bash","label":"yarn"},{"cmd":"pnpm add eslint-plugin-no-inline-styles","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; ESLint is required as a plugin host","package":"eslint","optional":false}],"imports":[{"note":"ESLint plugins are configured in config files, not imported directly.","wrong":"require('eslint-plugin-no-inline-styles')","symbol":"eslint-plugin-no-inline-styles","correct":"// In .eslintrc: {\"plugins\": [\"no-inline-styles\"]}"},{"note":"The rule name includes the plugin namespace; omitting it will not work.","wrong":"\"inline-styles\": \"error\"","symbol":"no-inline-styles/no-inline-styles","correct":"// In .eslintrc rules: {\"no-inline-styles/no-inline-styles\": \"error\"}"},{"note":"This package does not export a usable module; it's purely a config-based ESLint plugin.","wrong":"import noInlineStyles from 'eslint-plugin-no-inline-styles'","symbol":"plugin","correct":"// ESM: import plugin from 'eslint-plugin-no-inline-styles' does NOT work; use plugins array in config."}],"quickstart":{"code":"// Install\nnpm install --save-dev eslint eslint-plugin-no-inline-styles\n\n// .eslintrc.json\n{\n  \"plugins\": [\"no-inline-styles\"],\n  \"rules\": {\n    \"no-inline-styles/no-inline-styles\": \"error\"\n  }\n}\n\n// Example of violation: <div style={{ color: 'red' }} />","lang":"javascript","description":"Install the plugin and configure ESLint to disallow inline styles in JSX."},"warnings":[{"fix":"Use alternative rules like 'react/forbid-component-props' or 'react/jsx-no-style'.","message":"Package is deprecated; no updates since 2019 and no support for modern ESLint versions.","severity":"deprecated","affected_versions":">=1.0.0"},{"fix":"Add additional custom rule or use a more robust plugin that also checks string literals.","message":"The rule can be bypassed by using string literals for styles: <div style={{ \"width\": \"100%\" }}> passes the check.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Downgrade ESLint to 6.x or use a maintained plugin.","message":"The plugin does not work with ESLint 7+ due to changes in ESLint plugin API; compatible only with ESLint 6.x and below.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Uninstall this plugin and use a supported alternative.","cause":"Plugin is incompatible with current ESLint version (7+).","error":"ESLint encountered an error while loading plugin 'no-inline-styles'."},{"fix":"npm install --save-dev eslint-plugin-no-inline-styles","cause":"Plugin not installed or not in node_modules.","error":"Cannot find module 'eslint-plugin-no-inline-styles'"},{"fix":"Add \"no-inline-styles\" to the plugins array in .eslintrc.","cause":"Plugin not correctly configured in plugins field.","error":"Rule 'no-inline-styles/no-inline-styles' was not found"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}