Having eslint and prettier to work together

1. eslint and prettier.markdown

It requires:

• eslint-config-prettier to avoid collision with other eslint rules
• eslint-plugin-prettier to add the eslint rules
• prettier package

Install

yarn add --dev eslint-config-prettier eslint-plugin-prettier prettier

Configure

Add prettier to eslint configuration plugins section Add prettier last to eslint configuration extends section Add the prettier/prettier rule:

    "rules": {
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ]
    }

eslintrc.json

{
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true,
            "useJSXTextNode": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module",
        "project": "./tsconfig.json"
    },
    "extends": [
        "next/core-web-vitals",
        "prettier"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": [
            "error",
            {
                "endOfLine": "auto"
            }
        ]
    }
}