Eslint prettier error on new line incomprehensible

Question

I have and error of eslint in my code that I cannot understand how turn off, these are some examples:

As you can see there is a eslint(prettier/prettier) rule that is incomprehensible and I can't understand how to turn off. This is my eslint and prettier config:

eslint

module.exports = {
  root: true,
  extends: ['@react-native-community'],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/no-shadow': ['error'],
        'no-shadow': 'off',
        'no-undef': 'off',
      },
    },
  ],
};

prettier

module.exports = {
  printWidth: 100,
  arrowParens: 'avoid',
  bracketSameLine: false,
  singleQuote: true,
  tabWidth: 2
};

JΛYDΞV · Answer 1 · 2022-04-24T12:56:12.300

Oh Pierro... Its you again.

Your Prettier configuration is not in sync with your ESLint configuration.

When you set Prettier's print-width rule, you need to always make sure that you set ESLint's max-len rule to the same value. This is very import, and is likely causing your issue. You seem to have some other stuff going on though.

@see this post

You need to synchronize the two. Ir looks like a JSX configuration that's causing problems. Try changing the value of bracketSameLine in your prettier configuration to true, or try getting rid of it all together.

You see where it says that the rule prettier/prettier is causing the issue? That should be in your configuration.

That's odd... You don't seem to have your .eslintrc.* file configured properly. It looks like your not properly configuring the eslint-plugin-prettier plugin for ESLint.

If you look at the plugin's documentation, which is where the prettier/prettier rule comes from (the first prettier is the name if the plugin, the second prettier is the name of the rule) it says you need to add the following values to the correct settings in your .eslintrc.* configuration file.

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

Its odd that the prettier/prettier rule shows up at all without you having added that configuration.

@see this answer here, it thoroughly explains what the prettier/prettier rule is.

The first line of this response actually made me laugh out loud. On a serious note, thank you for your answer, helped me a lot! — sunderee, Jan 08 '23 at 10:14

score 0 · Answer 2 · answered Nov 24 '22 at 14:10

The if the prettier config file is not present, the auto-formatting properties of vscode are taken as the default. the settings.json in the .vscode settings should be in sync with the linter properties. In your case you don't have prettier configured thats why the error is being thrown from prettier/prettier

Eslint prettier error on new line incomprehensible

2 Answers2