ESLint Plugin React JSS

0.0.1 verified Sat Apr 25 auth: no javascript abandoned

An ESLint plugin providing linting rules specific to React JSS (JavaScript Style Sheets) usage. Version 0.0.1 is the initial release with one rule: prefer-object. The package has no updates since 2017 and appears to be abandoned. No alternative ESLint plugins for react-jss are known. Requires ESLint as a peer dependency.

Common errors

error ESLint couldn't find the plugin "eslint-plugin-react-jss". ↓

cause Plugin not installed or not in node_modules.

fix

Run npm install --save-dev eslint-plugin-react-jss

Warnings

deprecated Package has not been updated since 2017 and is likely abandoned. ↓

fix Consider using styled-components or Emotion with eslint-plugin-styled-components instead.

gotcha Plugin must be installed as a devDependency and listed in ESLint's plugins array. ↓

fix Add 'plugins': ['react-jss'] to your ESLint config.

Install

npm install eslint-plugin-react-jss

yarn add eslint-plugin-react-jss

pnpm add eslint-plugin-react-jss

Imports

rules

wrong

// Using "extends" instead of "plugins"

correct

// In .eslintrc: { "plugins": ["react-jss"], "rules": { "react-jss/prefer-object": "warn" } }

The plugin must be added to the 'plugins' array, not 'extends'.

Quickstart

Configures ESLint plugin and shows a React component using react-jss with injected styles.

// .eslintrc.json
{
  "plugins": ["react-jss"],
  "rules": {
    "react-jss/prefer-object": "warn"
  }
}

// Example React component with JSS
import React from 'react';
import injectSheet from 'react-jss';

const styles = {
  button: {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '4px',
    cursor: 'pointer'
  }
};

const Button = ({ classes }) => (
  <button className={classes.button}>Click me</button>
);

export default injectSheet(styles)(Button);