Things I thought I didn't need when learning web development (part 2)

In my last post, I wrote about initially dismissing TypeScript, viewing it as unnecessary complexity when I was starting out. But there was another essential tool I now swear by that I wrote off completely:

2. Linting

When I first encountered linting, I understood it as nothing more than an automatic style enforcer. I knew big companies used it to maintain consistency across massive codebases, but the code I was writing wouldn't be seen or used by anyone but me. Why would I need rules to enforce my own style?

Turns out, I was missing out on a huge opportunity to learn.

Linting as a Learning Tool

The true breakthrough came when I was battling the often misunderstood exhaustive-deps rule. I was so puzzled over why it wanted me to include certain dependencies, that I ended up trying to change its source code (and even stumbled upon a bug that led to my first open source contribution).
I emerged with a much deeper understanding of the rule, its limitations - but most importantly - a better grasp of the useEffect() and its dependency array.

A similar scenario played out with other rules, and I started to realize that the linter has a hidden secret power: being your very own - personal coding instructor!

Start learning by linting

• Install a linter and set it up. I've been having a lot of fun with oxlint. It's fast and very easy to set up.
• Turn on all recommended rules in your linter config. I like this as a starting point:

// .oxlintrc.json
{
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "categories": {
    "correctness": "warn",
    "perf": "warn"
  },
  "rules": {
    /* Add specific rules here*/
  },
  "jsPlugins": [
    /* make your own rules */
  ]
}

• Lint your codebase and carefully go through whatever warnings you get.
• Fix the straightforward warnings and research the ones you're uncertain about.
• Decide for yourself whether to keep the rule or disable it - but only after understanding the reasoning.
• Bonus tips: if you're using TypeScript, follow these additional instructions. If you end up in the hundreds, add --format=stylish to the command for an easier overview of all the warnings:

// package.json
  "scripts": {
    "lint": "oxlint --type-aware --format=stylish",
  }

The Bottom Lin(t)e

Treat the linter as a patient teacher that points out mistakes and patterns you might be missing. Once you clear all the warnings you agree with, start adding new rules just to explore why they exist and what opinions people have about them.

If you don't have access to an experienced developer who can point out your mistakes: use the accumulated knowledge and opinions of others poured into every lint rule.

Comments

[Valeria]

Nice one! Yeah same here with linters - hate to love them. Also very nice for AI agents - this type of intern is very eager to write god knows what!