33

I have react-native code. I install ESLint. I use it but its show error.

While I use single quotes it show me error

Replace 'react-native' with "react-native" eslint(prettier/prettier)

And when I use double qoutes it show me another error

String must use singlequote. eslint(quotes)

here is the screenshot:

screenshot

What i want is, how to remove error messages about using single quotes? I prefer using single quotes instead double quotes.

alfianrehanusa
  • 1,424
  • 2
  • 15
  • 30
  • 2
    You can read the details of the rule [here](https://eslint.org/docs/rules/quotes#enforce-the-consistent-use-of-either-backticks-double-or-single-quotes-quotes) and how add your own configuration [here](https://eslint.org/docs/user-guide/configuring) – MinusFour Aug 04 '19 at 03:15
  • @MinusFour thanks, but i'm still confused how to use it to my project – alfianrehanusa Aug 04 '19 at 03:27

5 Answers5

47

In addition to @Barmar answer, you could also use prettier configuration on a .eslintrc.js file using the following, property:

rules: {
    // ...
    'prettier/prettier': ['error', { singleQuote: true }]
  }
albertTaberner
  • 1,969
  • 1
  • 26
  • 35
13

The two answers here helped me get to the solution that worked for me. In my .eslintrc file, I added the following:

"rules": {
  "prettier/prettier": ["error", { "singleQuote": true }]
}
ConcernedHobbit
  • 764
  • 1
  • 8
  • 17
  • 2
    Same solution as accepted answer – alfianrehanusa Apr 11 '22 at 05:37
  • 1
    It looks very similar, but the syntax of the code is different and where I had to save it (`.eslintrc` as opposed to `.eslintrc.js`). The answer above helped me figure out the solution, but it definitely wasn't a copy/paste solution. Was just hoping this might help speed up the process for some! – ConcernedHobbit Apr 11 '22 at 12:36
11

In your ESLint configuration you want:

quotes: [2, "single"]

In you Pretty configuration you want:

single-quote: true

You should also be consistent in your use of quotes, so you should use single quotes in the second import line:

import App from './App';
Barmar
  • 741,623
  • 53
  • 500
  • 612
  • Eslint configuration and pretty configuration, what file? – alfianrehanusa Aug 04 '19 at 04:24
  • For eslint you put the settings at the top of the JS file. I'm not very familiar with prettier, check its documentation for where the config goes. – Barmar Aug 04 '19 at 19:31
  • 2
    if for some reason you need to use both double and single quotes, just adding `singleQuote: true` in your `.prettierrc` or `.eslintrc.js` without the eslint `quotes: ["single"]` rule worked for me – joshua Jan 05 '21 at 05:11
  • 2
    adding `quotes: ["single"]` gives me this error: ` Configuration for rule "quotes" is invalid: Severity should be one of the following: 0 = off, 1 = warn, 2 = error (you passed '"single"').` – Shajeel Afzal May 16 '21 at 15:59
  • @ShajeelAfzal Corrected it. The first element is the severity level, then the quote style. – Barmar May 16 '21 at 21:56
2

None of the solutions worked for me so in my .eslintrc.js file, I replaced the following line:

extends: "@react-native-community",

With:

extends: ["@react-native-community", "prettier"],

This is what my .eslintrc.js file looks like now:

module.exports = {
  root: true,
  extends: ["@react-native-community", "prettier"],
};
Sufian
  • 6,405
  • 16
  • 66
  • 120
1

In my case I needed to implement the changes suggest above AND press CMD + SHIFT + P and select "Reload Window" to reload VS Code for the changes to take effect.

jessems
  • 1,582
  • 2
  • 11
  • 16