Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
    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:
    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 ( 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 S
    hey, is there something like quoteProps: "as-needed", but for YAML ?
    I tried using it, but it doesn't seem to work. am I doing it wrong? is there an open issue for this? would be interested in working on this feature
    Christopher Kim
    i’m using off the shelf prettier 2.0.5 with svelte…in my markup i’m getting an insert 2 spaces error for the following {#each $someVar as v} right at the dollar sign…does anyone know why that is raised?
    Andrew Leedham
    Hi All. I am new to prettier development, trying to add @forward/@use scss support to language-css. But I am somewhat confused on how to structure a word and paren_group to be a separate group but not a function. See If anyone can point me in the right direction, that would be much appreciated :)
    Artem Ilchenko
    Hi All. Tell me plz. I have custom rules for import formatting with eslint, it is very important for me. Can I disable prettier import formatting?
    Ryan Zimmerman
    No, however, if your eslint formatting rules can auto-format, you can format with prettier, then have eslint format them back to the way you want them.
    Jon Harper
    Hi, my google-fu has failed me. Does someone know how you get prettier to report each style error inside files ? Other tools I use work like this:
    [INFO] --- maven-checkstyle-plugin:3.1.0:check (default) 
    [INFO] Début de la vérification...
    [ERROR] ';' is preceded with whitespace. [NoWhitespaceBefore]
    [ERROR] Name 'GetVersion' must match pattern '^[a-z][a-zA-Z0-9]*$'. [MethodName]
    [...] other potential errors
    with prettier --check or --list-different, I only get the filename, not the actual style errors
    Ryan Zimmerman
    Pretter itself won't do that. eslint-plugin-prettier will.
    Though I'm curious why you want this, the entire point of prettier is that it auto-fixes your style.
    Jon Harper
    Thanks for the pointers for eslint-plugin-prettier ! Do you have any links on how to use it with CRA ?
    I don't want prettier to write my files, I find it too intrusive. It can only write the whole file so it annoys me when prettier rewrites sections of the file that I didn't modify (because the file was not according to prettier beforehand)
    So I want to fix the mistakes myself, and hence want a list of mistakes to fix.
    Jon Harper
    Thanks, I got eslint-plugin-prettier to work with cra: EXTEND_ESLINT=true and "extends": [
    in package.json eslintConfig
    using eslint-config-prettier
    Anyone knows how to make the prettier rules warn instead of error ? using
    "rules": { "prettier/prettier": "warn" }
    doesn't seem to work with CRA
    Jon Harper
    Nvm, it works. Just have to rm -rf node_modules everytime the eslint configuration changes because of CRA
    deseperate to have just a semicolon automaticly at end of line, try all and NEVER happened!!!!