ESLint plugin to require preventDefault for onClick

13 Nov 2022

TL;DR: I wrote a new ESLint plugin.

I've been working on a personal project a bit recently, and it's frontend was Clojurescript as I didn't really want to have to write any Javascript ever again. However, Clojurescript has it's own issues both external e.g. no test coverage, at all, and just the lack of typing support was getting on my nerves (yes, I know about spec but it seems rather painful to just get typing support) and so I was starting to think about moving onto something else. Except most of the other non-JS options were more annoying, which sucked.

For the day job, I've been doing some Typescript recently, and it's actually been not too bad. These days, with things like Vite, it's now possible to get fast hot reload (as in immediately), and Typescript has some really nice advances for type systems that are actually kinda about the best I've seen (at least for things that are less bleeding edge academia, and more "actually usable tool").

ESLint lets you also do a lot of things to smooth off the rough edges, but then I hit a bug today that wasn't catchable by any of this, so I've written a little plugin to fix that. Basically, if you've got an on-click handler where you want to do magic SPA stuff not "go to the named URL", you need to remember to call event.preventDefault() and remembering to do this is tedious. eslint-plugin-require-prevent-default fixes this with mostly just a little bit of config.

{
    plugins: [...other plugins..., "require-prevent-default"],

    rules: {
        .. other rules ...
        "require-prevent-default/require-prevent-default": "error",
    }
}

Thanks to Daria's guide on ESLint plugins and the wonderful AST Explorer tool for making this much easier.

Previously: Like LinkedIn, but you get paid to read the recruiter emails Next: tagpy: Taking it over and doing a new release with wheels