Quick config for Eslint and Prettier

It can be a bit annoying to configure eslint to work together with prettier, because of some unwanted conflicts and because we need 2 configuration files and 2 extensions: .eslint and .prettier. There is a simpler way to do this, avoiding having 2 different files and reducing the chance of conflicts. Let's go:

Choose the settings that best suit your style

yarn eslint --init

we'll use prettier as an eslint plugin.

yarn add eslint-plugin-prettier prettier -D

add prettier in array of plugins

"plugins": [
    "react",
    "prettier"
 ],

add the prettier configs into 'rules' following this format, You are free to choose the styles that suit you best.

"rules": {
      "prettier/prettier": [
        "error",
        {
          "printWidth": 80,
          "tabWidth": 2,
          "singleQuote": true,
          "trailingComma": "all",
          "arrowParens": "always",
          "semi": false
        }
      ]
  }

the eslint file should look like this:

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "prettier"
    ],
    "rules": {
      "prettier/prettier": [
        "error",
        {
          "printWidth": 80,
          "tabWidth": 2,
          "singleQuote": true,
          "trailingComma": "all",
          "arrowParens": "always",
          "semi": false
        }
      ]
    }
}