ReactJs Strings must be with singlequote

Question

I'm trying to install react-multi-carousel on my React app. I have some difficoulties with error like:

Line 1:34: Strings must use singlequote quotes Line 2:22:
Strings must use singlequote quotes Line 3:8: Strings must use singlequote quotes Line 36:53: Strings must use singlequote quotes Line 42:43: Strings must use singlequote quotes Line 42:53: Strings must use singlequote quotes

This is my code.

import React, { Component } from "react";
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";


class GameList extends Component {

    render() {

        const responsive = {
            desktop: {
                breakpoint: { max: 3000, min: 1024 },
                items: 3,
                slidesToSlide: 3, // optional, default to 1.
            },
            tablet: {
                breakpoint: { max: 1024, min: 464 },
                items: 2,
                slidesToSlide: 2, // optional, default to 1.
            },
            mobile: {
                breakpoint: { max: 464, min: 0 },
                items: 1,
                slidesToSlide: 1, // optional, default to 1.
            },
        };

        return (
            <Carousel
                swipeable={false}
                draggable={false}
                showDots={true}
                responsive={responsive}
                ssr={true}
                infinite={true}
                autoPlay={this.props.deviceType !== "mobile" ? true : false}
                autoPlaySpeed={1000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={["tablet", "mobile"]}
                deviceType={this.props.deviceType}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
            >
                <div>Item 1</div>
                <div>Item 2</div>
                <div>Item 3</div>
                <div>Item 4</div>
            </Carousel>

        );
    }
}
export default GameList

https://stackoverflow.com/questions/29312957/how-to-tell-eslint-that-you-prefer-single-quotes-around-your-strings — Avanthika, Jan 30 '20 at 17:17
it is very much clear from warning messages. use single quotes .e.g `removeArrowOnDeviceType={['tablet', 'mobile']}` — Zohaib Ijaz, Jan 30 '20 at 17:17
The right solution is reading a bit about eslint best practices and configuring your preference accordingly. — Avanthika, Jan 30 '20 at 17:21
You can also disable eslint warning for single/double quotes in eslintrc. — Avanthika, Jan 30 '20 at 17:22

Muhammad Zeeshan · Answer 1 · 2020-01-30T17:36:23.023

3

That's an es-lint warning. You can fix that in your es-lint config file ( .eslintrc).

"rules": {
    "quotes": [2, "single", { "avoidEscape": true }]
}

edited Jan 30 '20 at 17:36

answered Jan 30 '20 at 17:19

Muhammad Zeeshan

4,608
4
15
41

score 1 · Answer 2 · answered Jan 30 '20 at 17:19

This is eslint warning, not a react error. You need a .eslintrc on your root folder.

{
  "rules": {
    "quotes": [2, "double"]
  }
}

Note: This will throw error when you have strings within single quotes. Just right click in your editor and choose Eslint Fix, that should fix your trouble.

score 1 · Answer 3 · answered Sep 22 '21 at 08:40

If you cant find .eslintrc files, then just workaround like this:

Get prettier at local:

npm install --save-dev --save-exact prettier
touch .prettierrc.json # create a .prettierrc.json file

add this line into .prettierrc.json file:

{
"singleQuote": true
}

under package.json, add below under "scripts"

"prettier": "prettier --write ./src"

now back to your Terminal and run

npm run prettier

and it should fix all the double quotes to single quotes.

ReactJs Strings must be with singlequote

3 Answers3