eranshabi/tslint-mobx

MobX specific linting rules for TSLint

tslint-mobx

Lint rules for projects that use MobX.

Usage

First install:

npm install --save-dev tslint-mobx

Then to use the default rules you can add tslint-mobx to extends in your tslint.json:

{
  "extends": ["tslint-mobx"]
}

Rules

• mobx-react-no-unused-inject
  • Makes sure you don't have any unused injected store.
  • For example if you have @inject('someStore') decorator wrapping your component, but this.props.someStore is unused.
• mobx-react-no-empty-inject
  • Makes sure you don't have any empty injects (@inject()).
• mobx-react-no-inject-decorators
  • Makes sure you don't have any inject decorators (@inject()) at all on classes.
• mobx-react-no-async-action
  • Makes sure you don't have any action decorators (@action) on async methods.

Adding your own rules

Adding your own rules is straightforward.

Add your rule file to the src/rules directory, and your tests to a file with the same name, ending with .spec, in the test directory.

PRs are welcome.

tslint-mobx's Issues

new rule: no observer before inject

From the docs:

When using both @Inject and @observer, make sure to apply them in the correct order: observer should be the inner decorator, inject the outer. There might be additional decorators in between.

No unused inject can't handle custom mapper function

Instead of passing a list of store names, it is also possible to create a custom mapper function and pass it to inject.

https://github.com/mobxjs/mobx-react#customizing-inject

It is possible to use a function as @inject's first argument to map the available stores manually to the component props. Unfortunately mobx-react-no-unused-inject can't handle this, and it even creates a false negative by creating the failuer: Unused mobX store injected: undefined.

It probably should ignore those usages all together or - even better - use the function's return type for the check.

Fine-tune tslint rule no-unbound-method

Proposal:

The default tslint rule for no-unbound-method should have an exception when using @action.bound decorator on a method.

For example:

class Foo {
  @observable private enabled: boolean;

  public someAction() {
    fetch('x/y/z').then(this.toggle);
  }

  @action.bound private toggle() {
    this.enabled = !this.enabled;
    /* More code */
  }
}

I know this can be solved by using it like this:

@action private toggle = () => (this.enabled = !this.enabled);

But the debugger sometimes doesn't recognize the this because it is being transpiled to _this.
And it becomes annoying on methods that have more than one line.

Plugin suggestion - force using 'get' keyword for computed methods

It would be useful to have a rule that will require using 'get' for computed methods. Example:

class UserStore {
  @observable firstName = 'John';
  @observable lastName = 'Snow';

  // Should be an error: missing 'get' keyword
  @computed fullName() {
    return `${this.firstName} ${this.lastName}`;
  } 
}

Migration to ESLint

Since TSLint is deprecated, is there any plan to migrate this excellent plugin to ESLint?

false-positive: mobx-react-no-unused-inject on store deconstruct.

Assuming you have

@inject('myStore')
class Foo extends React.Component {
  public render() {
    const {
      myStore: { something },
    } = this.props;
  }
}

It throws mobx-react-no-unused-inject: Unused mobX store injected: myStore