You're (Probably) Using Prettier Wrong

Theo - t3․gg

5 Jun 202306:04

Summary

TLDRThe video script emphasizes the distinction between code linting and formatting, highlighting the misuse of ESLint as a formatter instead of its intended purpose as a linter. The speaker, inspired by Josh Goldberg's talk, clarifies that ESLint is designed to enforce coding rules and maintain code quality, not to format code. They advocate for the use of Prettier or other formatters for code formatting due to their speed and simplicity. The speaker also discusses the recommended integration of Prettier with ESLint through the 'eslint-config-prettier' plugin, which disables conflicting ESLint rules, allowing for a more efficient and consistent development process. They caution against using ESLint for formatting and formatters for linting, as it leads to performance issues and increased complexity. The summary calls for respecting the expertise of open-source maintainers and adhering to best practices for using these tools.

Takeaways

🚫 **Do Not Use ESLint for Formatting**: ESLint is not designed to be a formatter; it's a linter, which performs a different function.
⚙️ **Separation of Concerns**: Linting and formatting are distinct processes; each should be handled by tools designed for their specific purpose.
🛠️ **Use Prettier for Fast Formatting**: Prettier is a fast formatter that can quickly format code without the need for complex configuration.
📝 **ESLint for Linting**: ESLint should be used for enforcing coding standards and identifying potential issues in the codebase.
🔄 **Two-Pass Workflow**: The recommended workflow is to format code with Prettier first, then lint with ESLint to avoid conflicts and improve efficiency.
🤔 **Avoiding Configuration Overhead**: Prettier's defaults are often sufficient, reducing the need for extensive configuration.
🚀 **Performance Considerations**: Using ESLint for formatting can slow down the process and create unnecessary complexity.
📚 **Educational Resources**: Listening to talks from experts like Josh Goldberg can provide insights into best practices for using these tools.
🤝 **Cooperation Between Tools**: Modern tooling allows for ESLint and Prettier to work together effectively when configured correctly.
❌ **Avoid Conflicting Rules**: Some ESLint rules may conflict with Prettier's formatting, so it's important to configure ESLint to play nicely with Prettier.
📈 **Improved Code Quality**: Using the right tool for the right job (Prettier for formatting, ESLint for linting) leads to better code quality and consistency.

Q & A

What is the main concern of the speaker regarding the use of ESLint and Prettier?
-The speaker is concerned about the misconception that ESLint and Prettier serve the same purpose. They emphasize that ESLint is a linter and should not be used as a formatter, while Prettier is designed for formatting code and is not a linter.
What is the primary role of a formatter in the context of code?
-The primary role of a formatter is to quickly pass through the code and fix any formatting issues without tracking any relationships between different parts of the code. It focuses solely on the formatting aspect.
What is the primary role of a linter like ESLint?
-A linter like ESLint is used to enforce specific coding rules and styles within a codebase. It checks for the adherence to these rules across files and lines of code, considering the relationships and context within the code.
Why is it not recommended to use ESLint as a formatter?
-Using ESLint as a formatter is not recommended because it is not designed for this purpose. It can lead to performance issues and conflicts with its primary function as a linter. It also makes the lives of maintainers harder as they have to deal with unexpected usage patterns.
What is the recommended way to integrate Prettier with ESLint?
-The recommended way to integrate Prettier with ESLint is by using the 'eslint-config-prettier' plugin, which turns off all ESLint rules that conflict with Prettier, allowing Prettier to handle the formatting first.
Why is using a separate formatter like Prettier or Dprint beneficial?
-Using a separate formatter like Prettier or Dprint is beneficial because they are optimized for formatting and can do so very quickly. They also offer better configuration options for formatting, allowing developers to focus on code quality and consistency without worrying about formatting rules.
What is the speaker's personal preference for code formatting?
-The speaker prefers using Prettier for code formatting because they find its default settings to be sufficient for keeping their code consistent and they do not want to spend time configuring formatting rules.
What does the speaker suggest regarding the use of ESLint for improving development practices?
-The speaker suggests that ESLint can be configured to enforce rules that make developers better at their craft and lead to more consistent code within a team. It helps in areas like better TypeScript behavior and preventing memory leaks.
What is the speaker's opinion on Anthony Foo's take on the two-pass approach?
-The speaker disagrees with Anthony Foo's take, arguing that the two-pass approach can be faster because it allows each tool (the formatter and the linter) to focus on its specific task without the overhead of handling the other's responsibilities.
Why does the speaker advocate for not mixing the roles of formatters and linters?
-The speaker advocates for not mixing the roles because formatters and linters are designed to solve fundamentally different problems. Mixing their roles can lead to performance issues, increased complexity, and conflicts in rules, which can negatively impact code quality and maintainability.
What does the speaker suggest for those who want a simple setup for linting and formatting?
-The speaker suggests that for a simple setup, one can use the default linting provided by a framework like Create React App and then install Prettier for formatting. This approach should be straightforward and effective for most use cases.

Outlines

00:00

🚫 Misusing ESLint as a Formatter

