As a frontend developer, I have accumulated several tools over my 4 years of experience that have significantly simplified my projects and improved code quality. In this blog post, I will share these tools with you, emphasising the importance of enforcing code quality standards and consistency across a codebase. Please note that these tools are primarily focused on frontend development using React.
Table of Contents
Why should you care about Project Governance?
Imagine a scenario where we neglect project governance. In such a situation, several issues start to arise:
- Spaghetti code:
- Mixture of single and double quotes for strings.
- Multiple approaches to fetch and handle data.
- Different styling methods: some developers use styled-components, while others prefer Tailwind CSS.
- Dependency hell:
- Multiple libraries for fetching data.
- Various date libraries like date-fns and Moment.js.
- Numerous form handlers.
- Onboarding difficulties: It becomes challenging to introduce new developers to a repository with 1000 packages serving different purposes and spaghetti code scattered throughout.
These examples only scratch the surface of the potential problems. Now, let's explore some solutions!
A Linter
It goes without saying that using a linter is essential. If you don't have a linter locally installed in your project, your code will lack consistency and become a nightmare to manage. The industry standard combination is ESLint paired with Prettier.
To set up ESLint and Prettier to automatically format your code according to strict yet clean rules upon saving, you can follow this guide for configuring it with most major IDEs: ESLint Configuration Guide.
Here are some recommended rulesets. I personally have been using Wes Bos's config for years and highly recommend it, but I will also list some common alternatives:
For a more comprehensive list of rulesets, you can refer to this awesome-eslint repository.
RFC
RFCs are a fantastic way to gather input from multiple developers before adding something to your repository. This could be a new dependency, a set of hooks to be built and used throughout the app, or even a restructuring of the project's folder structure.
By introducing a small barrier, similar to a pull request, where you need to receive feedback from several individuals before adding a fifth date library to your repository, you can keep the number of dependencies low and encourage thoughtful consideration of each addition.
RFCs can be implemented in various ways. Github supports them, but you can also set up a Slack channel dedicated to pending RFCs or incorporate them as subtasks in your Kanban board to track their status.
Husky
Husky provides pre-commit powers! With Husky, you can run commands like npm run lint --fixAll
just before creating a commit. You can also leverage Husky with TypeScript or testing frameworks to disallow commits with failing tests, adding an extra layer of security and consistency to your application.
Plop
Plop is a tool for creating file templates using handlebars templates. One common problem is the inconsistency with code snippets, as each developer has their own way of quickly creating code from scratch using custom shortcuts. For example, I often use rfac to generate a React component as an arrow function.
Plop allows you to maintain consistent folder structures within your application and enables new developers to quickly onboard by creating components with a single command. You can even alias the command to something like generate. For instance, typing generate test would generate a test file with the necessary imports and snapshot tests already set up, if required. Plop simplifies the process of keeping your application's folder structure clean and consistent.
By incorporating these tools into your frontend development workflow, you can significantly enhance code quality, maintain consistency, and make your life as a developer much easier.
🚀 Feel free to reach out if you have any questions or thoughts. Happy coding!
Top comments (0)