How can I change the prettier settings? Follow
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:
I am lost and it annoys me. The code looks less like what I want it to be.
Thanks a lot!
Please sign in to leave a comment.
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)
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.
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
"prettier"section in project package.json.
It works for me with the most recent Prettier
in my project package.json:
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 :
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
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):