Improving Web Tooling

Choosing the right tools for a project is important. It can make or break a project. In this blog I will talk about the tools I use for my web projects, and why I use them.

What tools do I use?

With web development, there are a lot of tools to choose from, and that is great. However, it can also be overwhelming. I've been using a lot of tools, and I've found a few that I really like.

DevX

Developer Experience is my most important factor when choosing a tool. If it's not easy to use, I will not use it. That does not mean you should use tooling that is the worst for the job but easiest to use. It means that if there are two tools that are equally good, I will choose the one that is easier to use.

Linting

Linting is important. It helps me to write better code, and it helps me to find bugs before they happen. I use eslint in combination with prettier for my linting.

Extensions

In VSCode, you can have multiple extensions to enhance your experience while coding. I have the following installed:

• Pretty TS Errors This gives you an easy overview of the error from typescript.
• Live Share, collaborate in 1 workspace.

Settings

Improve your vscode experience with a few simple settings:

// .vscode/settings.json
{
  "files.exclude": { // ignore files shown in your explorer.
"**/node_modules/**: true,
  }
}

Git hooks

When working on a git branch, you want to make sure your code is up to par. I use husky in my projects to make sure that my code is formatted and passed linting before I can push my code.

Do note that this is not a replacement for CI/CD, but it's a good start.

The Actual Project

TypeScript

I write most of my code with TypeScript, why? Because it gives you the advantage of types. Types that can be used to find bugs before they happen. Having those types is great, but do not come out of the box. I use tsconfig to configure my TypeScript project.

Here is my default tsconfig.json:

{
  "compilerOptions": {
    "target": "es6", // ES6 is supported by all modern browsers and Node.js
    "declaration": true, // Output declaration files
    "declarationMap": true, // Output source maps for declaration files
    "esModuleInterop": true, // Emits extra JS to make it compatible with commonJS
    "forceConsistentCasingInFileNames": true, // Have 1 casing for file names
    "noUnusedLocals": true, // Errors when having unused local variables
    "noUnusedParameters": true, // Errors when having unused parameters
    "preserveWatchOutput": true, // Preserve the output of the watch mode: tsc --watch
    "skipLibCheck": true, // Do not check the typescript files in node_modules
    "strict": true, // Enable all strict type checking options
    "strictNullChecks": true, // Enable strict null checks, so any value that is marked as nullable, should be checked first.
    "noImplicitAny": true, // Do not allow implicit any, this one speaks for itself.
    "noUncheckedIndexedAccess": true, // Check if an array has the index you are trying to access
    "allowUnreachableCode": false, // Do not allow unreachable code such as `return;` after a `return;`
  },
}

Next.js

Next.js is a foundation for most of my web projects, why? Because it does a lot of things for you. It has a great devX and large ecosystem. It has a lot of features out of the box, such as server-side rendering, static site generation, and more.

This site was built with Next.js, and I'm very happy with it.

Package management

With larger projects, you want your dependencies to be up to date, easy to manage and your scripts to run fast. I use pnpm for my package management. It's fast, and it's easy to use and uses a global cache for all your projects so you don't have to download the same package multiple times.

Conclusion

These were just a few tools and practices I use for my web projects. I hope you found them useful. If you have any questions, feel free to contact me.