Saying Goodbye To ESLINT and Prettier

Summary

In this video, the creator discusses the transition from using ESLint and Prettier to Biome, a new Rust-based tool that combines both formatting and linting. The creator highlights the speed and simplicity of Biome, which they find superior to ESLint's complexity and Prettier's quirks. They demonstrate the ease of installation, customization, and its ability to handle multiple languages, including JavaScript, TypeScript, and even Tailwind CSS. Despite some features still being in development, such as HTML support, Biome's efficiency and user-friendliness make it a promising choice for developers looking for an all-in-one solution.

Takeaways

• 😀 Prettier is a widely used tool for code formatting in JavaScript and TypeScript projects, offering customization options like single or double quotes, but it has certain quirks, especially with non-null assertions in optional chaining.
• 😀 ESLint is a helpful tool for enforcing code standards and catching issues like unused variables, but its configuration can be complicated, especially when trying to integrate it with Prettier.
• 😀 Biome is a new tool that combines formatting (like Prettier) and linting (like ESLint) into one package, written in Rust, making it faster and more efficient than JavaScript-based tools.
• 😀 Biome promises faster performance (10,000 times faster than Prettier) because it is written in Rust, addressing speed concerns often associated with JavaScript-based tools.
• 😀 Biome's configuration is simpler and more streamlined than ESLint and Prettier, allowing users to focus on coding without worrying about complex configurations and plugin management.
• 😀 Biome does not currently support HTML templates, so users of frameworks like Svelte or Astro will need to wait for full HTML support in future updates.
• 😀 Biome's setup is easy and can be done in popular editors like VS Code, with the ability to install it through simple steps like searching for the extension and installing it.
• 😀 The configuration for Biome is cleaner than having separate configuration files for ESLint and Prettier, consolidating both tools into a single JSON file.
• 😀 Biome offers features such as sorting Tailwind CSS classes, which is still in beta but already works well for sorting classes in a clean and efficient manner.
• 😀 The creator of the video prefers the simplicity and speed of Biome, mentioning that it has significantly improved their workflow compared to using ESLint and Prettier, especially on large projects.

Q & A

What are the two essential packages mentioned for a JavaScript or TypeScript project?

The two essential packages mentioned are a formatter (like Prettier) and a linter (like ESLint). These help to clean up code formatting and catch potential issues in the code, respectively.

What is the main issue with ESLint and Prettier according to the speaker?

The main issue the speaker has with ESLint and Prettier is that they are both written in JavaScript, which causes performance concerns and complexity in configuration. The speaker finds them slow on larger projects and dislikes the complexity of configuring multiple files for both tools.

What is Biome and how does it compare to ESLint and Prettier?

Biome is a new tool that combines the functionality of both Prettier and ESLint, written in Rust. This allows it to be much faster (up to 10,000 times faster). It also simplifies the setup process by consolidating formatting and linting into one tool.

What key advantage does Biome have over Prettier?

Biome's key advantage over Prettier is that it combines both formatting and linting in one tool, whereas Prettier is only a code formatter. Additionally, Biome is written in Rust, which makes it much faster than Prettier, which is written in JavaScript.

Why does the speaker find Prettier annoying in certain situations?

The speaker finds Prettier annoying due to some quirks in its behavior, such as how it handles non-null assertions and optional chains. Specifically, Prettier adds redundant non-null assertions to all parts of the code, even where they aren't necessary.

What issue does the speaker have with setting up ESLint?

The speaker dislikes the complexity of setting up ESLint, comparing it to the difficulty of configuring Webpack. They find it overwhelming to manage the various rules and plugins needed to make ESLint work properly with Prettier, JSX, and TypeScript.

How does Biome improve the user experience compared to ESLint and Prettier?

Biome improves the user experience by simplifying the setup process, requiring only a single configuration file. This eliminates the need to manage separate configuration files for both ESLint and Prettier, making it easier and faster to set up and use.

What is the current limitation of Biome?

The current limitation of Biome is that it doesn't support HTML templates, which means it's not fully compatible with frameworks like Svelte and Astro that rely on HTML templates. Additionally, the JS Doc and Markdown support are still under development.

How does the speaker recommend setting up Biome in a development environment?

The speaker recommends installing the Biome extension in VS Code or setting it up in Neovim using their kickstart configurations. For Neovim, users need to install the Biome plugin via Mason and update their settings for proper TypeScript and formatting support.

How does Biome handle Tailwind CSS class sorting?

Biome handles Tailwind CSS class sorting through a feature called 'use sorted classes.' This feature automatically sorts classes in a specified order, which helps maintain a clean and organized structure for Tailwind classes in the code.