Prettier-atom: Different config options for CSS vs JS

[keithjgrant]

I may be completely in the minority here (feel free to close this if I am), but I prefer different config options when using prettier for JS compared to CSS. Specifically, I prefer single quotes in JS, but double quotes in CSS. I would like it if I could somehow configure this option differently for the two file types.

[robwise]

@keithjgrant You can add a .prettierrc file to do this using overrides: https://github.com/prettier/prettier#configuration-overrides

[keithjgrant]

Awesome! thanks

[keithjgrant]

I haven’t been able to get this to work. I’ve added a .prettierrc at the root of my project, with the following content:

{
  "singleQuote": false
}

I’ve also tried adding a prettier key to my package.json:

  "prettier": {
    "overrides": [
      {
        "files": "src/css/**/*.css",
        "options": {
          "singleQuote": false
        }
      }
    ]
  }

In both cases, it still changes quotes to single quotes, according to my configuration in the plugin Settings.

[robwise]

@keithjgrant Are you using the eslint integration as well? If so, can you try turning it off and seeing if it makes a difference? Also, can you make sure you have the latest version of prettier in your node modules?

[protoEvangelion]

I overrode an scss option like this and it works perfectly:

{
    "singleQuote": true,
    "overrides": [
        {
            "files": "*.scss",
            "options": {
                "singleQuote": false
            }
        }
    ]
}

[SavePointSam]

@keithjgrant Do know that due to #270, you'll need to reload Atom after adding your prettier configuration. Sorry about that!

[charlestati]

Is there a way to use single quotes in Javascript and double quotes in styled components?
They are both in a .js file.

[j-f1]

I don’t think so.

[andreiglingeanu]

@charlestati Yes, if you're willing to name files with styled components a bit differently, like file.sc.js and agree to put there only SC-related code.