eslint / prettier / eslint-config-react-native-community integration with prettier extension in VS Code

Question

So, I am trying to use ESlint in my react native project. I want to be able to use prettier extension.

I have used this command to install my packages

npm i -D eslint prettier @react-native-community/eslint-config

and added a .eslintrc file.

{
    "extends": "@react-native-community"
}

I tried adding a .prettierignore file in the root folder. But the prettier extension as well as eslint(prettier/prettier) stops working.

Disabling prettier extension allows eslint(prettier/prettier) to work but I can't do without the extension.

I also tried adding .prettierrc file. But the rules inside it are only followed by the extension. eslint(prettier/prettier) gives the error.

I want the extension rules and eslint(prettier/prettier) rules to go along.

Answer 1

I found a solution to my problem. I edited the .eslintrc file to have rules for prettier/prettier

{
  "extends": ["@react-native-community"],
  "rules": {
    "prettier/prettier": ["error", { "singleQuote": true }]
  }
}

Answer 2

npm install --save-dev eslint
npx eslint --init

That i found best way