How can I change the prettier settings?

I want to change the prettier settings but I haven't managed to get this done so far.

Where can I change them? I want to use single quotes and indent by 4 spaces.

 

I've asked the question here as well:

https://stackoverflow.com/questions/49586279/making-webstorm-use-single-quotes-for-prettier

 

I am lost and it annoys me. The code looks less like what I want it to be.

 

Thanks a lot!

25 comments
Comment actions Permalink

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

 

1
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

1
Comment actions Permalink

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.

0
Comment actions Permalink

>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

1
Comment actions Permalink

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.

0
Comment actions Permalink

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

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

 

0
Comment actions Permalink

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.

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0
Comment actions Permalink

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

1
Comment actions Permalink

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.

0
Comment actions Permalink

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

 

2
Comment actions Permalink

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!

1
Comment actions Permalink

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

0
Comment actions Permalink

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.

 

0
Comment actions Permalink

 

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

0
Comment actions Permalink

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

  

0
Comment actions Permalink

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

 

 

0
Comment actions Permalink

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

0
Comment actions Permalink

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.

0
Comment actions Permalink

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

0
Comment actions Permalink

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

0

Please sign in to leave a comment.