Setting Up ESLint and Prettier in Your Node.js App with Pre-Commit Hooks

To set up ESLint and Prettier in your Node.js app with pre-commit hooks, follow these steps:

1. Install Dependencies
Run the following command to install the necessary dependencies:

npm install --save-dev @commitlint/cli @commitlint/config-conventional @eslint/js eslint eslint-config-prettier eslint-plugin-prettier globals prettier husky lint-staged

2. Configure ESLint
Create a .eslint.config.js file in the root directory:

import js from '@eslint/js';

export default [
  js.configs.recommended,
  {
    languageOptions: {
      globals: {
        console: true,
        process: true,
      },
    },
    rules: {
      'no-console': ['error', { allow: ['warn', 'error'] }], // Allow console.warn and console.error
      'no-unused-vars': ['off', {
        vars: 'all', // Check all
        args: 'after-used', // Ignore unused variables after they are used
        ignoreRestSiblings: false, // Ignore unused variables that are rest siblings
        varsIgnorePattern: '^_', // Ignore unused variables starting with an underscore
        argsIgnorePattern: '^_', // Ignore unused variables starting with an underscore
      }], // Warn on unused variables
      'no-undef': ['off',{
        typeof: true,
      }], // Error on undefined variables
      'quotes': ['error', 'single', { allowTemplateLiterals: true }], // Use single quotes
    },
  },
];

3. Configure Prettier
Create a .prettierrc file in the root directory:

{
    "trailingComma": "none",
    "tabWidth": 4,
    "semi": false,
    "singleQuote": true,
    "bracketSameLine": true,
    "printWidth": 150,
    "singleAttributePerLine": true,
    "endOfLine": "crlf"
}

4. Configure Commitlint
Create a commitlint.config.js file in the root directory:

module.exports = {
    extends: ['@commitlint/cli', '@commitlint/config-conventional'],
    rules: {
        'type-enum': [
            2,
            'always',
            [
                'feat',  // feat: implement user profile page
                'fix',  // fix: correct typo in user profile page
                'docs', // docs: add jsdoc to user profile page
                'style', // style: add css to user profile page
                'refactor', // refactor: extract user profile page to component
                'perf', // perf: improve user profile page load time
                'test', // test: add unit test for user profile page
                'build', // build: update webpack config
                'ci',   // ci: add github actions
                'chore',    // chore: update dependencies
                'revert'    // revert: revert changes
            ]
        ],
        'subject-case': [2, 'always', 'sentence-case']
    }
}
// for flexible commit messages
// module.exports = {
//     extends: ['@commitlint/cli', '@commitlint/config-conventional'],
//     rules: {
//         // Disable the type-enum rule
//         'type-enum': [0], // 0 disables the rule

//         // Disable the type-empty rule to allow commits without a type
//         'type-empty': [0], // 0 disables the rule

//         // Disable the subject-case rule
//         'subject-case': [0], // 0 disables the rule

//         // Optionally, disable subject-empty to allow empty subjects
//         'subject-empty': [0], // 0 disables the rule

//         // Disable other rules if needed
//     }
// }

5. Configure husky
To organize your Husky hooks, you can create a .husky folder for the pre-commit and commit-msg hooks. Here's how you can do it:

Create the .husky Folder
Run the following commands in your terminal:

mkdir .husky

Create Pre-commit Hook
Inside the .husky folder, create the pre-commit hook:

npx husky add .husky/pre-commit "npx lint-staged"

This command creates a .husky/pre-commit file with the following content:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

Create Commit-msg Hook
Inside the .husky folder, create the commit-msg hook:

npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"

This command creates a .husky/commit-msg file with the following content:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

5. Setup package.json

"scripts": {
    "dev": "nodemon server.js",
    "start": "node server.js",
    "prepare": "husky",
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "format:check": "prettier . --check",
    "format:fix": "prettier . --fix"
  },

 "devDependencies": {
    "@commitlint/cli": "^19.4.0",
    "@commitlint/config-conventional": "^19.2.2",
    "@eslint/js": "^9.9.1",
    "eslint": "^9.9.1",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "globals": "^15.9.0",
    "prettier": "^3.3.3"
  }