Run prettier as default formatter

Hi!

I am running prettier with its configuration on the command line, and it works: it does not touch and ignores for example `src/gql` generated code.

In WebStorm and flagging prettier to run on Reformat Code, however, the `src/gql` is touched. When I run "Reformat with Prettier", then the files are not touched.

How can I make it so that when I do "Reformat Code", it actually does only execute prettier? How could I debug it?

My configuration for Prettier is:

<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="PrettierConfiguration">
    <option name="myRunOnSave" value="true" />
    <option name="myRunOnReformat" value="true" />
  </component>
</project>

Cheers!

0
8 comments

Since apparently it ain't really working, the `myRunOnReformat`-setting I mean, I have removed the default keymap for "Reformat code", and assigned it to Prettier.

Why using Prettier: it is used everywhere (other IDEs and CI).

0

The IDE does honor the .prettierignore file when reformatting code with Prettier, so, if the folder with the generated stuff is ignored, the Prettier formatter won't be applied. However, unless this folder is configured to not be touched by a formatter in Settings | Editor | Code Style, Formatter | Do not format, the code will be formatted according to IDE code style preferences on Code > Reformat Code

0

The "Do not format" is interesting, I have added "src/gql/*", and yes, then folders are ignored.

When I have the option set to "Run On Reformat", it should take the Prettier configuration.

When I remove the "Do not format": "src/gql" is again formatted.

I have in ".prettierignore" (which is Git-ignore syntax):

# generated
src/gql

# artifacts
dist
build

When I run manually, it works good:

prettier -w .

When I run "Reformat" in WebStorm, src/gql/* gets formatted. To me that shows that IDE does not honor the Prettier configuration (at least not the "ignoring" part).

It is all very messy, and I rather go without extra tools like prettier, but not everyone uses JetBrains (sadly ;-)).

I am going to keep my non-default keymapping (making me sad, but not angry); and use the "Do not format". The prettierignore is then hopefully correctly used in other IDEs.

 

0

Ok, after more than 15 years of JetBrains, I came to the realization that it is not possible to disable the IDEs formatter. The "prettier" configuration is maybe honoured, but the IDE's formatting always kicks in. For example, I have tab-width 2 in prettier, and IDE has 4 spaces: when I run "prettier -w ." it reverts the formatting of WebStorm :)

So, "Reformat code" does:
1. run the IDE's formatting
2. and run Prettier

You can reproduce this by adding ".css" in IDE's settings of Prettier "Run for files: {**/*,*}.{js,ts,jsx,tsx,vue,astro,css}" (this is what I need to do to make it work OK).

Pretty wasteful IMHO. Just add global "Skip IDEs formatting"? The trick "Do not format: **" doesn't work ;)

 

0

What does your .prettierrc look like? With

{
"tabWidth": 2,
"useTabs": false
}

the code indentation in CSS is set to 2 on Code > Reformat Code despite the CSS code style settings

0

Preferences | Editor | Code Style | Style Sheets | CSS, I have 4 spaces.

The .prettierrc is like yours:

{
  "singleQuote": false,
  "semi": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 120
}

When I do not have "css"-extension in "Preferences | Languages & Frameworks | JavaScript | Prettier", under "Run for files", and do "Reformat code", 4 spaces are used. When I do add the css-extension, and "Reformat code", it uses 2 spaces.

When I empty "Run for files" I would expect prettier to run without restrictions on file extension, and do whatever it is doing by default. Though, that doesn't work.

Maybe I should just quit digging into this. It cost me a few hours to figure out why on earth formatting didn't work. Maybe just documenting for future :)

Some more stuff.

cat .idea/prettier.xml 
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="PrettierConfiguration">
    <option name="myRunOnReformat" value="true" />
    <option name="myFilesPattern" value="{**/*,*}.{js,ts,jsx,tsx,vue,astro,css}" />
  </component>
</project>

.idea/codeStyles/codeStyleConfig.xml
<component name="ProjectCodeStyleConfiguration">
  <state>
    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
  </state>
</component>


 

 

0

>When I do not have "css"-extension in "Preferences | Languages & Frameworks | JavaScript | Prettier", under "Run for files", and do "Reformat code", 4 spaces are used. When I do add the css-extension, and "Reformat code", it uses 2 spaces.

This is the expected behavior: with css listed under "Run for files", the Prettier is used to format .css files, thus 2 spaces indentation is used. Otherwise, the IDE code style settings are applied, resulting in the 4 spaces indentation

>When I empty "Run for files" I would expect prettier to run without restrictions on file extension, and do whatever it is doing by default. Though, that doesn't work.

In "Run for files", you need to explicitly specify the file patterns to which Prettier will be applied; if this list is empty, Prettier won't be used for formatting, the IDE own formatter will be run instead

0

Then I will settle with the "expected behavior":

  1. WebStorm does 2 rounds of formatting: first it does its own, and then its runs prettier (this can be easily observed when you format code, and all turns blue == change, and then it all turns back to unchanged)
  2. WebStorm must be configured to explicitly ignore files extra to the ones specified in .prettierignore, otherwise, the first pass (IDE formatting) will not get corrected by the second pass (prettier) of reformatting
  3. WebStorm must be explicitly said what files to run Prettier with; it does not reformat all (as Prettier does) by default

That's quite a few things I will need to document internally and make sure it is understood :-/

 

0

Please sign in to leave a comment.