Breno Baptista

Best Development Tools for JavaScript Projects

Table of Contents


ESLint will make sure your code has a level of clarity that allows reading and maintaining easier for anyone who has to work on it.

Next.js and Create React App already come with ESLint, so we need only to extend its configuration if needed.


Prettier is an opinionated code formatter. Using Prettier will automatically fix and beautify your code.

In VSCode, you can go to settings and use Prettier as the default formatter and enable format on save.

My .prettierrc.json configuration:

  "semi": false,
  "singleQuote": true,
  "jsxSingleQuote": true,
  "arrowParens": "avoid",
  "trailingComma": "none",
  "endOfLine": "lf"

Lint Staged

Instead of running ESLint and Prettier on the entire project every time, Lint Staged will make sure you only lint files that will be committed.

My .lintstagedrc.json configuration:

  "*.{ts,tsx}": "eslint --fix",
  "*.{ts,tsx}": "prettier --write"


Husky makes it easy to configure git hooks. It allows you to run commands upon commits, pushes and other hooks.

My pre-commit configuration (runs ESLint and Prettier):

pnpm lint-staged

My pre-push configuration (runs type-check and Jest):

pnpm tsc --noEmit
pnpm jest

Bonus: EditorConfig

EditorConfig is not exclusive to JavaScript projects, but it's a good idea to use it if you work in a team. It maintains consistent coding styles for developers working across different editors.

Just install its extension and create a configuration file to make it work.

My .editorconfig configuration:

root = true

indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

That's all Folks!

Using these tools will make you deliver better code in your projects. Integrate them early on your projects to avoid some technical debt.

You can also use TypeScript instead of JavaScript. It is a powerful language that removes all the headaches when debugging your code (no more console logging to discover the type of a variable).

Don't forget to test your code using tools like Jest/React Testing Library and Cypress. It will give you the confidence to make changes to your codebase without worrying about breaking stuff in production.

Low-poly portrait of Breno Baptista

Breno Baptista is a software engineer who likes to explore new things every day. He is interested in Linux, open-source software, digital privacy and front-end development.