Best practices any team can use with their typescript projects
Introduction
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 early will pay dividends forever. Think of it as compound interest.
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 always 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!
What is included in my list of best practices
I'm specifically focusing on easy wins. These are easy to add to any existing project.
- Pre commit hooks
- Prettier
- Eslint
- VScode editorconfig
- VScode recommended plugins
Prettier
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
{ "semi": false, "singleQuote": true, "tabWidth": 2, "useTabs": false }
Add .prettierignore
node_modules dist
Again simple, but we are now done.
Eslint
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>.
yarn add -D eslint eslint-config-prettier eslint-config-next
Add .eslintrc
{ "extends": ["next", "prettier"], "rules": { "react/no-unescaped-entities": "off" } }
Pre commit hooks
I am using husky "modern git hooks made easy". Running a linter on pre-commit hook saves tons of time in the long run.
npx mrm@2 lint-staged
Update package.json
"lint-staged": { "**/*.{js,jsx,ts,tsx}": [ "eslint", ], "**/*.{md,mdx,json}": [ "prettier --write", ] },
My example is within a monorepo, so husky runs the lint task in every applications package.json. Fantastic! That's it! We're done here.
Halftime
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.
VScode .editorconfig
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
root = true [*] indent_style = space indent_size = 2 tab_width = 4 end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true [*.md] trim_trailing_whitespace = false [*.js] quote_type = single [{*.c,*.cc,*.h,*.hh,*.cpp,*.hpp,*.m,*.mm,*.mpp,*.js,*.java,*.go,*.rs,*.php,*.ng,*.jsx,*.ts,*.d,*.cs,*.swift}] curly_bracket_next_line = false spaces_around_operators = true spaces_around_brackets = outside # close enough to 1TB indent_brace_style = K&R
VScode recommended plugins
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 .vscode
touch .vscode/extensions.json .vscode/settings.json
Update .vscode/extensions.json
{ "recommendations": [ "esbenp.prettier-vscode", "csstools.postcss", "bradlc.vscode-tailwindcss", "ms-vscode.vscode-typescript-next", "rbbit.typescript-hero", "mikestead.dotenv", "eamodio.gitlens", "GitHub.copilot" ] }
Update .vscode/settings.json
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }
Wrapping up
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.
From the blog
Come see what we're up to. We are excited to add new content regularly. We write content about new technologies, new products, and new business opportunities.
Test Deployment
Erik Mellum
Do you embrace change or fear it?
Erik Mellum
Six reasons dropbox paper is better than notion
Erik Mellum
Why you should estimate development tasks not stories
Erik Mellum
How to grow your career as a software developer
Erik Mellum
Resource based planning for product and engineering teams
Erik Mellum
Tips and pitfalls of setting up a monorepo with Turbo, Nextjs, and Vercel
Erik Mellum
Best practices any team can use with their typescript projects
Erik Mellum
How to Implement Invisible Captcha with Next.js in 2022
Erik Mellum
Where Do Computer Viruses Come From?
Erik Mellum
Rune Launches in Chico
Erik Mellum
Why Do Computers Break?
Erik Mellum