The Power of the Perfect Trio: Using Prettier, ESLint, and Husky to Enforce Code Style in Node.js

When it comes to maintaining clean and consistent code in your Node.js projects, having the right tools in your toolkit can make all the difference. Enter the power trio: Prettier, ESLint, and Husky. These three tools, when combined, can streamline your development process, enforce coding standards, and ensure that your codebase remains readable and maintainable.

What’s in the Trio?

Prettier

Prettier is a code formatter that automatically formats your code to follow a consistent style. With its opinionated approach, Prettier eliminates debates over code formatting and ensures that your code is always presented in a clean and consistent manner.

ESLint

ESLint is a powerful linter tool that helps you catch and fix coding errors, enforce coding conventions, and identify potential issues in your code. With a wide range of customizable rules, ESLint ensures that your code adheres to best practices and coding standards.

Husky

Husky is a Git hooks manager that enables you to run scripts at specific points in your Git workflow. By using Husky, you can automatically trigger tasks like code linting and formatting before commits are made, ensuring that only well-formatted and error-free code makes its way into your repository.

Combining the Powers

When these three tools are combined, you get a seamless development experience that actively promotes code quality. Here’s how they work together:

1. Prettier + ESLint: While Prettier focuses on code formatting, ESLint takes care of code quality. By integrating Prettier and ESLint, you can ensure that your code not only looks great but also adheres to coding best practices.

2. Husky + ESLint/Prettier: Husky allows you to set up pre-commit and pre-push hooks. This means that before you commit or push your code, Husky can automatically trigger ESLint and Prettier to ensure that your changes meet the defined coding standards. This prevents messy or erroneous code from entering your codebase.

Setting Up the Trio

Getting started with the trio of Prettier, ESLint, and Husky is a breeze. Follow these steps to harness their power in your Node.js projects:

1. Install Prettier, ESLint, and Husky as dev dependencies in your project.
2. Open your terminal and navigate to your project directory. Use the following commands to install Prettier, ESLint, and Husky:

npm install --save-dev prettier eslint husky

This installs the required packages as development dependencies, allowing you to use them during development and keeping your production environment clean.

3. Configure ESLint with the desired rules for your project’s coding standards.

Create an .eslintrc.js file in the root of your project or configure ESLint through your package.json. Customize ESLint rules based on your project's coding standards. For example, if you prefer double quotes for string literals and a maximum line length of 80 characters, your .eslintrc.js might look like this:

module.exports = {   // ...   
  rules: {     
  'quotes': ['error', 'double'],    
   'max-len': ['error', { 'code': 80 }]   
  } 
};

4. Create a Prettier configuration file to define your code formatting preferences.

Similar to ESLint, create a .prettierrc file in the project root. Define your code formatting preferences in this file. For example:

{   "singleQuote": true,   "printWidth": 80 }

This configures Prettier to use single quotes for strings and limit code width to 80 characters.

5. Set up Husky to run ESLint and Prettier scripts before commits and pushes.

Husky enables you to execute scripts at specific Git hooks, such as pre-commit and pre-push. Open your package.json and add the following configuration to set up Husky:

"husky": {   "hooks": {     "pre-commit": "lint-staged",     "pre-push": "npm run lint"   } }

In this example, Husky runs lint-staged before a commit (which ensures staged files are linted and formatted) and runs the npm run lint script before a push (to perform additional linting).

With the perfect trio in place, you’ll notice an immediate improvement in your code quality and development workflow. Say goodbye to endless debates about code style and hello to cleaner, more consistent code!

In conclusion, the combination of Prettier, ESLint, and Husky offers a powerful solution for maintaining impeccable code quality in your Node.js projects. By automating code formatting, enforcing coding standards, and integrating these tools into your Git workflow, you can focus on writing great code without sacrificing readability and maintainability.

Give the power trio a try and elevate your Node.js development to new heights!