Improving Frontend Code Quality with ESLint and Prettier

by

Writing clean, consistent code is key to creating maintainable frontend applications. When working with JavaScript, tools like ESLint and Prettier can help ensure that code quality and style remain high, making collaboration easier and reducing technical debt over time.

In this post, we’ll discuss what ESLint and Prettier do, why they’re useful, and how to set them up for optimal results in frontend development.

Why Use ESLint and Prettier?

ESLint focuses on detecting potential issues in JavaScript code. It enforces coding best practices, flags syntax errors, and helps ensure a high standard of code quality by catching potential bugs.

Prettier, on the other hand, is a code formatter. Its purpose is to enforce a consistent coding style so that, regardless of personal preferences, the entire codebase remains visually consistent.

Using ESLint and Prettier together helps you maintain not just quality (fewer bugs and better practices) but also consistency in style, creating a seamless development experience.

Step 1: Setting Up ESLint

First, install ESLint in your project.

Install ESLint:

import React, { useState } from 'react';
npm init -y
npm install eslint --save-dev

Configure ESLint: Run the following command to initialize ESLint configuration:

npx eslint --init

ESLint will prompt you with questions about your preferred setup, such as ECMAScript version, module type (CommonJS or ES6), and environment (Node, Browser, etc.).

Customize ESLint Rules: After initialization, an .eslintrc file is created. This file allows you to add or modify rules to customize ESLint’s behavior. Here’s an example of a basic configuration:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-unused-vars": "warn"
  }
}

Run ESLint: To run ESLint across your project, use:

npx eslint .

This command highlights any syntax errors, unused variables, and more based on the rules in .eslintrc.

Step 2: Setting Up Prettier

Next, integrate Prettier to handle code formatting.

Install Prettier:

npm install prettier --save-dev

Create a Prettier Configuration: Prettier works out of the box, but adding a .prettierrc file allows you to set custom formatting rules:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Run Prettier: To apply Prettier formatting to all files, run:

npx prettier --write .
Step 3: Combining ESLint and Prettier

To prevent conflicts (e.g., Prettier’s formatting style conflicting with ESLint’s rules), you’ll want to configure them to work smoothly together.

Install ESLint-Prettier Plugins:

npm install eslint-config-prettier eslint-plugin-prettier --save-dev
  • eslint-config-prettier turns off any rules in ESLint that might conflict with Prettier.
  • eslint-plugin-prettier integrates Prettier as an ESLint rule, allowing you to see Prettier issues in ESLint output.

Update ESLint Config: Modify your .eslintrc to include Prettier:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-unused-vars": "warn"
  }
}

Integrate with Your Editor: Most editors like VSCode offer ESLint and Prettier plugins. Enable “format on save” for automatic Prettier formatting and real-time ESLint feedback.

Best Practices
  • Pre-commit Hooks: Using a tool like Husky to automatically run ESLint and Prettier on staged files before each commit ensures that only high-quality code makes it into version control.
npx husky install
  • Clear Documentation: Documenting your ESLint and Prettier setup in the README helps new team members onboard quickly and maintain code quality.
  • Regular Updates: Stay updated with the latest versions of ESLint and Prettier to leverage new features and fixes.
  • Team Customization: Tailor rules to match team preferences for a balance between enforcement and flexibility.

Conclusion

Together, ESLint and Prettier enhance code readability, reduce errors, and enforce consistent formatting. With this setup, you can create code that’s not only functional but also well-organized and easy to maintain. These tools save time, streamline team collaboration, and contribute to a high-quality codebase—essential components for any successful project.

Whether you’re working solo or in a team, integrating ESLint and Prettier is a worthwhile step toward developing better, cleaner frontend applications. Happy coding!

Leave a Comment