{"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,"search_vec":"'2019':40 'activ':33 'altern':69 'attribut':21 'beyond':45 'bypass':56 'check':52 'configur':44 'consid':68 'date':38 'disallow':11 'enabling/disabling':46 'eslint':2,7,72,78,81 'eslint-plugin':80 'eslint-plugin-no-inline-styl':1 'eslint-plugin-react':71 'eslintplugin':79 'flag':18 'inlin':5,12,83,86 'inline-styl':85 'javascript':77 'jsx':16 'last':36 'like':70 'liter':60 'mainten':34 'minim':25 'object':62 'offer':42 'plugin':3,8,26,73,82 'product':66 'react':15,74 'recommend':64 'regex':51 'releas':37 'rule':30 'simpl':50 'singl':29 'string':59 'style':6,13,20,61,84,87 'stylelint':76 'use':48,58,67 'v1.0.5':9","created_at":"2026-04-25T11:20:00.807673+00:00","updated_at":"2026-04-25T11:20:00.807673+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/nmanthena18/eslint-no-inline-styles","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/eslint-plugin-no-inline-styles","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-24","install_tag":null}}