Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    Thomas Jay Rush
    Hi. Love your tool, but I'm curious if this is open source. How can you support such an excellent tool? Is there a 'for-purchase' version with some additional feature? I'd pay.
    Ryan Zimmerman
    @tjayrush AFAIK, there isn't a paid version, however, donations are appreciated: https://opencollective.com/prettier
    (BTW, I'm not a member of the team, just an active community member)
    Jed Fox
    @tjayrush For companies, there’s Tidelift which is a paid support plan for a bunch of npm packages.
    Chiawen Chen
    Hi, I am developing a prettier plug-in for SQL. And I am having difficulty understanding how comments are handled. I am reading the source of estree printer as an examplar. I suppose there should be codes that attach comments to ast nodes, also there should be codes that print leading and trailing comments attached to nodes. But I cannot find these said codes. Can you help me with an outline about how comments are handled?
    Egor Gorbachev
    Hi all, is there a list of popular recognizible open source projects using Prettier? I want to convince my colleague to switch to Prettier 😈
    Ryan Zimmerman
    Lean Junio
    Hey guys, does anybody know why prettier formats these two constructors differently on ts?
    Chiawen Chen
    Prettier tries to fit it in one line when possible. The left example when fit in one line will exceed the configured maximum width, therefore it is broke into multiple lines.
    Ben Schley
    Hello, how I can install the official prettier-php plugin for the prettier plugin for visual studio code? I read the documentation but I had no luck to get it running :/
    I have prettier in visual studio code installed but not the plugin in the plugin. I talk from (https://github.com/prettier/plugin-php)
    Eric Nemchik

    i've come across something i don't love about prettier formatting in html (and other markup languages like xml or any using <tags>).

    I start with one long line like this

    <q-btn v-if="this.multifactorEnabled === false" name="multifactorEnabled" @click="enablesMfa">Enable MFA</q-btn>

    prettier wraps that like so

    <q-btn v-if="this.multifactorEnabled === false" name="multifactorEnabled" @click="enablesMfa"
      >Enable MFA</q-btn

    but this is hideous. i reformat it to

    <q-btn v-if="this.multifactorEnabled === false" name="multifactorEnabled" @click="enablesMfa">
      Enable MFA

    and prettier is fine with this. is there some kind of option to adjust this behavior?

    The reason prettier works that way by default is that your manual reformat technically adds whitespace to the value inside the tag.
    Eric Nemchik
    that makes sense. so using htmlWhitespaceSensitivity: "ignore" would accomplish what i want visually, but would be adding white space that could affect the output of the markup itself. (assuming ignore means what i think it means after reading. the docs don't really explain explicitly the difference between the 3 options - saying whitespace is ignored or not doesn't quite explain the effect, thus i had overlooked this option when searching the docs initially)
    Ryan Zimmerman
    Yep, ignore should do what you describe.
    Hey 👋
    There is a neat feature request for WebStorm/PhpStorm for better code folding support. Prettier is formating long class names in a new line. But if the element is folded there is no way to see it in the IDE. If anyone got a JetBrains account and could maybe upvote for this feature request: https://youtrack.jetbrains.com/issue/WEB-45637
    It would mean alot for me. This would make prettier even better with JetBrains Products :)
    Javed Bartlett
    I was wondering if it were possible to have parens added around a block of multiline jsx with prettier?
    Every time I save my file it removes the parens and it's not lining up with my companies lint config
    Ryan Zimmerman
    prettier does not comply with arbitrary lint configs. If you must comply with an external config, you might look into prettier-eslint, to let eslint re-add the parens.
    Manuel Mendez
    hey all, I went looking in the docs and github issues and couldn't find the answer to my quesion: how can I configure prettier to sort json object by keys?
    I've got a markdown file with what was a one line json blob wrapped in "```json", and prettier reflowed to many lines ( :+1: ) but it would be nice to also sort the keys.
    I saw an issue about package.json but I'm looking for more generic json sorting.
    also maybe yaml too
    hmm looks like prettier does not do the json reflow in the ```json within markdown, looks like I did that manually
    Gregorio Setti

    Hi! I'm using prettier on some markdown files, but it seems to ignore errors inside the yaml front matter.
    The prettier playground show the error correctly but not my local setup (they have the same versions and options):

    Prettier 2.0.5
    Playground link

    --parser mdx


    title: test: 1
    # Test 1


    SyntaxError: Nested mappings are not allowed in compact mappings (1:8)
    > 1 | title: test: 1
        |        ^^^^^^^
    any idea?
    Jed Fox
    Prettier just ignores invalid syntax in embedded languages because we can never be positive that you intended to embed something of a different language. However on the playground we throw errors, probably for debugging purposes.
    Gregorio Setti
    got it :thumbsup: I guess I'll be able to hook a remark plugin to check it maybe :thought_balloon:
    G. Richard Bellamy
    When trying to work with the XML plugin (https://github.com/prettier/plugin-xml) using Typescript, I get a compilation error:
    return prettier.format(
            printWidth: options.printWidth,
            tabWidth: options.tabWidth,
            parser: "xml"
    TS2322: Type 'xml' is not assignable to type '"babel" | "babel-flow" | "babel-ts" | "flow" | "typescript" | "css"...
    I'm open to suggestions
      const add = useCallback(
        (uuid: string) => value.every(each => each !== uuid) && handleChange([...value, uuid]),
        [value, handleChange]
      const remove = useCallback((uuid: string) => handleChange(value.filter(each => each !== uuid)), [
    I think the latter (which format by prettier) is less readability

    Can someone please help me figure out why eslint->prettier is complaining about random unexpected tokens on .html files?

    This is a fairly close to default setup from create-nuxt-app when selecting both eslint and prettier. Everything else is working great expect this one html file, and I'm way into a rabbit hole of docs and GH issue with no avail.

    In that example I can move tags around it's just complain about one of them with an unexpect token error, usually complaining about whatever the 3rd tag under <head> is. Or it'll just complain about line 6 when it's completely blank, just weirdness in general.
    Hello guys, I am struggling with configuring Prettier. I am very pleased with how everything works but I want to change how it modifies my css files. For these I want it just to add semicolons at the end of the lines without modifying the spaces and blank lines in the file.
    Mark Kevin Besinga
    hello. i dont really know how to configure prettier but I just use it on my vscode but suddenly right now my package.json has been formated using 4 spaces instead of 2. how can I fix that? this is my vscode settings.json
      "workbench.iconTheme": "vscode-icons",
      "editor.formatOnPaste": true,
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll": true
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      "javascript.format.placeOpenBraceOnNewLineForControlBlocks": false,
      "javascript.format.placeOpenBraceOnNewLineForFunctions": false,
      "typescript.format.insertSpaceBeforeFunctionParenthesis": true,
      "typescript.format.placeOpenBraceOnNewLineForControlBlocks": false,
      "typescript.format.placeOpenBraceOnNewLineForFunctions": false,
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
      "prettier.tabWidth": 2
    Marceau Maubert
    hi, I'm currently having an issue where the script part of my .vue files are refusing to get formatted by prettier in vscode properly, despite the output log saying that it's doing it. I tried messing with all kinds of settings and the only setting I could get to work is vueIndentScriptAndStyle. any idea why?
    Daniel Neal
    I'm struggling to wrap my head around the printWidth option. The docs say "It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth." So this seems to suggest that 80 is not the hard limit? But everything I've formatted has always been below 80. What is an example of it going above 80 despite printWidth being 80? How large can it go when set to 80?
    Jed Fox
    One case is a string literal. It can go as long as the string literal is. I think the other cases are define/it calls in test files and imports of a single name, which never break onto multiple lines no matter how long they get @danrneal
    Daniel Neal
    Okay I think I'm understanding then... It is a hard limit almost always, except sometimes. However those sometimes are rare. Is that about right?
    Jed Fox
    That sounds right!
    Daniel Neal
    Awesome! Thanks! I'm glad prettier chose 80 instead of 88 like black..... makes vim users happy when horizontal scroll isn't a thing.
    Keegan Saunders
    hey, is there something like quoteProps: "as-needed", but for YAML ?