How to Use Prettier and ESLint for Automated Code Quality and Formatting

Code quality and consistency are fundamental aspects of software development that can dramatically impact the maintainability and readability of a codebase. In the world of JavaScript, two powerful tools stand out: Prettier and ESLint. In this article, we’ll dive deep into how to integrate these tools into your development workflow, ensuring that your code remains tidy and adheres to best practices.

What is Prettier?

Prettier is an opinionated code formatter that automatically styles your code according to predefined rules. Its primary purpose is to ensure that all code across a project adopts a consistent formatting style, which can help mitigate common arguments over code styles among team members.

Benefits of Using Prettier

• Consistent Style: Prettier enforces a uniform look for your code, which can enhance readability.
• Automatic Formatting: You can integrate Prettier into your editor or CI/CD pipeline to format code automatically on save or during builds.
• Configuration Made Easy: Prettier requires minimal configuration, making setup straightforward.

What is ESLint?

ESLint is a linting utility for JavaScript and JSX/React. It analyzes your code to identify problems, including syntax errors, potential bugs, and code quality issues. ESLint can also enforce coding standards by enabling rules and configurations.

Benefits of Using ESLint

• Customizable Rules: You can customize ESLint rules based on your project’s needs, allowing for tailored linting that suits your team.
• Supports Plugins: ESLint supports a wide range of plugins, enabling you to lint various frameworks and libraries.
• Error Prevention: By identifying potential problems early, ESLint helps prevent bugs from reaching production.

Why Use Prettier and ESLint Together?

While Prettier focuses on formatting, ESLint emphasizes code quality and potential pitfalls. Using both ensures that your code is not only well-formatted but also adheres to best coding practices, resulting in more reliable and maintainable code.

Integrating both tools can prevent conflicts and make developer experience smoother. With automated formatting and linting, you can save time and reduce errors.

Getting Started with Prettier and ESLint

Step 1: Install Prettier and ESLint

First, you need to add both Prettier and ESLint to your project. You can do this using npm or yarn.

npm install --save-dev prettier eslint

yarn add --dev prettier eslint

Step 2: Initialize ESLint

You can easily set up ESLint with the following command:

npx eslint --init

This command will prompt you to answer several questions regarding your project, such as the framework you’re using and how you would like to enforce style rules.

Step 3: Create Configuration Files

Next, you’ll need configuration files for both Prettier and ESLint.

Creating Prettier Configuration (prettier.config.js)

module.exports = {
    singleQuote: true,
    trailingComma: 'all',
    printWidth: 80,
};

Creating ESLint Configuration (.eslintrc.json)

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["eslint:recommended", "prettier"],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
        // You can add custom rules here
    }
}

Creating .prettierrc

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

Step 4: Configure ESLint to Work with Prettier

To prevent ESLint rules from clashing with Prettier formatting, you need to install the following plugin:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Then, you can extend your ESLint configuration to include Prettier:

{
    "extends": [
        "eslint:recommended",
        "plugin:prettier/recommended"
    ]
}

Running Prettier and ESLint

Now that you have everything set up, you can start using Prettier and ESLint to format and lint your code.

Running on Command Line

To manually run ESLint and Prettier, you can use the following commands:

npx eslint .

npx prettier --check .

To format your code with Prettier, run:

npx prettier --write .

Automating with NPM Scripts

You can also automate running these tools by adding scripts to your package.json file:

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

Now, you can run these commands with:

npm run lint

npm run format

npm run lint:fix

Integrating with Your Editor

To streamline your workflow even further, consider integrating Prettier and ESLint with your code editor. Most popular editors like Visual Studio Code, Sublime Text, and Atom have extensions available.

Setting up in VS Code

In Visual Studio Code, search for the Prettier – Code formatter and ESLint extensions in the marketplace and install them. Then, add the following to your settings.json:

{
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

This will ensure that your code is formatted using Prettier and linted with ESLint every time you save your file.

Using ESLint with Typescript

If you’re using TypeScript, you’ll need to add some additional configurations:

Install TypeScript ESLint

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Configure ESLint for TypeScript

Modify your .eslintrc.json file to support TypeScript:

{
    "parser": "@typescript-eslint/parser",
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:prettier/recommended"
    ],
    "rules": {
        // Your rules here
    }
}

Common Issues and Troubleshooting

As with any integrated toolchain, you may encounter issues. Here are some common problems and how to address them:

Conflicts Between ESLint and Prettier

Conflicts usually arise when rules in ESLint contradict Prettier’s formatting. Using the eslint-config-prettier package addresses this issue by turning off conflicting rules.

ESLint Doesn’t Run Automatically

If ESLint is not running automatically in your editor, ensure that the ESLint extension is activated and that your settings are correctly configured.

Conclusion

By using Prettier and ESLint together, you can create a robust development environment that encourages code quality and consistency. With automated formatting and linting, you reduce the likelihood of errors, ensure a cleaner codebase, and ultimately enhance maintainability. Remember, the goal of these tools is to serve you and not to hinder creativity – leverage them to create an enjoyable and productive coding experience.

Start integrating Prettier and ESLint into your development process today for a cleaner, more efficient coding environment!