The first paragraph emphasizes the distinction between code linting and formatting. It clarifies that ESLint is not meant to be used as a formatter, despite some developers' misconceptions. The speaker advocates for using ESLint as a linter to enforce coding standards and maintain code quality, while using Prettier or other formatters for code formatting. The importance of understanding the roles of these tools and their proper integration is highlighted, with a recommendation to use the `eslint-config-prettier` plugin to avoid conflicts between ESLint and Prettier. The paragraph also references Josh Goldberg's talk at React Miami for further insights.

05:00

🛠️ Correct Usage of ESLint and Prettier

The second paragraph discusses the proper way to use ESLint and Prettier together. It advises against using the ESLint plugin for Prettier, as it can lead to conflicts and complexity. Instead, the recommended approach is to use `eslint-config-prettier` to ensure that ESLint does not enforce rules that Prettier will handle. The paragraph also touches on the ease of setting up linting and formatting with tools like `create-react-app` and emphasizes the simplicity and effectiveness of using Prettier for code formatting. The speaker encourages developers to keep the setup straightforward and to avoid overcomplicating the process.

Mindmap

Keywords

💡ESLint

ESLint is a pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. It is not a formatter, but rather a tool that enforces code quality standards. In the video, the speaker emphasizes that using ESLint as a formatter is a misconception and that it should be used for its intended purpose: linting.

💡Prettier

Prettier is an opinionated code formatter that supports multiple languages and integrates with most editors. It is designed to enforce a consistent style by making all the code look the same, which is different from linting. The video discusses how Prettier should be used for code formatting and not as a substitute for ESLint.

💡Linting

Linting refers to the process of running a program that analyzes source code for potential errors, bugs, stylistic errors, and suspicious constructs. In the context of the video, linting is a critical aspect of code quality that ESLint is designed to perform, as opposed to formatting.

💡Formatting

Formatting in the context of coding involves adjusting the layout and style of the source code to make it more readable and consistent. The video script clarifies that formatting is a separate concern from linting and should be handled by tools like Prettier, not ESLint.

💡Configuration

Configuration in the video refers to the setup of rules and preferences in ESLint and Prettier to define how code should be linted or formatted. The speaker mentions that some people prefer Prettier because it requires minimal configuration, whereas ESLint offers more complex and customizable rules.

💡eslint-config-prettier

eslint-config-prettier is a plugin that integrates Prettier with ESLint by turning off all ESLint rules that conflict with Prettier. This allows developers to use ESLint for linting while still leveraging Prettier for formatting, as explained in the video.

💡Josh Goldberg

Josh Goldberg is mentioned as the source of inspiration for the video's content. He gave a talk at React Miami that the speaker found particularly insightful. Goldberg's presentation likely covered best practices for using ESLint and Prettier, which the speaker is advocating for in the video.

💡TypeScript

TypeScript is a superset of JavaScript that adds static types to the language. In the video, the speaker mentions using ESLint with TypeScript to improve code quality and catch type errors, highlighting the importance of linting in type safety.

💡Rules

Rules in the context of ESLint are the guidelines that the tool enforces on code to maintain quality and consistency. The video emphasizes the importance of configuring these rules properly to leverage ESLint's full potential.

💡Open Source Maintainers

Open source maintainers are developers who contribute to and maintain open source projects like ESLint and Prettier. The video script expresses frustration with people not following the recommendations of these maintainers, who have put in significant effort to create and improve these tools.

💡pnpm

pnpm is a package manager for Node.js that the speaker mentions using in their development workflow. It is an example of the kind of tooling that can be integrated with ESLint and Prettier to streamline the development process.

Highlights

Linting and formatting are fundamentally different, and it's a misconception to use ESLint as a formatter.

ESLint is a linter, not a formatter, and is meant to enforce specific coding rules.

Using ESLint for formatting is a bad idea and can lead to a complex and inefficient process.

A formatter like Prettier makes a quick pass to fix formatting without tracking relationships between code elements.

The role of a linter is to analyze code for rule conformance, which is a more complex process than formatting.

ESLint recommends using the 'eslint-config-prettier' plugin to avoid conflicts between ESLint and Prettier.

Prettier is a fast formatter that can be used first, followed by a lint pass with ESLint.

Print is an alternative formatter that is very fast and highly configurable.

Prettier's defaults are often sufficient for code formatting, reducing the need for extensive configuration.

Linters can improve a developer's practices and team consistency, while formatters ensure code consistency.

Combining formatting and linting in the same tool can lead to slower processes and more complex maintenance.

Anthony Foo's perspective that two passes couldn't be faster than one is debunked by the efficiency of separate processes.

Josh Goldberg's talk at React Miami inspired the transcript and emphasized the importance of proper tool usage.

ESLint's complexity is necessary for its function, and adding formatting responsibilities can hinder its performance.

The eslint-plugin-prettier is not recommended because it runs Prettier's rules within ESLint, leading to unnecessary complexity.

Using Prettier for formatting and ESLint for linting is the correct approach for efficient and effective code management.

The speaker emphasizes the importance of listening to the maintainers of ESLint and Prettier, rather than assuming one knows better.

The speaker advocates for simplicity in tool usage, suggesting that setting up a new app should involve minimal configuration for both linting and formatting.