DEV Community

Cover image for I created TypeScript ESLint Playground
YeonJuan
YeonJuan

Posted on β€’ Edited on

2 1

I created TypeScript ESLint Playground

Hi there πŸ‘‹.
Sometimes I enjoyed contributing to the typescript-eslint project. But it was tiring me to configure "typescript-eslint" for reproducing issues.

So I created a web playground for typescript eslint πŸŽ‰.

Alt Text
I think it would also be useful for someone trying to configure the "typescript-eslint" rule.
Feel free to give it a little Star or Issue :)-Github repo

How did It make?

The biggest challenge was a bundling module that using node built-in modules (fs, path...)

When bundling typescript-eslint and eslint with webpack, it throws errors because it cannot bundle NodeJS Built-In modules (e.g. ’fs’, β€˜path’)..

ERROR in ./node_modules/@eslint/eslintrc/lib/config-array-factory.js
Module not found: Error: Can't resolve 'fs' in '...project/node_modules/@eslint/eslintrc/lib'
Enter fullscreen mode Exit fullscreen mode

So, I must handle them, especially. There are two cases I should care about.

  1. Module using NodeJS Built-Ins but unused on runtimes.
  2. Module using NodeJS Built-Ins and needed on runtimes.

1. Handing modules unused on runtimes

For the first case, I can use webpack null-loader. It allows us to bundle some modules with an empty module.

We need to install null-loader

$ npm install null-loader --save-dev
Enter fullscreen mode Exit fullscreen mode

Then added the loader to our webpack config. The webpack will load modules specified in test as an empty module. By that, we can avoid webpack errors.

module.exports = {
  rules: [
    //...
    {
      test: [
        /\/eslint\/.*\/cli-engine/,
        // ...
      ],
      use: "null-loader"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

2. Handling modules used on runtimes

In this case, The NormalModuleReplacementPlugin works. It allows us to replace some resources with custom resources. By it, I could replace modules with my custom ones.

  • replacement module.
// src/modules/globby.js - custom module
module.exports = {
  sync() {
    return ["./tsconfig.json"];
  },
};
Enter fullscreen mode Exit fullscreen mode
  • webpack.config.js
const webpack = require('webpack');

module.exports = {
  //...
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      /globby/, // target module
      "src/modules/globby.js" // custom module
    ),
  ]
}
Enter fullscreen mode Exit fullscreen mode

You can check all code on github repo. Thanks for reading :)

Billboard image

The fastest way to detect downtimes

Join Vercel, CrowdStrike, and thousands of other teams that trust Checkly to streamline monitoring.

Get started now

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

πŸ‘‹ Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay