Maintaining code consistency and quality throughout a project requires the establishment of a comprehensive development environment. This guide will show you how to set up ESLint, Jest, and Prettier for your Node and React TypeScript projects.

Introduction

Introductions

We know that while writing code, We need to enforce coding standards, maintain code consistency, and automate testing to ensure code is correct. In this guide, you will find developer guidelines, practical code snippets, and best practices that will help you streamline your development workflow. Whether you’re starting a new project or improving an old one, you’ll find what you need.

If you’re seeking an example and an existing Node.js project, rather than a guide, please refer to the Github repository below, which includes a template for TypeScript, Eslint, Jest, and Prettier.

GitHub – santoshshinde2012/node-boilerplate: Node Typescript Boilerplate for Microservices. Skeleton for Node.js Apps written in TypeScript (with Setup Instructions for ESLint, Prettier, and Husky)

With Node Typescript Sequelize PostgreSQL Boilerplate

GitHub – santoshshinde2012/node-ts-sequelize-pg-boilerplate: NodeSeQ – Node Typescript Sequelize PostgreSQL Boilerplate

Step 1: Setup ESLint

ESLint statically analyzes your code to quickly find problems. It is built into most text editors and you can run ESLint as part of your continuous integration pipeline.

In my opinion, the following getting started guide provides clear instructions for setting up eslint in your project. If you already have a legacy setup, make sure to uninstall any unused node modules first.

Getting Started with ESLint – ESLint – Pluggable JavaScript Linter

We used the below configuration to configure eslint, and in our case, we are using the eslint.config.mjs file.To understand the configuration file and syntax, please refer to the official Eslint article, which explains Eslint configuration.

Configuration Files – ESLint – Pluggable JavaScript Linter

https://medium.com/media/ea2156284de3825e601ed9b7edab4fd5/hrefnpm run lint

Step 2: Setup Prettier

Prettier is an opinionated code formatter that supports various languages, integrates with most editors.

Why Prettier? · Prettier

Also, we need to update the eslint configuration, as we know our eslint rule is unnecessary or might conflict with Prettier by using eslint-prettier-config.

https://medium.com/media/c384b8daac539bd1405d9432de536fa2/hrefnpm run format

Step 3: Setup Jest

Jest is a delightful JavaScript Testing Framework with a focus on simplicity.

Getting Started · Jest

Also, we need to update the eslint configuration for the eslint plugin for Jest, eslint-plugin-jest.

https://medium.com/media/23b6473949a9d2924b5e2e83bdf87772/hrefnpm run test

How can we determine whether a project is not using an npm dependency?

If you’re trying to set up tslint in an existing project, you can try checking the not-used package using the depcheck tool.

Depcheck is a tool for analyzing the dependencies in a project to see: how each dependency is used, which dependencies are useless, and which dependencies are missing from package.json.

GitHub – depcheck/depcheck: Check your npm module for unused dependencies

Example — Please refer to the npx depcheckresult of the snapshot for one of the projects provided below.

npx depcheck

How can we determine whether a project has an outdated NPM dependency?

By default, we do have an npm outdated command option with npm, but it only shows you outdated packages. If you are looking to update, then use the npm check update npm-check-updatestool.

npm outdated

Result for npm-check-updates

ncu — interactive

Thanks for reading. Please do share your comments and give a clap if this blog has added value to your learning.

Follow me on Twitter and LinkedIn and support my work by buying me a coffee.

A Comprehensive Guide to Setting Up ESLint, Jest, and Prettier in Node TypeScript was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

​ Level Up Coding – Medium

about Infinite Loop Digital

We support businesses by identifying requirements and helping clients integrate AI seamlessly into their operations.

Gartner
Gartner Digital Workplace Summit Generative Al

GenAI sessions:

  • 4 Use Cases for Generative AI and ChatGPT in the Digital Workplace
  • How the Power of Generative AI Will Transform Knowledge Management
  • The Perils and Promises of Microsoft 365 Copilot
  • How to Be the Generative AI Champion Your CIO and Organization Need
  • How to Shift Organizational Culture Today to Embrace Generative AI Tomorrow
  • Mitigate the Risks of Generative AI by Enhancing Your Information Governance
  • Cultivate Essential Skills for Collaborating With Artificial Intelligence
  • Ask the Expert: Microsoft 365 Copilot
  • Generative AI Across Digital Workplace Markets
10 – 11 June 2024

London, U.K.