Skip to main content

ESLint plugin

The eslint-plugin-obsidian package provides ESLint rules for Obsidian. These rules help you catch common mistakes and enforce best practices when using Obsidian.

Installation​

Step 1: Install the plugin​

yarn add -D eslint-plugin-obsidian

Step 2: Add the plugin to your ESLint configuration​

{
  "plugins": ["obsidian"],
  "rules": {
    "obsidian/unresolved-provider-dependencies": "error",
    "obsidian/no-circular-dependencies": "error",
    "obsidian/strongly-typed-inject-component": "error"
  }
}

Rules​

unresolved-provider-dependencies​

Ensure dependencies requested by providers can be resolved.

When a provider requests a dependency that is not provided by the graph or its subgraphs, this rule will trigger a lint error.

@Graph()
class SomeGraph extends ObjectGraph {
  @Provides()
  someService(someDependency: SomeDependency) {
    //        ^ Since SomeDependency is not provided by the graph, this will trigger a lint error.
    return new SomeService(someDependency);
  }
}

no-circular-dependencies​

Prevent circular dependencies between providers.

When two providers depend on each other, this rule will trigger a lint error.

@Graph()
class SomeGraph extends ObjectGraph {
  @Provides()
  foo(bar: Bar) {
    return new Foo(bar);
  }

  @Provides()
  bar(foo: Foo) {
    // ^ Since Foo depends on Bar, this will trigger a lint error.
    return new Bar(foo);
  }
}

strongly-typed-inject-component​

Ensure injected components are strongly typed.

When a component is injected using injectComponent, its props are typed with a combination of its Own props and the Injected props; Own, Injected, or Own & Injected. By default, injectComponent returns a component who's props are optional. This is correct if a component only depends on injected props. If a component also has its own props, then Own props should be required. This rule ensures that the injectComponent call is typed correctly.

Incorrect
Correct
import {
  injectComponent
} from 'react-obsidian';

type Own = {
  name: string;
};

type Injected = {
  bar: Bar;
};

const Foo = (props: Own & Injected) => {
  return null;
};

// The call is marked as incorrect because
// both Own and Injected props are missing
export default injectComponent(Foo, Graph);
import {
  injectComponent
} from 'react-obsidian';

type Own = {
  name: string;
};

type Injected = {
  bar: Bar;
};

const Foo = (props: Own & Injected) => {
  return null;
};

// The rule enforces the correct types
// are passed to the injectComponent HOC
export default injectComponent<Own, Injected>(Foo, Graph);