I need remove the semicolon error ESLint + Prettier

Question

How can I remove the semicolon rule?

I've tried to remove the semi rules, but I'm not succeeding. When I save the file once it removes the semicolons and lint complains that it's missing, and when I insert it it complains again saying to remove.

I would like to keep the semicolon

Thats my .prettierrc file:

{
  "printWidth": 100,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5",
  "endOfLine":"auto",
  "semi": true
}

and thats my .eslintrc file

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "env": {
        "browser": true, 
        "node": true,
        "es6": true
    },
    "extends": [
        "airbnb",
        "plugin:prettier/recommended", 
        "plugin:react/recommended",
        "plugin:jsx-a11y/recommended"
    ],
    "plugins": ["prettier", "react", "react-hooks"],
    "rules": {
        "prettier/prettier": [
            "error",
            {
              "endOfLine": "auto"
            }
        ],
        "react-hooks/exhaustive-deps": "warn",
        "react-hooks/rules-of-hooks": "error",
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
        "react/jsx-indent-props": [2, 4],
        "react/jsx-indent": [2, 4],
        "react/jsx-one-expression-per-line": [0],
        "react/prefer-stateless-function": [1],
        "react/static-property-placement": [1, "property assignment"],
        "react/prop-types": "off"
    }
}

Answer 1

Within the rules section, override prettier configuration like so:

  "rules": {
    "prettier/prettier": ["error", { "semi": false }],
  }

This will disallow the use of a semicolon where it's not required, as per the prettier rules.

Answer 2

I got rid of the same error by setting the prettier rules configuration in .eslintrc to:

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

while keeping in .prettierrc:

"endOfLine": "auto"

NOTE: This is just an intent to workaround the error you (and I) got, but the effect I see is that the "endOfLine" rule will work when using the pretty formatted but not when running eslint.

Answer 3

Just remove from the .eslintrc in the rules section the line:

"prettier/prettier": "error"

It seems like it causes some conflict.

If you use the solution: https://stackoverflow.com/a/72880773/6889886 proposed by silver_mx, the VS Code will not inform you about the issue while writing the code.