Friday Knowledge
Published in

Friday Knowledge

Typescript with eslint

This week, I learned how to write custom eslint rules


Eslint provides a quick and easy way to write and use custom rules!

One of 2022 year resolution is to improve my rxjs knowledge. And that led me to start replacing Promises with Observables in most of my projects.

In order to make sure all Promise occurrences are completely removed, I am going to be relying on eslint to tell me which parts of my code are using Promises.

However, since there is no prebuilt-in rule that can flag promise usages, I had to create a custom rule.

In this writeup, we will be looking at what it takes to write and use eslint custom rules.

First, let us start by providing a command to run the rule

npx eslint src/**/*.ts --rulesdir custom-eslint-rules --config .eslintrc.js

custom-eslint-rules is the folder where we are going to put the rule.

Next, we need to add the rule to .eslintrc.js

module.exports = {  parser: '@typescript-eslint/parser',  parserOptions: {    tsconfigRootDir: __dirname,    project: ['./tsconfig.json'],  },  "rules": {    "observable-no-promise": ["error"]  }

Here we include @typescript-eslint/parser because we are linting typescript files.

Now, let us write the rule. For the sake of time, we will write a simpler version, which only targets function declaration.

The logic goes like this: if a function returns a promise, then report it, so that it can be converted to returning an observable.


ReturnStatement is the token that eslint uses to identify all return statements, you can find a list of all available tokens here.

So, for a piece of code like below, you will get a linting error.

But after converting the function to returning an Observable, the linting error goes away!


With its friendly rule-creation process, eslint allows developers to enforce best practices no matter how ad-hoc those best practices are.

Bonus — using custom rules inside Angular apps

If you use angular cli, then you would have to register these custom rules inside angular.json file, like shown below





The one new thing that stood out in your learning path for a week.

Recommended from Medium

Azure AD OAuth 2.0 Authorization Code Grant Flow in Electron

Channel Menu setup in Salesforce Experience Site(Community Cloud)

Front-End Stack (Guide to become Full Stack Developer)

Sore Thumb Test Cases Antipattern

EmailJS with Create React App

Why I wrote Ayioo package?🚀

How to layout rotated text in React Native

Redux: The Fundamentals

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Marcellin Nshimiyimana

Marcellin Nshimiyimana

Always debugging, because problem knowledge equals half the solution!

More from Medium

Typescript dynamic type with any

Summary of high-level built-in types in TypeScript



Typescript 中的 SOLID 原则