Natural Preference for Minification
    Have ideas to improve npm?Join in the discussion! »

    eslint-plugin-makestyles

    0.1.11 • Public • Published

    eslint-plugin-makestyles

    There is a feature of Material-UI makeStyles function that adds a name to the generated className. If you use it then you get nice classNames like this MyComponent-root-123 instead of makeStyles-root-123

    This rule helps to ensure the developer does not forget to add a name option to Material-UI makeStyles function.

    Rule Details

    Examples of incorrect code for this rule:

    var useStyles = makeStyles({
      root: {
        color: "red"
      }
    });

    Examples of correct code for this rule:

    var useStyles = makeStyles(
      {
        root: {
          color: "red"
        }
      },
      {
        name: "MyComponent"
      }
    );

    Installation

    You'll first need to install ESLint:

    $ npm i eslint --save-dev
    

    Next, install eslint-plugin-makestyles:

    $ npm install eslint-plugin-makestyles --save-dev
    

    Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-makestyles globally.

    Usage

    Add this to your your .eslintrc configuration file to get our recommended rule setup (only warnings).

    "extends": [
        "plugin:makestyles/recommended",
      ]
    

    If you do not want to use the preset you will need to specify individual rules and add extra configuration.

    Add makestyles to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

    {
      "plugins": ["makestyles"]
    }

    Then configure the rules you want to use under the rules section.

    {
      "rules": {
        "makestyles/makestyles-with-name": "error"
      }
    }

    Links

    Install

    npm i eslint-plugin-makestyles

    DownloadsWeekly Downloads

    497

    Version

    0.1.11

    License

    ISC

    Unpacked Size

    8.81 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar