Best Development Tools for JavaScript Projects

Table of Contents

• ESLint
• Prettier
• Lint Staged
• Husky
• Bonus: EditorConfig
• That's all Folks!

ESLint

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.

• Installing ESLint's extension for VSCode
• Configuring ESLint in Next.js
• Turning off conflicts with Prettier
• Running Prettier as a rule

Prettier

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.

• Installing Prettier's extension for VSCode
• Installing Prettier in your project

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.

• Installing Lint Staged in your project

My .lintstagedrc.json configuration:

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

Husky

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

• Installing Husky in your project
• Husky's website

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.

• EditorConfig's website
• Install EditorConfig's extension for VSCode

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.