ESLint rules for MobX
npm install eslint-plugin-mobxMobx specific linting rules for eslint.
```
npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
`javascript`
// .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"
}
}
`javascript
// eslint.config.js
import pluginMobx from "eslint-plugin-mobx"
export default [
// ...
// Either extend our recommended configuration:
pluginMobx.flatConfigs.recommended,
// ...or specify and customize individual rules:
{
plugins: { mobx: pluginMobx },
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"
}
}
]
`
Makes sure that makeObservable annotates all fields defined on class or object literal.field: false
To exclude a field, annotate it using .this.foo = 5
Does not support fields introduced by constructor ().field: true
Does not warn about annotated non-existing fields (there is a runtime check, but the autofix removing the field could be handy...).
Autofix adds for each missing field by default. You can change this behaviour by specifying options in your eslint config:
`json`
{
"rules": {
"mobx/exhaustive-make-observable": ["error", { "autofixAnnotation": false }]
}
}
This is a boolean value that controls if the field is annotated with true or false.makeObservable
If you are migrating an existing project using and do not want this rule to overridefalse
your current usage (even if it may be wrong), you should run the autofix with the annotation set to to maintain existing behaviour: eslint --no-eslintrc --fix --rule='mobx/exhaustive-make-observable: [2, { "autofixAnnotation": false }]' .
_When using decorators (eg @observable foo = 5)_, makes sure that makeObservable(this) is called in a constructor.makeObservable(this)
Autofix creates a constructor if necessary and adds at it's end.
Makes sure the make(Auto)Observable(this) is called unconditionally inside a constructor.
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:
`javascript
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() {}).overrides
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 option, eg:
`javascript`
// .eslintrc.js
"overrides": [
{
"files": ["*.jsx"],
"rules": {
"mobx/missing-observer": "error"
}
}
]
_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.displayName
Improves debugging experience and avoids problem with inability to customize .eslint-plugin-react-hooks
Plays nice with and mobx/missing-observer` as both of these don't recognize anonymous function as component.
Autofix infers the name from variable if possible.