2 must-have tools in your React Project for having a consistent codebase
How automated formatting and linting enhance code quality and collaboration? (4 min)
I’ve seen many consistent and non-consistent codebases.
I can’t remember the number of times I cried when I touched something in a non-consistent codebase.
It’s a nightmare you want to avoid.
Code consistency is a practice embraced by great software developers and engineers.
If you take your craft seriously, you must have a consistent codebase.
Make yourself and your teammates a favor.
The importance of consistency
Consistency in the codebase is a fundamental aspect of effective collaboration and maintainability.
The consistent codebase:
Enhances readability - developers can read and navigate throughout the code much easier which helps for faster development
Simplifies onboarding of new team members - when the codebase follows a consistent pattern, styling, and formatting, it’s much easier for new engineers to grasp it
Streamlines code reviews - reviewers can focus on the logic and business requirements, instead of leaving unnecessary comments related to the code styling and formatting
Use Prettier or Dprint to automate the code formatting
Prettier and Dprint are two of the most popular code formatting tools in the JavaScript ecosystem.
They help enforce consistent styling across the codebase by parsing the code and “rewriting” it with their own rules.
You can either apply the tool's already present rules, integrate open-sourced ones, write your own custom rules, or even combine all four options.
These tools give you a lot of flexibility, which is great, and fit 99% of the code formatting cases in a codebase.
Note: My personal preference is Prettier since it’s largely adopted, there’re a lot of plugins, and the community is bigger than Dprint. However, in one of the latest projects we adopted Dprint because it had better performance.
Whether you choose Prettier or Dprint, it will be a step forward to a more consistent codebase and project. Swapping the tools is a no-brainer.
💡Hint: You can configure your editor to run and apply the formatting on auto-save.
Example: Before and After code formatting
// Before
function Component(){return <div><h1>Without code formatting!</h1></div>}
// After
function Component() {
return (
<div>
<h1>With code formatting!</h1>
</div>
);
}Use ESLint to automate the code quality and code styling
ESLint is the most popular linting tool for JavaScript and JSX in the JavaScript community.
ESLint helps to detect problematic patterns and areas in your code that don’t follow certain rules, styles, and guidelines.
Similar to Prettier and Dprint, ESLint is highly customizable and flexible to fit almost every project and style guide.
You can also write your own ESLint rule, so basically, you can cover 100% of the cases.
Keep in mind that some rules might be applied automatically while others will appear as warnings/errors inside the IDE and you will have to fix them by yourself.
💡 Hint: You can configure your editor to run and apply the linting on auto-save.
Example: Before and After code linting
Before ESLint
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
if (userId) {
const [userData, setUserData] = useState(null);
useEffect(() => {
fetch(`/api/users/${userId}`)
.then(response => response.json())
.then(data => setUserData(data));
}, [userId]);
return <div>{userData ? userData.name : 'Loading...'}</div>;
} else {
return <div>No User ID Provided</div>;
}
}
export default UserProfile;After ESLint
In the example from above, we violate the rules-of-hooks rule.
ESLint gave us a warning that something in our code was not correct.
// After applying the `rules-of-hooks` eslint rule
import React, { useState, useEffect } from 'react';
function UserProfile({ userId }) {
const [userData, setUserData] = useState(null);
useEffect(() => {
if (userId) {
fetch(`/api/users/${userId}`)
.then(response => response.json())
.then(data => setUserData(data));
}
}, [userId]);
if (userId) {
return <div>{userData ? userData.name : 'Loading...'}</div>;
} else {
return <div>No User ID Provided</div>;
}
}
export default UserProfile;Combine Prettier or Dprint and ESLint
By integrating both a formatter and a linter into your React project, you ensure the code is consistently formatted and follows the best practices and guidelines.
Automating that will improve the overall Developer Experience and developer’s throughput.
In my experience, these tools are an irreplaceable part of my toolbox in every project I start or join.
Best Practices and Tips
Stick to the standard configurations. Usually, the standard set of rules is just enough. They’re a good starting point.
Keep tools updated. This way you will leverage the newly added fixes and improvements of the tools.
Introduce new rules and guidelines gradually. Don’t worry about introducing a new rule later when you see a potential for an improvement.
Enforce style guides and practices through rules. Don’t rely on people to follow them. Automate this process. Keep everyone on the same page.
Add a formatting and styling check inside your CI/CD.
The T-Shaped Dev is a reader-supported publication. To receive new posts and support my work, consider becoming a free or paid subscriber.
⭐ TL;DR
Consistent codebase is crucial for better readability, maintainability, and DX.
Use a code formatting tool like Prettier or Dprint for a more consistent codebase.
Use a code quality and code styling tool like ESLint for a more consistent and error-prone codebase.
Automate whatever you can. Don’t rely on people to follow rules and guidelines manually.
Make these steps part of your CI/CD so no “bad” code enters production.
👋 Let’s connect
You can find me on LinkedIn or Twitter.
I share daily practical tips to level up your skills and become a better engineer.
Thank you for being a great supporter, reader, and for your help in growing to 12.7K+ subscribers this week 🙏
This newsletter is funded by paid subscriptions from readers like yourself.
If you aren’t already, consider becoming a paid subscriber to receive the full experience!
Think of it as buying me a coffee twice a month, with the bonus that you also get all my templates and products for FREE.
You can also hit the like ❤️ button at the bottom to help support me or share this with a friend to get referral rewards. It helps me a lot! 🙏
Pair it with prettier plugin sort import for even cleaner code 💡
Thanks for sharing this.