Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix/lint rule name #3228

Merged
merged 2 commits into from
Dec 18, 2021
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix(eslint): Fix missing-observer rule name in recommended
  • Loading branch information
ahoisl committed Dec 17, 2021
commit e0ec9a6dc1fc0b22fbb4099d35e7887cd644f319
30 changes: 16 additions & 14 deletions packages/eslint-plugin-mobx/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ Mobx specific linting rules for `eslint`.
## Installation

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

## Configuration
Expand All @@ -15,19 +15,19 @@ npm install --save-dev eslint @typescript-eslint/parser eslint-plugin-mobx
module.exports = {
parser: "@typescript-eslint/parser",
// Include "mobx" in plugins array:
plugins: ["mobx"],
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/no-missing-observer': 'warn',
'mobx/no-anonymous-observer': 'warn',
},
};
// 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
Expand All @@ -42,7 +42,7 @@ Does not warn about annotated non-existing fields (there is a runtime check, but

### mobx/missing-make-observable

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

### mobx/unconditional-make-observable
Expand All @@ -51,7 +51,8 @@ Makes sure the `make(Auto)Observable(this)` is called unconditionally inside a c

### 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:
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 { }
Expand All @@ -65,8 +66,10 @@ 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:

```javascript
// .eslintrc.js
"overrides": [
Expand All @@ -81,8 +84,7 @@ It's a bit opinionated and can lead to a lot of false positives depending on you

### mobx/no-anonymous-observer

Forbids anonymous functions or classes as `observer` components.
Forbids anonymous functions or classes as `observer` components.
Improves debugging experience and [avoids problem with inability to customize `displayName`](https://github.com/mobxjs/mobx/issues/2721).
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.

50 changes: 25 additions & 25 deletions packages/eslint-plugin-mobx/src/index.js
Original file line number Diff line number Diff line change
@@ -1,29 +1,29 @@
'use strict';
"use strict"

const exhaustiveMakeObservable = require('./exhaustive-make-observable.js');
const unconditionalMakeObservable = require('./unconditional-make-observable.js');
const missingMakeObservable = require('./missing-make-observable.js');
const missingObserver = require('./missing-observer');
const noAnonymousObserver = require('./no-anonymous-observer.js');
const exhaustiveMakeObservable = require("./exhaustive-make-observable.js")
const unconditionalMakeObservable = require("./unconditional-make-observable.js")
const missingMakeObservable = require("./missing-make-observable.js")
const missingObserver = require("./missing-observer")
const noAnonymousObserver = require("./no-anonymous-observer.js")

module.exports = {
configs: {
recommended: {
plugins: ['mobx'],
rules: {
'mobx/exhaustive-make-observable': 'warn',
'mobx/unconditional-make-observable': 'error',
'mobx/missing-make-observable': 'error',
'mobx/no-missing-observer': 'warn',
'mobx/no-anonymous-observer': 'warn',
},
configs: {
recommended: {
plugins: ["mobx"],
rules: {
"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: {
'exhaustive-make-observable': exhaustiveMakeObservable,
'unconditional-make-observable': unconditionalMakeObservable,
'missing-make-observable': missingMakeObservable,
'missing-observer': missingObserver,
'no-anonymous-observer': noAnonymousObserver,
}
}
rules: {
"exhaustive-make-observable": exhaustiveMakeObservable,
"unconditional-make-observable": unconditionalMakeObservable,
"missing-make-observable": missingMakeObservable,
"missing-observer": missingObserver,
"no-anonymous-observer": noAnonymousObserver
}
}