Name Picker Malfunction

    eslint-plugin-mobx

    0.0.9 • Public • Published

    eslint-plugin-mobx

    Mobx specific linting rules for eslint.

    Installation

    npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
    

    Configuration

    // .eslintrc.js
    module.exports = {
        parser: "@typescript-eslint/parser",
        // Include "mobx" in plugins array:
        plugins: ["mobx"],
        // Either extend our recommended configuration:
        extends: "plugin:mobx/recommended",
        // ...or specify and customize individual rules:
        rules: {
            // these values are the same as recommended
            "mobx/exhaustive-make-observable": "warn",
            "mobx/unconditional-make-observable": "error",
            "mobx/missing-make-observable": "error",
            "mobx/missing-observer": "warn",
            "mobx/no-anonymous-observer": "warn"
        }
    }

    Rules

    mobx/exhaustive-make-observable

    Makes sure that makeObservable annotates all fields defined on class or object literal.
    Autofix adds field: true for each missing field.
    To exclude a field, annotate it using field: false.
    Does not support fields introduced by constructor (this.foo = 5).
    Does not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).

    mobx/missing-make-observable

    When using decorators (eg @observable foo = 5), makes sure that makeObservable(this) is called in a constructor.
    Autofix creates a constructor if necessary and adds makeObservable(this) at it's end.

    mobx/unconditional-make-observable

    Makes sure the make(Auto)Observable(this) is called unconditionally inside a constructor.

    mobx/missing-observer

    Makes sure every React component is wrapped with observer. A React component is considered to be any class extending from Component or React.Component and any function which name has the first letter capitalized (for anonymous functions the name is inferred from variable). These are all considered components:

    class Cmp extends React.Component { }
    class Cmp extends Component { }
    const Cmp = class extends React.Component { }
    const Cmp = class extends Component { }
    class extends Component { }
    class extends React.Component { }
    
    function Named() { }
    const foo = function Named() { }
    const Anonym = function () { };
    const Arrow = () => { };

    Autofix wraps the component with observer and if necessary declares a constant of the same name: const Name = observer(function Name() {}). It's a bit opinionated and can lead to a lot of false positives depending on your conventions. You will probably want to combine this rule with overrides option, eg:

    // .eslintrc.js
    "overrides": [
      {
        "files": ["*.jsx"],
        "rules": {
          "mobx/missing-observer": "error"
        }
      }
    ]

    mobx/no-anonymous-observer (deprecated)

    Deprecated in favor of react/display-name + componentWrapperFunctions. Example of .eslintrc:

    {
      "rules": {
        "react/display-name": "warn"
      },
      "settings": {
        "componentWrapperFunctions": [
          "observer"
        ]
      }
    }
    

    Forbids anonymous functions or classes as observer components. Improves debugging experience and avoids problem with inability to customize displayName. Plays nice with eslint-plugin-react-hooks and mobx/missing-observer as both of these don't not recognize anonymous function as component. Autofix infers the name from variable if possible.

    Install

    npm i eslint-plugin-mobx

    Homepage

    mobx.js.org/

    DownloadsWeekly Downloads

    23,646

    Version

    0.0.9

    License

    MIT

    Unpacked Size

    41.5 kB

    Total Files

    12

    Last publish

    Collaborators

    • mweststrate
    • urugator
    • ichenlei