Setting Up ESLint and Prettier in a Node.js Project: A Complete Guide.

Have you ever worked on a project where quotes were sometimes single, sometimes double? Where some files used semicolons and others didn't? Or worse, have you ever spent hours debugging because you used a variable that wasn't imported? If you answer yes to any of these questions, this guide is for you! In this blog post, I'll walk you through setting up ESLint and Prettier in your Node.js project in simple, easy-to-follow steps. I'll explain what each tool does, why you need it, and how to configure it properly - all in plain language that anyone can understand. What are ESLint and Prettier? Before diving into the setup, let's understand what these tools do: ESLint is like a code detective. It checks your code for potential errors and enforces coding style rules. For example, it can warn you if you're using a variable that hasn't been defined, or if you're not following the project's coding standards. Prettier is like an automatic code formatter. It takes your code, regardless of how it's formatted, and makes it look consistent according to the rules you set. It handles things like indentation, spacing, and line breaks. Together, these tools help make your code more consistent, easier to read, and less prone to bugs. Why Do I Need These Tools? You might be wondering, "Why bother with all this setup?" Here are a few real-world problems these tools solve: Catching errors before they happen: ESLint can spot potential bugs before you even run your code. Consistency across projects: No more debating whether to use tabs or spaces, or single or double quotes. Saving time: Instead of manually formatting your code, Prettier does it for you instantly. Improved collaboration: Everyone on the team follows the same coding standards automatically. Step-by-Step Setup Guide Let's break down the process into simple steps: Step 1: Install the Required Packages First, we need to install ESLint, Prettier, and some helper packages: yarn add -D eslint prettier eslint-config-prettier eslint-plugin-import globals What each package does: eslint: The main linting tool that checks your code for problems prettier: The code formatter that makes your code look consistent eslint-config-prettier: Turns off ESLint rules that might conflict with Prettier eslint-plugin-import: Helps ESLint check import/export statements (super helpful!) globals: Provides global variables for different environments (like Node.js) Step 2: Create Configuration Files Next, we need to create configuration files for ESLint and Prettier. ESLint Configuration (eslint.config.js) This file tells ESLint how to check your code: import eslint from '@eslint/js'; import prettierConfig from 'eslint-config-prettier'; import importPlugin from 'eslint-plugin-import'; import globals from 'globals'; export default [ eslint.configs.recommended, { files: ['/*.js'], languageOptions: { ecmaVersion: 'latest', sourceType: 'module', globals: { ...globals.node, ...globals.es2021 } }, plugins: { import: importPlugin, }, rules: { // Enforce import/export syntax 'import/no-unresolved': 'error', 'import/named': 'error', 'import/default': 'error', 'import/export': 'error', // Prevent usage of variables before they are defined 'no-use-before-define': 'error', // Enforce consistent quote style (single quotes) 'quotes': ['error', 'single', { 'avoidEscape': true }], // Require semicolons 'semi': ['error', 'always'], // Disallow unused variables 'no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }], }, }, prettierConfig, ]; Key points about this config: It's set up for modern JavaScript using ES modules It adds specific rules to catch missing imports It enforces style rules like single quotes and semicolons It includes Node.js globals, so you won't get errors about console or process Prettier Configuration (.prettierrc) This file tells Prettier how to format your code: { "singleQuote": true, "trailingComma": "es5", "semi": true, "tabWidth": 2, "printWidth": 100, "bracketSpacing": true, "arrowParens": "avoid" } This configuration: Uses single quotes instead of double quotes Adds semicolons at the end of statements Sets tab width to 2 spaces Limits line length to 100 characters Adds spaces inside brackets Avoids parentheses around single arrow function parameters Step 3: Set Up Editor Integration To make ESLint and Prettier work seamlessly with your code editor, we need to add some editor-specific settings. Create a .vscode folder in your project root, then add a settings.json file inside it: { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript"], "p

Apr 30, 2025 - 19:16

Setting Up ESLint and Prettier in a Node.js Project: A Complete Guide.

Have you ever worked on a project where quotes were sometimes single, sometimes double? Where some files used semicolons and others didn't? Or worse, have you ever spent hours debugging because you used a variable that wasn't imported? If you answer yes to any of these questions, this guide is for you!

In this blog post, I'll walk you through setting up ESLint and Prettier in your Node.js project in simple, easy-to-follow steps. I'll explain what each tool does, why you need it, and how to configure it properly - all in plain language that anyone can understand.

What are ESLint and Prettier?

Before diving into the setup, let's understand what these tools do:

ESLint is like a code detective. It checks your code for potential errors and enforces coding style rules. For example, it can warn you if you're using a variable that hasn't been defined, or if you're not following the project's coding standards.

Prettier is like an automatic code formatter. It takes your code, regardless of how it's formatted, and makes it look consistent according to the rules you set. It handles things like indentation, spacing, and line breaks.

Together, these tools help make your code more consistent, easier to read, and less prone to bugs.

Why Do I Need These Tools?

You might be wondering, "Why bother with all this setup?" Here are a few real-world problems these tools solve:

Catching errors before they happen: ESLint can spot potential bugs before you even run your code.
Consistency across projects: No more debating whether to use tabs or spaces, or single or double quotes.
Saving time: Instead of manually formatting your code, Prettier does it for you instantly.
Improved collaboration: Everyone on the team follows the same coding standards automatically.

Step-by-Step Setup Guide

Let's break down the process into simple steps:

Step 1: Install the Required Packages

First, we need to install ESLint, Prettier, and some helper packages:

yarn add -D eslint prettier eslint-config-prettier eslint-plugin-import globals

What each package does:

eslint: The main linting tool that checks your code for problems
prettier: The code formatter that makes your code look consistent
eslint-config-prettier: Turns off ESLint rules that might conflict with Prettier
eslint-plugin-import: Helps ESLint check import/export statements (super helpful!)
globals: Provides global variables for different environments (like Node.js)

Step 2: Create Configuration Files

Next, we need to create configuration files for ESLint and Prettier.

**ESLint Configuration (eslint.config.js)

This file tells ESLint how to check your code:

import eslint from '@eslint/js';
import prettierConfig from 'eslint-config-prettier';
import importPlugin from 'eslint-plugin-import';
import globals from 'globals';

export default [
  eslint.configs.recommended,
  {
    files: ['**/*.js'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: {
        ...globals.node,
        ...globals.es2021
      }
    },
    plugins: {
      import: importPlugin,
    },
    rules: {
      // Enforce import/export syntax
      'import/no-unresolved': 'error',
      'import/named': 'error',
      'import/default': 'error',
      'import/export': 'error',

      // Prevent usage of variables before they are defined
      'no-use-before-define': 'error',

      // Enforce consistent quote style (single quotes)
      'quotes': ['error', 'single', { 'avoidEscape': true }],

      // Require semicolons
      'semi': ['error', 'always'],

      // Disallow unused variables
      'no-unused-vars': ['error', { 'argsIgnorePattern': '^_' }],
    },
  },
  prettierConfig,
];

