Setting Up a TypeScript Project with BiomeJS

Hello! Welcome to your first lesson.

This course is designed to guide you through building a modern JavaScript framework from scratch. We'll be focusing on using TypeScript for a robust type system, Vite for an efficient build process, and BiomeJS for fast, integrated code formatting and linting.

Today, we'll lay the groundwork for our entire project. The goal is to get a clean, well-structured project environment set up. By the end of this lesson, you will have initialized a new TypeScript project and installed BiomeJS, achieving the first learning outcome of our "Project Setup & Tooling" module.

Let's get started.

1. Why BiomeJS?

Given your extensive experience in front-end development, you're undoubtedly familiar with the combination of ESLint for linting and Prettier for formatting. These tools have been the standard for years.

For this project, we'll be using BiomeJS, a newer tool that aims to replace both. It's written in Rust and offers a significant performance boost and a simplified, all-in-one configuration. It handles formatting, linting, and more, right out of the box.

To get a quick sense of what Biome is and the problems it solves, please watch the introduction of the following video.

2. Initializing a TypeScript Project

First things first, we need a project. This involves creating a directory, initializing a package.json file to manage our dependencies, and then adding and configuring TypeScript.

The following article provides a clear, step-by-step guide for this process. We will follow its instructions to set up the Node.js project and add TypeScript.

After following the guide, you should have a project structure that includes:

• A package.json file.
• A node_modules directory with typescript and @types/node.
• A tsconfig.json file.

The commands you executed were:

1. mkdir <your-project-name> and cd <your-project-name>: To create and enter your project directory.
2. yarn init (or npm init -y): To create the package.json file.
3. yarn add typescript and yarn add -D @types/node: To install TypeScript as a dependency and the Node.js type definitions as a development dependency.
4. yarn tsc --init: To generate a default tsconfig.json file, which we will configure in a later lesson.

3. Installing and Initializing BiomeJS

Now that our TypeScript project is initialized, let's integrate Biome. This involves adding it as a development dependency and creating its configuration file.

We'll continue with the same article, which seamlessly transitions into setting up Biome.

To see this process in action and get more context on the installation flags, the video from Web Dev Simplified is also a great resource.

By now, you have executed these two commands:

1. yarn add --dev --exact @biomejs/biome

   • --dev (or -D): Installs Biome as a development dependency, as it's a tool for building your project, not running it in production.
   • --exact: This is crucial. It pins the exact version of Biome in your package.json. This prevents automatic minor or patch updates that could subtly change formatting or linting rules, ensuring your codebase remains consistent for all collaborators and in CI/CD pipelines.

2. yarn biome init

   • This command creates a biome.json file in your project root. This file is the single source of truth for all of Biome's configuration, covering the formatter, linter, and more. We will customize this file in our next lesson.

Your Project Structure

After completing these steps, your project directory should look like this:

<your-project-name>/
├── node_modules/
├── biome.json
├── package.json
├── tsconfig.json
└── yarn.lock (or package-lock.json)

You now have a fully initialized TypeScript project with Biome ready for configuration.

Conclusion

In this lesson, we successfully set up the foundation for our JavaScript framework project.

Key Takeaways:

• A standard TypeScript project begins with package.json and tsconfig.json.
• BiomeJS is a modern, performant tool that combines linting and formatting.
• Installing tooling with an --exact version flag (yarn add --exact or npm install --save-exact) is a best practice for maintaining project consistency.
• Biome is configured through a single biome.json file, created by the biome init command.

Next Lesson Preview:
With the basic setup complete, our next step will be to dive into the biome.json file. We will configure Biome's linter and formatter rules to match our project's coding standards. This will involve leveraging your existing knowledge of ESLint and Prettier to translate familiar concepts into the Biome ecosystem.