You're (Probably) Using Prettier Wrong

Summary

The 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.