Best practices any team can use with their typescript projects

Software engineers needs tools to make the right habits effortless. The right habits are going to make your code more maintainable and save your time and effort. It’s easy to miss these steps when beginning a project, but I know from experience that putting them in place pays dividends forever. Think of it as compound interest. Start collecting that interest as soon as you implement them since they are quick and easy.

There are a ton of best practices so my list is not exhaustive, but they are practices that I have seen missing in many of my workplaces. I try to incorporate them as part of my onboarding. They build trust, momentum, and competence as part of my start. They can do the same for you!

I’m specifically focusing on easy wins. These are easy to add to any existing project.

When you automate basic processes, you free up mental capacity to focus on more important problems. Following community best practices also benefits each developer. They can move to new positions or codebases and jump right in and feel at home. React and Next.js are two open source projects that follow these practices.

npx mrm@2 lint-staged

Update package.json

Fantastic! That’s it! We’re done here.

Prettier is a community staple at this point. We should all strive to stay in line with the community. It makes adding developers to teams easier, and you will be a better fit when you search for your next job.

yarn add -D prettier

Add .prettierrc

Add .prettierignore

Again simple, but we are now done.

For this we want to make it run nicely with prettier. Let’s add eslint and some other helpful tools. You can pick eslint-config-airbnb or eslint-config-next, or <insert your favorite eslint config>. We also want to add lint-staged so that we catch any lint errors before they go into our repo.

yarn add -D eslint eslint-config-prettier eslint-config-next lint-staged

Add .eslintrc

Update package.json

We now have husky, prettier, and eslint. Let’s finish the job and do the best part. Catching and dealing with these on file save so that life is literally as simple as saving a file.

Adding vscode editor config is one of the easiest and best things you can do for your engineering team. It will save so many failed tests and errors.

New file at project root .editorconfig

Recommended plugins and settings can be shared by your team. This will prompt your team members to install recommended packages. This creates consistency on the team and saves time. You can customize the extensions, here is my sample:

mkdir .vscodetouch .vscode/extensions.json .vscode/settings.json

Update .vscode/extensions.json

Update .vscode/settings.json

Format on save is a wonderful time saver. But even more useful is the .editorconfig that formats your work for you before you even save.

We are now done with the basic set of best practices. We have implemented prettier on file save, eslinting, pre commit hooks, recommended plugins, basic settings. This is enough to prevent a lot of wasted time. You can customize each of these steps according to your own preferences and teams. Hopefully this will be a timesaver for you as much as it has been for me.

Related posts:

I am working on staying balanced throughout this time. When ever I feel challenged I go back to my mindfulness teachings and contemplate what I am being shown about myself and about life. What…

nobody told this little girl hiding behind my face that there was no lifetime of answers to teach her, and no time to teach them before she’d learn them herself

New International Monetary Fund paper is focused on the Philippines’ impact on the global crypto industry and vice versa. Read here the entire crypto news report.