How can I change the prettier settings?

WebStorm allows importing code style preferences from prettier. For example:

press Yes to get settings applied - they will be use when you reformat your code with Code | Reformat code, as well as when running Reformat with Prettier action

Thanks for the reply, where do I find the settings? In the npm folder?

sorry, haven't got what you mean... what settings?

The screenshot you've shown is the package.json. Do I do it globally or is it somewhere local?

If you have prettier installed locally in your project, it must be your project package.json (or prettier config file - https://prettier.io/docs/en/configuration.html).

If you have prettier installed globally, you can probably use environment variables... see https://github.com/prettier/prettier/issues/98 for some hints

I have not installed anything. I am using the WebStorm IDE and with the latest update, it is available using CTRL + SHIFT + ALT + P.

I was not able to find settings for it anywhere.

>I have not installed anything.

WebStorm doesn't bundle Prettier with it, it has to be installed separately (see https://www.jetbrains.com/help/webstorm/prettier.html). Usually it's recommended to have it installed in your project (npm install --save-dev --save-exact prettier)

You must have installed it somewhere on you machine; check the Prettier package value at Settings | Languages & Frameworks | JavaScript | Prettier

I have it installed globally but settings can't be changed there. Webstorm doesn't take the .json into consideration for whatever reason. I find it weird given the fact that Webstorm has it as default functionality from 2018 onwards.

>Webstorm doesn't take the .json into consideration for whatever reason. 

Prettier itself won't take it info account when it's installed globally:)

I am confused now. I have changed the settings in the global installation. Now, I am not sure if Webstorm created a local copy of the settings and I need to look them up there or where do I need to make the changes? Because at the moment it takes the default settings.

WebStorm doesn't itself create any prettier configs, neither locally not globally

But how does the shortcut work then? The plugin lists the home directory of the prettier node module. 

It runs your global prettier configured in Settings | Languages & Frameworks | JavaScript | Prettier

Ok, this is what I was expecting as well. Here is my package.json for prettier:

When I am doing the reformatting, nothing happens and it just sticks to the default config.

Good news: due to https://github.com/prettier/prettier/pull/2434, Prettier (even global!) uses configuration file nearest to current file (up the directory tree) when formatting.

So, you can install it globally and configure it in your project, by adding the corresponding .prettierrc file or "prettier" section in project package.json.

It works for me with the most recent Prettier

in Settings | Languages & Frameworks | JavaScript | Prettier, I have a global package configured:

in my project package.json:

"prettier": {
    "singleQuote": true
}

Now CTRL + SHIFT + ALT + P action changes double quotes to single quotes in my files, though I don't have prettier installed in my project

Thanks a lot, it now worked. I don't know why it didn't before but it now does. Thanks a lot for your help!

I think that Webstorm's ability to use configuration files would be worthwhile mentioning here: https://prettier.io/docs/en/webstorm.html

I meet the issue and the case is

My webstorm is the 2018.3 and the webstorn setting for prettier are correct.

I have no .prettierrc file and the config prettier  in package json :

// package.json

{

   ....

   prettier: {

       "jsxSingleQuote": true

   } 

}

this  config make the JSX inline attribute to be single quote

<Component title="hello" />  should be formatted as <Component title='hello'>

but, actually, the format by webstorm will result <Component title='hello'>  to <Component title="hello">

So, how to make webstorm format base on the package json configuration.

Try changing Generated quote marks value in Settings | Editor | Code Style | HTML | Other to Single

Note that you need using Reformat with Prettier action to format with Prettier; Code | Reformat code action doesn't use Prettier for formatting

seems its prettier's problem

prettier will not format to that way even if it did provide that option

sorry, I'm using the old version of prettier

----

update:

after update to newest version of prettier, I config the prettier option 'jsxSingleQuote' as true but the webstorm still perform the same dubble quote behavour

Is webstorm will automatically use the prettier options from user's project package.json (or .prettierrc file ) ? I just want to know this

WebStorm does use options from user's project package.json (or .prettierrc file ) when running Reformat with Prettier

For anyone running into this or similar issues: You have to select the entire content of the file when using "Reformat with Prettier" from the WebStorm context menu. Selecting only a part of the file won't work properly. It doesn't respect printWidth for example.

It's a Prettier issue.
There have been multiple similar issues with Prettier in the past, for example: https://github.com/prettier/prettier/issues/4926

Thanks Elena, I stand corrected. Prettier has --range-start and --range-end CLI options. Thanks for shedding light on this.

Seems it's intellliJ's problem, they don't give a spot to configure the prettier file in the IDE settings... but if you open the config file it seems to set it up flawlessly automatically when you click yes (per my current impression):