**Key points about this config:

It's set up for modern JavaScript using ES modules
It adds specific rules to catch missing imports
It enforces style rules like single quotes and semicolons
It includes Node.js globals, so you won't get errors about console or process

**Prettier Configuration (.prettierrc)
This file tells Prettier how to format your code:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

This configuration:

Uses single quotes instead of double quotes
Adds semicolons at the end of statements
Sets tab width to 2 spaces
Limits line length to 100 characters
Adds spaces inside brackets
Avoids parentheses around single arrow function parameters

Step 3: Set Up Editor Integration

To make ESLint and Prettier work seamlessly with your code editor, we need to add some editor-specific settings.

Create a .vscode folder in your project root, then add a settings.json file inside it:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript"],
  "prettier.singleQuote": true
}

This tells VS Code to:

Format your code automatically when you save
Use Prettier as the default formatter
Fix ESLint issues automatically when you save
Apply ESLint to JavaScript files
Use single quotes with Prettier

**For Cursor:
Since Cursor is built on VS Code, the same settings work there too! Just create the same .vscode folder and settings.json file.

Step 4: Install Editor Extensions

To make everything work smoothly, install these extensions in your editor:

**For VS Code or Cursor:

ESLint (by Microsoft)
Prettier - Code formatter (by Prettier)

You can install them from the Extensions marketplace in your editor.

Step 5: Add NPM/Yarn Scripts

Add these scripts to your package.json file:

{
  "scripts": {
    "lint": "eslint . --ext .js",
    "lint:fix": "eslint . --ext .js --fix",
    "format": "prettier --write ."
  }
}

These scripts let you:

Check your code for issues (yarn lint)
Fix linting issues automatically (yarn lint:fix)
Format your entire project (yarn format)

Testing Your Setup

To make sure everything is working correctly:

Create a test file with some issues:

// This should show an error (missing import)
const result = someFunction();

// This should be converted to single quotes
const message = "This should be converted to single quotes";

// This should show an unused variable warning
const unusedVar = 42;

Save the file and check if:

ESLint highlights the errors
The quotes are automatically converted to single quotes
The indentation and formatting are fixed

Conclusion

Setting up ESLint and Prettier might seem like extra work at first, but it pays off enormously in the long run. Your code will be more consistent, you'll catch errors earlier, and you'll spend less time on formatting and style issues.

The configuration we've set up in this guide is particularly useful for Node.js projects using ES modules, but you can easily adapt it for other types of projects by adjusting the rules and plugins.

Happy coding!

P.S. If you ever need to reference this setup again, bookmark this blog post or save the configuration files in a GitHub repository for easy access!