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.