Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
eslint-plugin-mobx
Advanced tools
Readme
Mobx specific linting rules for eslint
.
npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
// .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"
}
}
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...).
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.
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:
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"
}
}
]
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.
FAQs
ESLint rules for MobX
The npm package eslint-plugin-mobx receives a total of 22,264 weekly downloads. As such, eslint-plugin-mobx popularity was classified as popular.
We found that eslint-plugin-mobx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.