Adding prettier to eslint

ESLint is a fantastic tool for maintaining code quality by identifying problematic patterns in your JS/TS code. However, when it comes to enforcing stylistic rules, Prettier is the go-to tool. By integrating Prettier with ESLint, you can ensure that your code not only follows best practices but also adheres to a consistent style.

To get started, you need to add Prettier to your ESLint configuration. This involves extending your ESLint configuration to include Prettier's rules. However, simply adding prettier to the list of rules ESLint extends from might lead to an error.

If you encounter the error:

ESLint couldn't find the config "prettier" to extend from. Please check that the name of the config is correct.

This usually means that the eslint-config-prettier package is missing from your project. This package turns off all ESLint rules that are unnecessary or might conflict with Prettier.

To resolve this issue, you need to install the eslint-config-prettier package. You can do this by running the following command in your terminal:

pnpm add -D eslint-config-prettier

Once installed, update your ESLint configuration file (usually .eslintrc.js or .eslintrc.json) to include prettier in the extends array:

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

This setup ensures that Prettier's rules are applied, and any conflicting ESLint rules are disabled.

tl;dr

To integrate Prettier with ESLint, install eslint-config-prettier and add it to your ESLint configuration. This resolves conflicts between ESLint and Prettier, ensuring your code is both high-quality and consistently styled.

Continue Reading